forms
<label>
Associates a caption with a form control so clicking the label focuses the input and screen readers announce it. Use one for every input, select, and textarea.
<label for="email">Email</label><input id="email" type="email">Common attributes
| Attribute | Purpose |
|---|---|
| for | id of the control this label describes |
| form | id of the form the label belongs to |
| class | Styling hook |
| id | Unique identifier |
Examples
<label for="email">Email</label><input id="email" type="email">Explicit association via for/id
<label>Email <input type="email" name="email"></label>Implicit association by wrapping
<label for="agree"><input type="checkbox" id="agree"> I agree</label>Checkbox with clickable label text
Gotcha
The for attribute must match the input's id, not its name. A single
Related tags
<input>
The single most versatile form control — its behavior is driven by the type attribute (text, email, password, number, checkbox, radio, file, date, range, color, hidden, and more). Use it for every scalar user input; use <textarea> only for multi-line text.
<form>
Container for a set of input controls that are submitted together to a server. Use it any time users need to send data — search, sign-up, checkout, comments.
<textarea>
Multi-line plain-text input control. Use it for comments, messages, code snippets, or any free-form text that may span more than one line.
<button>
Interactive control that triggers an action — submitting a form, opening a dialog, or running JavaScript. Use it for anything that does something; use <a href> for anything that navigates.
<select>
Drop-down (or list-box) that lets the user pick one or more predefined options. Use it when the option set is short and known; for many options, an autocomplete input is friendlier.