Section 3 · Chapter 11
HTML Form Elements & Input Types
HTML provides a rich ecosystem of specialized form controls, including all 22 <input> types, <label>, <select>, <optgroup>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, and <output>. Master input validation attributes and native HTML5 constraint validation.
Live Code Example: Form Controls Overview
Click Try it Yourself » to test interactive HTML5 form controls, color pickers, range sliders, and autocomplete datalists live in the playground.
Example: Form Controls, Datalist & Validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Form Controls</title>
</head>
<body style="font-family: sans-serif; padding: 20px; background: #f8fafc;">
<form style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #cbd5e1; max-width: 450px;">
<fieldset style="border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
<legend style="font-weight: 700; color: #4f46e5; padding: 0 8px;">User Preferences</legend>
<!-- Label & Input -->
<label for="fav-color" style="display: block; font-weight: 700; margin-bottom: 4px;">Accent Color:</label>
<input type="color" id="fav-color" name="color" value="#4f46e5" style="width: 60px; height: 36px; border: none; cursor: pointer; margin-bottom: 14px;">
<!-- Range & Output -->
<label for="volume" style="display: block; font-weight: 700; margin-bottom: 4px;">Volume Level:</label>
<input type="range" id="volume" name="vol" min="0" max="100" value="75" oninput="volOut.value = volume.value" style="width: 75%;">
<output id="volOut" style="font-weight: 700; color: #4f46e5; margin-left: 8px;">75</output>%
<!-- Datalist Autocomplete -->
<label for="framework" style="display: block; font-weight: 700; margin-top: 14px; margin-bottom: 4px;">Tech Framework:</label>
<input list="tech-list" id="framework" name="tech" placeholder="Select or type..." style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1; box-sizing: border-box;">
<datalist id="tech-list">
<option value="React">
<option value="Vue.js">
<option value="Angular">
<option value="Svelte">
</datalist>
</fieldset>
<button type="submit" style="background: #4f46e5; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 700; cursor: pointer;">Save Preferences »</button>
</form>
</body>
</html>
Try it Yourself »
11.1 Core HTML Form Elements
Beyond standard <input> tags, HTML provides dedicated elements for specific UI interaction models:
| Element Tag | Key Attributes | Functional Description & Usage |
|---|---|---|
<label> |
for="..." |
Provides accessible caption text for inputs. Linking for="id" expands the touch/click target area. |
<select> & <option> |
multiple, size, selected |
Dropdown menu control. Nested <optgroup label="..."> groups related options logically. |
<textarea> |
rows, cols, wrap, maxlength |
Multi-line plain text editing box. Unlike <input>, content is placed inside opening/closing tags. |
<fieldset> & <legend> |
disabled, form |
Renders a visual group frame around related input controls; <legend> specifies the header caption. |
<datalist> |
id="..." |
Contains pre-defined <option> suggestions for an <input list="id"> without restricting manual user entry. |
<output> |
for="...", name="..." |
Represents the output result of a calculation or JavaScript script evaluation. |
Try It Yourself: Select Dropdowns & Optgroup
<!-- Section 11.1: Select & Optgroup -->
<label for="car-select" style="font-weight:bold; display:block; margin-bottom:6px;">Choose Vehicle Model:</label>
<select id="car-select" name="car" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
<optgroup label="Electric Vehicles">
<option value="tesla">Tesla Model 3</option>
<option value="rivian">Rivian R1T</option>
</optgroup>
<optgroup label="Gasoline Vehicles">
<option value="ford">Ford Mustang</option>
<option value="bmw">BMW M3</option>
</optgroup>
</select>
Try it Yourself »
11.2 The 22 HTML5 Input Types Matrix
The HTML5 specification defines exactly 22 input types. Selecting the appropriate input type triggers native browser behaviors (such as opening numeric keypads on iOS/Android for type="tel" or type="number").
All 22 HTML5 Input Types Functional Matrix
Try It Yourself 1: type="text"
<!-- 1. Single-line text input -->
<label for="uname" style="font-weight:bold; display:block; margin-bottom:4px;">Username:</label>
<input type="text" id="uname" name="username" placeholder="John Doe" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 2: type="password"
<!-- 2. Masked password input -->
<label for="pwd" style="font-weight:bold; display:block; margin-bottom:4px;">Password:</label>
<input type="password" id="pwd" name="password" placeholder="Enter password" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 3: type="email"
<!-- 3. Email input with format validation -->
<label for="uemail" style="font-weight:bold; display:block; margin-bottom:4px;">Email Address:</label>
<input type="email" id="uemail" name="email" placeholder="user@example.com" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 4: type="number"
<!-- 4. Numeric input with min/max bounds -->
<label for="uage" style="font-weight:bold; display:block; margin-bottom:4px;">Age (1-100):</label>
<input type="number" id="uage" name="age" min="1" max="100" value="25" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:50%;">
Try it Yourself »
Try It Yourself 5: type="tel"
<!-- 5. Telephone number input -->
<label for="uphone" style="font-weight:bold; display:block; margin-bottom:4px;">Phone Number:</label>
<input type="tel" id="uphone" name="phone" placeholder="+1-555-0199" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 6: type="url"
<!-- 6. Web URL input -->
<label for="uweb" style="font-weight:bold; display:block; margin-bottom:4px;">Website URL:</label>
<input type="url" id="uweb" name="website" placeholder="https://example.com" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 7: type="search"
<!-- 7. Search input field -->
<label for="usearch" style="font-weight:bold; display:block; margin-bottom:4px;">Search Query:</label>
<input type="search" id="usearch" name="query" placeholder="Type to search..." style="padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:80%;">
Try it Yourself »
Try It Yourself 8: type="date"
<!-- 8. Calendar date picker -->
<label for="ubday" style="font-weight:bold; display:block; margin-bottom:4px;">Birth Date:</label>
<input type="date" id="ubday" name="bday" value="2026-07-30" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
Try it Yourself »
Try It Yourself 9: type="time"
<!-- 9. Clock time picker -->
<label for="utime" style="font-weight:bold; display:block; margin-bottom:4px;">Appointment Time:</label>
<input type="time" id="utime" name="appt" value="14:30" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
Try it Yourself »
Try It Yourself 10: type="datetime-local"
<!-- 10. Date & time picker -->
<label for="umeet" style="font-weight:bold; display:block; margin-bottom:4px;">Meeting Date & Time:</label>
<input type="datetime-local" id="umeet" name="meeting" value="2026-07-30T14:30" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
Try it Yourself »
Try It Yourself 11: type="month"
<!-- 11. Month & year picker -->
<label for="uexp" style="font-weight:bold; display:block; margin-bottom:4px;">Card Expiry Month:</label>
<input type="month" id="uexp" name="exp_month" value="2026-12" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
Try it Yourself »
Try It Yourself 12: type="week"
<!-- 12. Week number picker -->
<label for="uweek" style="font-weight:bold; display:block; margin-bottom:4px;">Project Week:</label>
<input type="week" id="uweek" name="proj_week" value="2026-W31" style="padding:8px; border-radius:6px; border:1px solid #cbd5e1;">
Try it Yourself »
Try It Yourself 13: type="color"
<!-- 13. System color picker -->
<label for="ucolor" style="font-weight:bold; display:block; margin-bottom:4px;">Theme Accent Color:</label>
<input type="color" id="ucolor" name="fav_color" value="#10b981" style="width:60px; height:36px; border:none; cursor:pointer;">
Try it Yourself »
Try It Yourself 14: type="range"
<!-- 14. Visual slider control -->
<label for="uslider" style="font-weight:bold; display:block; margin-bottom:4px;">Volume Level (0-100):</label>
<input type="range" id="uslider" name="volume" min="0" max="100" value="75" style="width:80%;">
Try it Yourself »
Try It Yourself 15: type="file"
<!-- 15. File selector input -->
<label for="ufile" style="font-weight:bold; display:block; margin-bottom:4px;">Upload Document (PDF/Image):</label>
<input type="file" id="ufile" name="attachment" accept="image/*,.pdf" style="width:100%;">
Try it Yourself »
Try It Yourself 16: type="image"
<!-- 16. Graphical submit button -->
<label style="font-weight:bold; display:block; margin-bottom:6px;">Graphical Submit Button:</label>
<input type="image" src="https://via.placeholder.com/120x36/4f46e5/ffffff?text=Submit" alt="Submit Image" style="cursor:pointer;">
Try it Yourself »
Try It Yourself 17: type="checkbox"
<!-- 17. Multi-select checkbox -->
<label style="font-weight:bold; cursor:pointer;">
<input type="checkbox" name="terms" checked> Accept Terms & Conditions
</label>
Try it Yourself »
Try It Yourself 18: type="radio"
<!-- 18. Radio selection group -->
<label style="font-weight:bold; cursor:pointer;"><input type="radio" name="plan" value="free" checked> Free Plan</label>
<label style="font-weight:bold; cursor:pointer; margin-left:12px;"><input type="radio" name="plan" value="pro"> Pro Plan</label>
Try it Yourself »
Try It Yourself 19: type="submit"
<!-- 19. Native submit button -->
<form action="javascript:alert('Form Submitted!')">
<input type="submit" value="Submit Form Data" style="background:#4f46e5; color:white; border:none; padding:8px 16px; border-radius:6px; font-weight:bold; cursor:pointer;">
</form>
Try it Yourself »
Try It Yourself 20: type="reset"
<!-- 20. Native reset button -->
<form style="display:flex; gap:8px; align-items:center;">
<input type="text" value="Default Text" style="padding:6px; border-radius:4px; border:1px solid #cbd5e1;">
<input type="reset" value="Reset Fields" style="background:#64748b; color:white; border:none; padding:8px 14px; border-radius:4px; font-weight:bold; cursor:pointer;">
</form>
Try it Yourself »
Try It Yourself 21: type="button"
<!-- 21. Generic button control -->
<input type="button" value="Click Me!" onclick="alert('Generic Button Clicked!')" style="background:#10b981; color:white; border:none; padding:8px 16px; border-radius:6px; font-weight:bold; cursor:pointer;">
Try it Yourself »
Try It Yourself 22: type="hidden"
<!-- 22. Hidden background input -->
<input type="hidden" name="user_id" value="USR-99201">
<p style="color:#64748b; font-size:12px;">(Hidden Input USR-99201 is passed silently in payload without rendering visible UI)</p>
Try it Yourself »
11.3 Input Validation Attributes
HTML5 attributes allow declaratively defining constraint validation rules directly on input controls without writing complex JavaScript:
| Validation Attribute | Supported Inputs | Functional Constraint Description |
|---|---|---|
required |
All input controls | Specifies that an input field must be filled out before submitting the form. |
pattern="..." |
text, tel, email, url, password |
Enforces a JavaScript Regular Expression (Regex) constraint (e.g. pattern="[A-Z]{3}-[0-9]{4}"). |
min / max / step |
number, range, date, time |
Specifies minimum, maximum numeric/date boundaries, and legal step intervals (e.g. step="0.01" for currency). |
minlength / maxlength |
Textual inputs & <textarea> |
Constrains the minimum and maximum character count allowed in the field. |
readonly vs disabled |
All input controls | readonly prevents editing but includes data in submission; disabled grays out the field and omits data from submission. |
Try It Yourself: Regex Pattern & Range Constraints
<!-- Section 11.3: Regex Pattern & Numeric Constraints -->
<form action="javascript:alert('Validation Passed!')" style="background:#f8fafc; padding:16px; border-radius:8px;">
<label for="sku" style="font-weight:bold; display:block; margin-bottom:4px;">Product SKU (Pattern: ABC-1234):</label>
<input type="text" id="sku" name="sku" required pattern="[A-Z]{3}-[0-9]{4}" placeholder="ABC-1234" style="padding:8px; border-radius:4px; border:1px solid #cbd5e1; width:80%;">
<label for="qty" style="font-weight:bold; display:block; margin-top:12px; margin-bottom:4px;">Quantity (Min 1, Max 10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" value="1" style="padding:8px; border-radius:4px; border:1px solid #cbd5e1; width:40%;">
<button type="submit" style="background:#4f46e5; color:white; border:none; padding:8px 16px; border-radius:4px; font-weight:bold; margin-top:12px; display:block;">Validate »</button>
</form>
Try it Yourself »
11.4 Native HTML5 Validation & ValidityState API
Browsers continuously evaluate form controls against defined constraints using the internal ValidityState engine. CSS pseudo-classes (:valid, :invalid, :required) automatically update UI styles dynamically.
HTML5 Validation State Machine Architecture
Try It Yourself: CSS Pseudo-class Validation Styling (:valid & :invalid)
<!-- Section 11.4: :valid & :invalid CSS -->
<style>
.val-input:valid { border: 2px solid #10b981; background: #f0fdf4; }
.val-input:invalid { border: 2px solid #ef4444; background: #fef2f2; }
</style>
<form style="background:#f8fafc; padding:16px; border-radius:8px;">
<label style="font-weight:bold; display:block; margin-bottom:4px;">Required Email (Type valid email):</label>
<input type="email" class="val-input" required placeholder="user@example.com" style="padding:8px; border-radius:6px; width:80%;">
</form>
Try it Yourself »
11.5 Interactive Form Builder & Validation Playground
Use the interactive playground below to test live HTML5 constraint validation, regular expression patterns, range calculations, and real-time validity state inspections:
Interactive Form Builder & Live Validation Tester
Live Input Controls
Real-Time ValidityState Inspector
Type into the input controls to inspect ValidityState engine results...
Try It Yourself: Interactive Form Builder Code
<!-- Section 11.5: Complete Form Builder -->
<form action="javascript:alert('Form Passed Validation!')" style="background:#f8fafc; padding:20px; border-radius:12px; border:1px solid #cbd5e1;">
<label style="font-weight:bold; display:block; margin-bottom:4px;">User Email:</label>
<input type="email" required style="width:100%; padding:8px; margin-bottom:12px; border-radius:6px; border:1px solid #cbd5e1;">
<label style="font-weight:bold; display:block; margin-bottom:4px;">Security Code (4 digits):</label>
<input type="text" pattern="[0-9]{4}" required placeholder="1234" style="width:100%; padding:8px; margin-bottom:16px; border-radius:6px; border:1px solid #cbd5e1;">
<button type="submit" style="background:#10b981; color:white; border:none; padding:10px 20px; border-radius:6px; font-weight:bold; cursor:pointer;">Submit Valid Form »</button>
</form>
Try it Yourself »
💻 Chapter 11 Hands-On Code Challenge
Build a Complete User Preferences & Settings Form featuring a color picker, date picker, range slider with output display, select dropdown with optgroup, and datalist autocomplete:
Chapter 11 Key Takeaways
- 22 Input Types: HTML5 provides 22 input types triggering specialized mobile keypads and browser native pickers.
- Datalist Autocomplete:
<datalist>linked vialist="id"offers native drop-down auto-suggestions while permitting free text entry. - Fieldset & Legend: Group related controls visually with
<fieldset>and specify the section header with<legend>. - Validation Attributes: Use
required,pattern="...",min/max, andstepfor declarative client-side validation. - ValidityState Engine: CSS pseudo-classes
:validand:invalidautomatically style input states dynamically.