HMTL – Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.

HTML Form Syntax

HTML forms are required if you want to collect some data from the site visitor. For example: If a user wants to purchase some items on the internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

<form action="server url" method="get|post">  
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>

HTML Form Tags

Let’s see the list of HTML 5 form tags.

TagDescription
<form>It defines an HTML form to enter inputs by the used side.
<input>It defines an input control.
<textarea>It defines a multi-line input control.
<label>It defines a label for an input element.
<fieldset>It groups the related element in a form.
<legend>It defines a caption for a <fieldset> element.
<select>It defines a drop-down list.
<optgroup>It defines a group of related options in a drop-down list.
<option>It defines an option in a drop-down list.
<button>It defines a clickable button.

HTML <Form> Element

The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to a web server such as text field, text area, password field, etc.

The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc.

<form>  
//Form elements  
</form>  

HTML <input> Element

The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form a user. Following is the example to show the simple text input.

<body> 
	  <form>  
         Enter your name  <br>  
        <input type="text">  
    </form>    
</body>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

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

HTML Text Fields

The type=”text” attribute of input tag creates text-field control also known as single line text-field control. The name attribute is optional, but it is required for the server-side component such as JSP, ASP, PHP etc.

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

HTML Label Element

It is considered better to have a label in form. As it makes the code parser/browser/user friendly.

If we click on the label tag, it will focus on the text control. To do so, you need to have for an attribute in label tag that must be same as the id attribute of the input tag.

<body> 
	  <form>  
         <label for="firstname">First Name: </label> <br/>  
         <input type= "text" id= "firstname" name="firstname"/> <br/>  
         
         <label for="lastname">Last Name: </label>  <br/>
         <input type="text" id="lastname" name="lastname"/> <br/>    
    </form>  
</body>

It is good to use <label> tag with form, although it is optional. If you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy of touchscreens.


HTML Textarea

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using “rows” or “cols” attribute or by CSS.

<body> 
	  <form>  
         Enter your address:<br>  
         <textarea rows="2" cols="20"></textarea>  
   </form>    
</body>

HTML Radio Button

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

<body> 
	  <form>  
         <label for="gender">Gender: </label>  
         <input type="radio" id="gender" name="gender" value="male"/>Male  
         <input type="radio" id="gender" name="gender" value="female"/>Female    
   </form>    
</body>

HTML Checkboxes

The checkbox control is used to check multiple options from given checkboxes.

<body> 
	  <form>  
         Hobby:<br>  
         <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
         <label for="cricket">Cricket</label> <br>  
 
         <input type="checkbox" id="football" name="football" value="football"/>  
         <label for="football">Football</label> <br>  
         
         <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
         <label for="hockey">Hockey</label>    
    </form>
</body>

These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display.


HTML Submit Button

HTML <input type=”submit”> are used to add a submit button on web page. When a user clicks on the submit button, then form get submitted to the server.

<body> 
	  <form>  
         <label for="firstname">Enter first name</label><br>  
         <input type= "text" id= "firstname" name="firstname"><br>  
         <label for="lastname">Enter last name</label><br>  
         <input type= "text" id= "lastname" name="lastname"><br>  
         <input type="submit" value="submit">  
    </form> 
</body>

The type = submit, specifying that it is a submit button.

The value attribute can be anything which we write on the button on the web page.

The name attribute can be omitted here.

Supporting Browsers

ElementChromeIEFirefoxOperaSafari
formYesYesYesYesYes