GetHow

Your How to Guide

  • Business
  • Career & Education
  • Entertainment
  • Health & Fitness
  • Internet
  • Technology
  • Tutorials

Creating Forms in HTML [Basic]

December 8, 2013 by Atul Kumar Pandey

In the HTML document, we designed only one way communication in the web. The HTML document open and show the message. Forms are the tools to improve the user interface in the web. Using forms we can design a web page on which the user can communicate his wish, opinion and suggestions. Let’s see how to create forms in HTML.

A form is an area that can contain form elements. Form elements are elements that slow users to enter information like text, fields and text area fields, drop down menu, radio buttons, check boxes, etc.

A form is defined with the <form> tag.

<form>
<input />
<input />
<input />
<input />
</form>

Action Attribute

Forms are used to get input from the users. The user input is submitted to the server. The action attribute informs the browser the location of the server to which the form input has to be submitted.

Method Attribute

The method attribute has only two choices of values. They are,

Method="get"
Method="post"

These denotes the protocol the server users in the implementing the forms features. Usually the vale used for the method attribute is,

Method="post"

This is the recommended protocol with the post method, the information form the users is put into the data stream of HTTP, and the backend program can read the data as input through the “standard input” data stream.

In the case of the method = “get”, the data received in the form are placed at the end of URL. If the form is very big and has a number of inputs, the get method causes the URL to be very long. So the method = “get” option is often discouraged.

HTML Form Elements

1. Text Fields

Text fields are used when we want to user to type letters, numbers, etc. in a form.

<form>
First Name: <input type="text" name="firstname" />
Last Name: <input type="text" name="lastname" />
</form>

It will look in browser as,

First Name:
Last Name:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

2. Check Boxes

Check boxes are used when we want the user to select one or more options of limited numbers of choices.

<form>
<input type="checkbox" name="vehicle" value="bike" /> Do You Have Bike
<input type="checkbox" name="vehicle" value="car" /> Do You Have Car
<input type="checkbox" name="gadget" value="mobile" /> Do You Have Mobile
<input type="checkbox" name="gadget" value="laptop" /> Do You Have Laptop
</form>

It will look in browser as,

Do You Have Bike
Do You Have Car
Do You Have Mobile
Do You Have Laptop

Note that write text after the check box tag, it will align all the boxes left side and will look better.

3. Radio Buttons

Radio buttons are used when we want the users to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="unspecified" /> Unspecified
</form>

It will look in browser as,

Male
Female
Unspecified

Note that write text after the radio button tag, it will align all the boxes left side and will look better.

4. Form’s Action Attribute and Submit Button

When the user clicks on submit button, the content of the form is sent to another file. The form’s action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="html_form_database.html" method="get">

<b>Enter Your Name</b>
First Name: <input type="text" name="firstname" />
Last Name: <input type="text" name="lastname" />

<b>Select What You Have</b>
<input type="checkbox" name="vehicle" value="bike" /> Do You Have Bike
<input type="checkbox" name="vehicle" value="car" /> Do You Have Car
<input type="checkbox" name="gadget" value="mobile" /> Do You Have Mobile
<input type="checkbox" name="gadget" value="laptop" /> Do You Have Laptop

<b>Select Your Gender</b>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="unspecified" /> Unspecified

<input type="submit" value="Submit">

</form>

It will look like in browser as,

Enter Your Name 

First Name:
Last Name:

Select What You Have

Do You Have Bike
Do You Have Car
Do You Have Mobile
Do You Have Laptop

Select Your Gender

Male
Female
Unspecified

This is the basic of making simple HTML forms.

Filed Under: Tutorials

About Atul Kumar Pandey

I'm Atul Kumar Pandey, a full time blogger at GetHow by passion and founder of this blog by profession. I write what makes me feel worthy enough to share.

Comments

  1. khuranariya02 says

    January 29, 2014 at 1:11 PM

    Hello Atul kumar
    Basic steps to build up form in HTML
    nice written 🙂

    • Atul Kumar Pandey says

      January 29, 2014 at 1:15 PM

      Thanks for your feedback. I hope you like our short tutorial. 🙂

Business News

Garden Office

Important Aspects of Working in Garden Offices

Retired Making Money

Money Making Ideas for Retired People

Financially Prepare

Tips to Help You Financially Prepare for a Sabbatical from Work

Start Your Budget Business

Heath and Fitness

Health Insurance

How Health Insurance Can Help You Lead a Healthy and Stress-free Life?

Workout

7 Minute Workout Goals Will Transform Your Physic in to an Extreme Level

How to Start Your Journey to a Healthier Diet?

10 Amazing Health Benefits of Honey

10 Amazing Health Benefits of Honey

About Us | Advertise | Affiliate Disclosure | Privacy Policy | Write for Us


Handcrafted with by Atul

Powered by GetHow