HTML Form Elements

This chapter describes all the different HTML form elements.

HTML form elements are used to capture user input. There are various types of form elements, for example, the text box, check box, drop down, submit catch, and much more.

In this tutorial, you will learn-

The HTML <form> Elements

The HTML form element can contain at least one of the accompanying form elements:

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

The <input> Element

Quite possibly the most used form element is the <input> element.

The <input> element can be shown severally, contingent upon the type attribute.

Example

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

The input Element

Every one of the various values of the sort attribute are covered in the next chapter: HTML Input Types.

The <label> Element

The <label> element defines a label for a few form elements.

The <label> element is valuable for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element likewise help users who experience issues tapping on tiny areas (like radio catches or checkboxes) – because when the user taps the content inside the <label> element, it toggles the radio catch/checkbox.

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

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="honda">honda</option>
  <option value="alto">alto</option>
  <option value="Corolla">Corolla</option>
  <option value="Prado">Prado</option>
</select>

The select Element

The select element defines a drop-down list:

The <option> elements defines an alternative that can be chosen.

By default, the primary item in the drop-down list is chosen.

To define a pre-chosen choice, add the chose attribute to the choice:

Example

<option value="fiat" selected>Fiat</option>

Pre-selected Option

You can preselect an option with the selected attribute:

Visible Values:

Use the size attribute to determine the quantity of noticeable values:

Example

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="honda">honda</option>
  <option value="alto">alto</option>
  <option value="Corolla">Corolla</option>
  <option value="Prado">Prado</option>
</select>

Visible Option Values

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

Allow Multiple Selections:

Use the numerous attribute to allow the user to choose more than one value:

Example

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="honda">honda</option>
  <option value="alto">alto</option>
  <option value="Corolla">Corolla</option>
  <option value="Prado">Prado</option>
</select>

Allow Multiple Selections

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

Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.

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 row attribute indicates the apparent number of lines in a text area.

The cols attribute determines the apparent width of a text area.

This is the means by which the HTML code above will be shown in a browser:

Textarea

The textarea element defines a multi-line input field.

You can likewise 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>

Styling Textarea

Use CSS to change the size of the textarea:

The <button> Element

The <button> element defines a clickable catch:

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

This is the means by which the HTML code above will be shown in a browser:

The button Element

Note: Always indicate the type attribute for the catch element. Various browsers may use different default types for the catch element.

The <fieldset> and <legend> Elements

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

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="Salman"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Khan"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

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

Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.

The <datalist> Element

The <datalist> element indicates a rundown of pre-defined alternatives for an <input> element .

Users will see a drop-down rundown of the pre-defined choices as they input data.

The list attribute of the <input> element, should refer to the id attribute of the <datalist> element.

Example

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

The datalist Element

The datalist element specifies a list of pre-defined options for an input element.

Note: The datalist tag is not supported in Safari prior version 12.1.

The <output> Element

The <output> element addresses the result of a calculation (like one performed by a scripts).

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

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

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<output>	Defines the result of a calculation

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.