HTML Form Elements

Lesson 28 of 58

HTML forms are built using different types of elements. Each element serves a specific purpose, from text inputs to drop-down lists to buttons. This chapter covers all the form elements you will need.

Common Form Elements

Here are the most important form elements you will use:

<input> – Text fields, checkboxes, radio buttons, and more
<label> – Labels for form fields (important for accessibility)
<select> – Drop-down lists
<textarea> – Multi-line text areas
<button> – Clickable buttons
<fieldset> and <legend> – Group related fields
<datalist> – Auto-complete suggestions
<output> – Display calculation results

The input Element

The <input> element is the most versatile form element. It can display as many different controls depending on the type attribute.

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Different Input Types</h3>

<div style="margin-bottom: 15px;">
      <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="inputName">Text input:</label>
      <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="text" id="inputName" name="name" placeholder="Your name">
    </div>

<div style="margin-bottom: 15px;">
      <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="inputEmail">Email input:</label>
      <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="email" id="inputEmail" name="email" placeholder="you@example.com">
    </div>

<div style="margin-bottom: 15px;">
      <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="inputPassword">Password input:</label>
      <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="password" id="inputPassword" name="password" placeholder="Enter password">
    </div>

<div style="margin-bottom: 15px;">
      <label style="display: block; font-weight: bold; margin-bottom: 5px;" for="inputNumber">Number input:</label>
      <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="number" id="inputNumber" name="age" placeholder="Age">
    </div>

</form>
</div>

</body>
</html>

The label Element

The <label> element adds a text label to a form field. It is important for accessibility because screen readers read the label aloud. It also makes the form easier to use because clicking the label focuses the input.

The select Element (Drop-Down List)

The <select> element creates a drop-down list. Each option is defined with the <option> tag.

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Choose Your Country</h3>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="selectCountry">Select your country:</label>
    <select style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;" id="selectCountry" name="country">
      <option value="usa">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="canada">Canada</option>
      <option value="australia">Australia</option>
      <option value="germany">Germany</option>
    </select>
    <input style="background-color: #04aa6d; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;" type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Pre-selected Option

Use the selected attribute to pre-select an option:

<option value="canada" selected>Canada</option>

Visible Options (size attribute)

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Show Multiple Options</h3>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="sizeCars">Choose a car (3 visible options):</label>
    <select style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;" id="sizeCars" name="cars" size="3">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
    </select>
    <input style="background-color: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;" type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Allow Multiple Selections

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Select Multiple Options</h3>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="multiInterests">Select your interests (hold Ctrl/Cmd to select multiple):</label>
    <select style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;" id="multiInterests" name="interests" size="4" multiple>
      <option value="tech">Technology</option>
      <option value="sports">Sports</option>
      <option value="music">Music</option>
      <option value="travel">Travel</option>
      <option value="food">Food</option>
    </select>
    <input style="background-color: #2196f3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;" type="submit" value="Submit">
  </form>
</div>

</body>
</html>

The textarea Element (Multi-Line Text)

The button Element

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Different Button Types</h3>

<form action="/action_page.php" method="post">
    <button style="background-color: #4caf50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;" type="submit">Submit Form</button>
    <button style="background-color: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;" type="reset">Reset Form</button>
    <button style="background-color: #2196f3; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 5px;" type="button" onclick="alert('Hello!')">Click Me</button>
  </form>

<p style="margin-top: 15px; font-size: 14px; color: #666;">The “Reset” button clears all fields. The “Click Me” button shows an alert.</p>
</div>

</body>
</html>

The fieldset and legend Elements (Grouping Fields)

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Registration Form with Grouped Fields</h3>

<fieldset style="border: 1px solid #04aa6d; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
      <legend style="font-weight: bold; color: #04aa6d; padding: 0 10px;">Personal Information</legend>

<label style="display: block; font-weight: bold; margin-top: 10px; margin-bottom: 5px;" for="fieldsetFname">First name:</label>
      <input style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="text" id="fieldsetFname" name="fname" placeholder="John">

<label style="display: block; font-weight: bold; margin-top: 10px; margin-bottom: 5px;" for="fieldsetEmail">Email:</label>
      <input style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="email" id="fieldsetEmail" name="email" placeholder="john@example.com">
    </fieldset>

<label style="display: block; font-weight: bold; margin-top: 10px; margin-bottom: 5px;" for="fieldsetUsername">Username:</label>
      <input style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="text" id="fieldsetUsername" name="username" placeholder="johndoe">

<label style="display: block; font-weight: bold; margin-top: 10px; margin-bottom: 5px;" for="fieldsetPassword">Password:</label>
      <input style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" type="password" id="fieldsetPassword" name="password" placeholder="Create a password">
    </fieldset>

</form>
</div>

</body>
</html>

The datalist Element (Auto-Complete Suggestions)

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Choose Your Favorite Browser</h3>

<form action="/action_page.php" method="post">
    <label style="display: block; font-weight: bold; margin-bottom: 8px;" for="datalistBrowser">Start typing a browser name:</label>
    <input style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;" list="browsersList" id="datalistBrowser" name="browser" placeholder="Type here...">
    <datalist id="browsersList">
      <option value="Google Chrome">
      <option value="Mozilla Firefox">
      <option value="Safari">
      <option value="Microsoft Edge">
      <option value="Opera">
      <option value="Brave">
    </datalist>
    <input style="background-color: #9c27b0; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;" type="submit" value="Submit">
  </form>

<p style="margin-top: 10px; font-size: 14px; color: #666;">As you type, suggestions appear. You can either select one or type your own.</p>
</div>

</body>
</html>

The output Element (Display Calculation Results)

<!DOCTYPE html>
<html>
<body>

<h3 style="margin-top: 0;">Simple Calculator</h3>

<form oninput="outputResult.value=parseInt(outputA.value)+parseInt(outputB.value)">
    <label style="display: inline-block; width: 120px; font-weight: bold;" for="outputA">First number:</label>
    <input style="width: calc(100% - 130px); margin: 10px 0;" type="range" id="outputA" name="a" value="50"><br>

<label style="display: inline-block; width: 120px; font-weight: bold;" for="outputB">Second number:</label>
    <input style="width: 80px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 0;" type="number" id="outputB" name="b" value="50"><br>

<label style="display: inline-block; width: 120px; font-weight: bold;">Result:</label>
    <output style="background-color: #04aa6d; color: white; padding: 8px 15px; border-radius: 5px; display: inline-block; font-weight: bold; font-size: 18px;" name="outputResult">100</output>
  </form>

<p style="margin-top: 15px; font-size: 14px; color: #666;">Move the slider or change the number. The result updates automatically.</p>
</div>

</body>
</html>

Quick Summary

<input> – Most versatile form element (text, email, password, number, etc.)
<label> – Adds labels and improves accessibility (click label focuses input)
<select> – Creates drop-down lists with <option> tags
<textarea> – Multi-line text input (use for comments, messages)
<button> – Clickable button (can contain HTML content)
<fieldset> and <legend> – Group related form fields
<datalist> – Provides auto-complete suggestions
<output> – Displays calculation results

HTML Form Elements Reference

Tag	Description
`<input>`	Defines an input control (text, email, password, etc.)
`<label>`	Defines a label for an input element
`<select>`	Defines a drop-down list
`<option>`	Defines an option in a drop-down list
`<textarea>`	Defines a multi-line text input
`<button>`	Defines a clickable button
`<fieldset>`	Groups related elements in a form
`<legend>`	Defines a caption for a fieldset
`<datalist>`	Specifies a list of pre-defined options
`<output>`	Represents the result of a calculation

❮ Previous Next ❯

Lesson 28 of 58