Lesson 4.2 — Native Form Controls

Introduction

HTML5 provides a rich set of native form controls that enable user interaction without any scripting. These elements handle data collection, validation hints, and accessibility features built into the browser.

The WHATWG specification defines form-associated elements that participate in form submission and constraint validation.

Input Types Overview

HTML5 introduced many specialized input types beyond plain text:

Form-Associated Elements

Beyond input, HTML5 includes several other form controls:

• textarea — multi-line text input
• select with option and optgroup — dropdown menus
• button — actionable buttons with type attribute
• output — calculated result display
• fieldset and legend — logical grouping
• datalist — predefined option suggestions

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
  <button type="submit">Submit</button>
</form>

Label Association

Every form control should have an associated label for accessibility:

• Explicit: <label for="id"> linked to id attribute
• Implicit: Control nested inside <label> element

Labels must be associated with their form controls either explicitly or implicitly to ensure screen reader compatibility.

Validation Attributes

HTML5 supports constraint validation through attributes:

required

Field must have a value before submission

pattern

Value must match a regular expression

min / max

Numeric or date range boundaries

minlength / maxlength

String length constraints

step

Increment for numeric inputs

Practice Exercise

Complete the form below using the concepts from this lesson:

Multilingual Text: Ruby Annotations

HTML5 supports ruby annotations for East Asian typography:

学がく 習しゅう 管かん 理り (がくしゅうかんり) — "Learning Management" in Japanese

Key Takeaways