6.0 HTML Forms
Forms are the primary mechanism for collecting user input in HTML. A <form>
groups controls (inputs, selects, text areas, buttons) and describes how to submit the
collected data. HTML5 added many input types and built-in constraint validation, reducing
the need for JavaScript validation of common cases.
6.1 The form Element
The <form> element defines the submission target and method:
<form action="/submit" method="post" enctype="multipart/form-data">
<!-- controls here -->
<button type="submit">Send</button>
</form>
form attributes
| Attribute | Effect |
|---|
action | URL where form data is sent. Defaults to the current page. |
method | get appends data to the URL; post sends data in the request body. |
enctype | Encoding for POST. Use multipart/form-data when uploading files. |
novalidate | Disables browser built-in constraint validation on submission. |
autocomplete | on (default) or off for the entire form. |
6.2 Input Types
The <input> element takes many forms depending on its type
attribute:
<input type="text" name="username" placeholder="Your name">
<input type="email" name="email" required>
<input type="password" name="pwd" minlength="8">
<input type="number" name="age" min="0" max="120">
<input type="date" name="dob">
<input type="checkbox" name="agree" value="yes">
<input type="radio" name="color" value="red">
<input type="file" name="upload" accept=".pdf,.docx">
<input type="range" name="volume" min="0" max="100" step="5">
<input type="hidden" name="token" value="abc123">
<input type="submit" value="Send">
<input type="reset" value="Clear">
Input type reference
| Type | Control / Notes |
|---|
| text | Single-line plain text. |
| email | Text validated as an email address. Shows email keyboard on mobile. |
| password | Text with characters masked. |
| number | Numeric input with optional min/max/step. |
| range | Slider for numeric range. |
| date / time / datetime-local | Date/time pickers (appearance varies by browser). |
| checkbox | Boolean toggle. Multiple checkboxes can share a name. |
| radio | Single choice from a group sharing the same name. |
| select + option | Dropdown list (separate element — see below). |
| file | File picker. Use accept to filter types; multiple for multiple files. |
| hidden | Not displayed. Passes data with the form silently. |
| search | Like text but may show a clear button; matches ::-webkit-search-cancel-button. |
| url | Text validated as an absolute URL. |
| tel | Telephone number. Shows dial-pad keyboard on mobile; no format validation. |
| color | Color picker. Value is a hex string like #ff0000. |
| submit / reset / button | Buttons that submit the form, clear it, or do nothing by default. |
6.3 Labels and Grouping
Every form control must have a visible label associated with it. The <label>
element associates a text label with a control either by wrapping it or by matching
for to the control's id:
<!-- Wrapping (implicit association) -->
<label>
Username
<input type="text" name="username">
</label>
<!-- for/id (explicit association) -->
<label for="email-field">Email address</label>
<input id="email-field" type="email" name="email">
Use <fieldset> with a <legend> to group related
controls — commonly used for radio buttons or checkboxes:
<fieldset>
<legend>Preferred contact method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>
6.4 Textarea and Select
<textarea> provides a resizable multi-line text field; <select>
creates a dropdown list:
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" cols="40"
maxlength="500" placeholder="Tell us about yourself..."></textarea>
<label for="lang">Preferred language</label>
<select id="lang" name="lang">
<option value="">-- choose --</option>
<optgroup label="Systems">
<option value="rust">Rust</option>
<option value="cpp">C++</option>
</optgroup>
<optgroup label="Web">
<option value="js">JavaScript</option>
</optgroup>
</select>
6.5 Constraint Validation
HTML5 built-in validation checks constraints set as attributes before the form is
submitted. The browser blocks submission and highlights the first failing control:
- required — field must not be empty.
- minlength / maxlength — minimum / maximum character count for text inputs.
- min / max — numeric or date bounds.
- pattern — regular expression the value must match (anchored to the full value).
- type="email", type="url" — format validation built into the type.
<input type="text" name="zip"
pattern="[0-9]{5}"
title="Five-digit ZIP code"
required>
CSS pseudo-classes :valid, :invalid, and :user-invalid
let you style controls based on their validation state without JavaScript.
6.6 References
Forms References