forms
<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.
<input type="text" name="q" required>Common attributes
| Attribute | Purpose |
|---|---|
| type | Control kind: text, email, password, number, checkbox, radio, file, date, range, color, hidden... |
| name | Key sent to the server on submit |
| value | Default or current value |
| placeholder | Hint shown when empty (not a label) |
| required | Field must be filled to submit |
| pattern | Regex the value must match |
| min / max / step | Bounds for numeric and date types |
| autocomplete | Browser autofill hint (email, current-password, etc.) |
Examples
<input type="email" name="email" required autocomplete="email">Email with validation and autofill
<input type="checkbox" name="agree" id="agree"> <label for="agree">I agree</label>Checkbox with a linked label
<input type="file" name="avatar" accept="image/*">File picker restricted to images
<input type="range" name="volume" min="0" max="100" step="1" value="50">Slider control
Gotcha
placeholder is not a label — always pair inputs with a real
Related tags
<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.
<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.
<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.