HomeContact UsPortfolio

FORMS

Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing. An HTML form contains different kind of information such as username, password, contact number, email id etc.

There are various form elements available like text fields, text-area fields, radio buttons, submit buttons, check-boxes etc. Using these elements the information of a user is submitted on a web server.

The <form>tag is used to create an HTML form and it has following syntax −

<form>
     form elements like input, textarea etc.
</form>

The <input> Element

Input Elements are the most common elements which are used in HTML Forms.

An <input> element can be displayed in many ways, depending on the type attribute.

Few examples are as follows:

  • <input type="text">
  • <input type="number">
  • <input type="button">
  • <input type="checkbox">
  • <input type="email">
  • <input type="password">
  • <input type="radio">
  • <input type="submit">
  • <input type="image">
  • <input type="date">
  • <input type="month">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="time">
  • <input type="color">
  • <input type="url">

The <input> tag has following syntax −

<form>
     <input type="" id="" > 
</form>

The <label> Element

The <label> tag defines a label for many form elements.

The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a users clicks on the text within the<label> element, it toggles the control.

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is same as input’s id.

The <label> tag has following syntax −

<form>
     <label for="fName">First Name</label>
     <input type="text" id="fName" > 
</form>

Example :

<form>
  <label for="name">Name</label><br>
  <input type="text" id="name"><br>


  <label for="contact">Ph No</label><br>
  <input type="number" id="contact"><br>


  <label for="mail">E-mail</label><br>
  <input type="email" id="mail"><br>


  <label for="pwd">Password</label><br>
  <input type="password" id="pwd"><br>


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

This will produce the following result −

form output

Radio Buttons in HTML Form :

Radio Buttons are used to let the user select exactly one option from a list of predefined options.

Example :

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

This will produce the following result −

radio button

Checkboxes in HTML Form :

Checkboxes are used to let the user select one or more options from a pre-defined set of options.

Example :

<form>
  <input type="checkbox" id="prog1" name="prog1" value="JavaScript">
  <label for="prog1">JavaScript</label><br>


  <input type="checkbox" id="prog2" name="prog2" value="Python">
  <label for="prog2">Python</label><br>


  <input type="checkbox" id="prog3" name="prog3" value="Ruby">
  <label for="prog3">Ruby</label><br>


  <input type="checkbox" id="prog4" name="prog4" value="Java">
  <label for="prog4">Java</label><br>


  <input type="checkbox" id="prog5" name="prog4" value="C++">
  <label for="prog5">C++</label>
</form>

This will produce the following result −

checkbox

Select Boxes in HTML Forms :

Select boxes are used to allow users to select option from a pull-down list of options.

Select boxes are created using two elements which are <select>and <option>. List items are defined within the select element.

Example :

<form>
  <label for="country">Country:</label> 
  <select name="country" id="country"> 
            <option value="India">India</option> 
            <option value="Sri Lanka">Sri Lanka</option> 
            <option value="Australia">Australia</option> 
            <option value="Canada">Canada</option> 
            <option value="England">England</option> 
  </select>
</form>

This will produce the following result −

select box