HTML Form Elements

Every HTML form elements is covered in this chapter.

The 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>

The < input > Element

The <input> element is one of the most often used form elements.

There are multiple methods to show the <input> element based on the type attribute.

Example

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

The < label > Element

A label for multiple form elements is defined by the <label> element.

Users of screen readers will find the <label> element helpful since it will read the label aloud when the user focuses on the input element.

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.

To link them together, the id attribute of the <input> element and the for attribute of the <label> tag must be equivalent.

The < select > Element

The <select> element defines a drop-down list:

Example

				
					<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="tata">Tata</option>
  <option value="mazda">Mazda</option>
  <option value="honda">Honda</option>
  <option value="hyundai">Hyundai</option>
</select>

A selectable option is defined via the <option> element.

The first item in the drop-down list is picked by default.

Add the chosen attribute to the option in order to define a pre-selected option:

Example

				
					<option value="honda" selected>Honda</option>

Visible Values:

Use the size attribute to specify the number of visible values:

Example

				
					<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="tata">Tata</option>
  <option value="mazda">Mazda</option>
  <option value="honda">Honda</option>
  <option value="hyundai">Hyundai</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example

				
					<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="tata">Tata</option>
  <option value="mazda">Mazda</option>
  <option value="honda">Honda</option>
  <option value="hyundai">Hyundai</option>
</select>

The < textarea > Element

The <textarea> element defines a multi-line input field (a text area):

Example

				
					<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The number of visible lines in a text area is specified by the rows attribute.

The visible width of a text section is specified by the cols attribute.

The HTML code above will appear in a browser like this:

You can also define the size of the text area by using CSS:

Example

				
					<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

The < button > Element

The <button> element defines a clickable button:

Example

This is how the HTML code above will be displayed in a browser:

The < fieldset > and < legend > Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

				
					<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Johnny"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doesun"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

The < datalist > Element

A list of pre-defined options for a <input> element is specified via the <datalist> element.

When entering data, users will get a drop-down list of the pre-defined alternatives.

The id property of the <datalist> element must be referred to via the list attribute of the <input> element.

Example

				
					<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

The < output > Element

The outcome of a calculation (such as one carried out by a script) is represented by the <output> element.

Example

Perform a calculation and show the result in an <output> element:

				
					<form action="/action_page.php"
  oninput="x.value=parseInt(c.value)+parseInt(d.value)">
  0
  <input type="range"  id="c" name="a" value="60">
  100 +
  <input type="number" id="d" name="b" value="60">
  =
  <output name="x" for="c d"></output>
  <br><br>
  <input type="submit">
</form>