Forms
Course 2 · Ch 1
Forms in Depth
The full range of input types, built-in validation attributes, and fieldset/legend for grouping related fields
Fundamentals Course Chapter 7 covered the basic shape of a form. This chapter covers what makes modern HTML forms genuinely powerful: a wide range of specialised input types, validation that works without any JavaScript at all, and proper grouping for related fields.
The Full Range of Input Types
date
A native date picker
time
A native time picker
datetime-local
Combined date and time picker
tel
Phone number — triggers the numeric keypad on mobile
url
Web address, with basic URL-format validation
search
Like text, but often styled with a clear/cancel button by the browser
color
A native colour picker, returns a hex value
range
A slider, between a min and max value
file
Upload a file — full coverage in Course 3's File API chapter
hidden
Not rendered at all, but still submitted with the form
textarea
Multi-line text — a separate tag, not an input type
select
A dropdown — also a separate tag, with nested option elements
<input type="date" name="appointment">
<input type="range" name="volume" min="0" max="100">
<textarea name="message" rows="4"></textarea>
<select name="country">
<option value="uk">United Kingdom</option>
<option value="hu">Hungary</option>
</select>
Built-In Validation — No JavaScript Required
The browser itself can enforce a meaningful set of validation rules, blocking form submission and showing a native error message until they're satisfied — all without a single line of JavaScript.
| Attribute | What it enforces |
|---|---|
| required | The field must have a value before the form can submit |
| minlength / maxlength | Text length boundaries |
| min / max | Numeric or date value boundaries |
| pattern | A regular expression the value must match — full regex syntax, same engine as the Regex course covered elsewhere |
| step | Increment granularity for number/range inputs |
<input type="text" name="username" required minlength="3" maxlength="20">
// pattern with a regex — UK-style postcode, simplified
<input type="text" name="postcode" pattern="[A-Z]{1,2}[0-9][A-Z0-9]? ?[0-9][A-Z]{2}">
Built-in validation is a UX convenience, not a security boundary
Native HTML validation runs entirely in the browser and can be bypassed trivially — disabled JavaScript-free, a direct API request, or simply editing the HTML in DevTools all skip it completely. Server-side validation of every submitted value is always required regardless of what client-side validation exists — this is the same underlying principle as the browser security course's trust boundary discussions.
fieldset and legend — Grouping Related Fields
For a form with logically related groups of fields (a shipping address section, a set of radio button options), <fieldset> provides both a visual grouping (a default border) and a genuine semantic one, with <legend> as its caption.
<fieldset>
<legend>Shipping Address</legend>
<label for="street">Street</label>
<input type="text" id="street" name="street">
<label for="city">City</label>
<input type="text" id="city" name="city">
</fieldset>
fieldset is especially valuable for a group of radio buttons
A screen reader announces the legend text alongside each radio button in the group, giving full context ("Shipping speed: Standard," "Shipping speed: Express") rather than just the bare option label alone — genuinely improves the experience for assistive technology users navigating between related options.
Disabling Part of a Form — fieldset disabled
<fieldset disabled>
// Every input inside is disabled in one step, without setting it on each individually
</fieldset>
Chapter 1 Quick Reference
- Specialised input types: date, time, tel, url, color, range, file, hidden — each with a tailored native UI
- textarea/select — separate tags, not input types, for multi-line text and dropdowns
- required/minlength/maxlength/min/max/pattern/step — built-in validation, no JavaScript needed
- Client-side validation is convenience, not security — always re-validate every value server-side too
- fieldset/legend — semantic grouping with a real accessibility benefit, especially for radio button groups
- fieldset disabled — disables every contained input in one step
- Next chapter: tables in depth — colspan/rowspan, complex layouts, full accessibility (scope, caption)