#23 HTML Form Elements

In this tutorial we will see all different HTML form elements.


The HTML <form> element can contain one or more of the following form elements

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <button>
  • <fieldset>
  • <legend>
  • <datalist>
  • <output>
  • <option>
  • <optgroup>


We already seen in various form example. This is the most used element.

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


<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next chapter

Notice <label> tag in above example. The <label> tag defines a label for many form elements.

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

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

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) – because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

tag used to make drop-down list.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>