HTML Form Elements

Discover diverse components available for constructing comprehensive input collection systems

HTML supplies varied form components capturing distinct visitor input categories. Individual elements fulfill specialized roles delivering unique capabilities for building interactive data acquisition interfaces.

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 the most important and versatile form element. It can be displayed in many ways, depending on the type attribute.

Example

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

The <input> element has many types. We'll cover them in detail in the next chapter (HTML Input Types).

The <label> Element

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

The <label> element is useful for:

  • Screen readers: Will read out loud the label when the user focuses on the input
  • Click target: Users can click the label to focus/toggle the input (helpful for checkboxes and radio buttons)
  • Accessibility: Improves form usability for all users

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

Example

<label for="cars">Choose a car:</label>
<input type="text" id="cars" name="cars">

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="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Result:

The <option> Element

The <option> elements define an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example - Pre-selected Option

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

Allow Multiple Selections

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

Example

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

Result:

Hold down Ctrl (Windows) or Command (Mac) to select multiple options

Visible Values

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

Example

<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <textarea> Element

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

Example

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
Enter your message here...
</textarea>

Result:

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

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

Example - Using CSS

<textarea id="message" name="message" style="width:100%; height:150px;">
Enter your message here...
</textarea>

The <button> Element

The <button> element defines a clickable button:

Example

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

Result:

Note: Always specify the type attribute for a button element. Different browsers use different default types for the button element.

Button Types

Type Description
button A clickable button (usually with JavaScript)
submit Submits the form data
reset Resets all form values to their default values

Example - Different Button Types

<form>
  <button type="submit">Submit Form</button>
  <button type="reset">Reset Form</button>
  <button type="button">Do Nothing</button>
</form>

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>
  <fieldset>
    <legend>Personal Information:</legend>

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

    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname"><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>

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

Result:

Personal Information:

The <datalist> Element

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

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

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

Example

<form>
  <label for="browser">Choose your browser:</label>
  <input list="browsers" id="browser" name="browser">

  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
  </datalist>

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

Result:

💡 Tip

The datalist element provides autocomplete functionality. Users can still type their own values, but they'll also see suggestions from the datalist.

The <output> Element

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

Example

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <label for="a">Number 1:</label>
  <input type="range" id="a" name="a" value="50">

  <label for="b">Number 2:</label>
  <input type="number" id="b" name="b" value="50">

  <br><br>
  Total: <output name="result" for="a b">100</output>
</form>

Result:

Total: 100

The <optgroup> Element

The <optgroup> element is used to group related options in a <select> element (drop-down list).

Example

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Result:

Complete Form Example with Multiple Elements

Example - Registration Form

<form action="/register.php" method="post">
  <fieldset>
    <legend>User Registration</legend>

    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username" required><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="country">Country:</label><br>
    <select id="country" name="country">
      <option value="usa">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="canada">Canada</option>
    </select><br><br>

    <label for="bio">Bio:</label><br>
    <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>

    <button type="submit">Register</button>
    <button type="reset">Clear Form</button>
  </fieldset>
</form>

HTML Form Elements Summary

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

Test Your Knowledge