The HTML <input> element is the fundamental component for capturing user data within web forms.
Input Types
Textual & Semantic Types
| Type | Description |
|---|---|
text |
Single-line plain text |
password |
Obscured single-line text entry |
email |
Email address with client validation |
url |
Absolute URL entry |
tel |
Telephone number entry (invokes phone keypad on mobile) |
search |
Search string input with clear button |
Numeric & Quantitative
| Type | Description |
|---|---|
number |
Numeric stepper control (min, max, step) |
range |
Slider control for selecting an approximate value |
Date & Temporal Types
| Type | Description |
|---|---|
date |
Calendar date picker (year, month, day) |
time |
Clock time picker (hours, minutes) |
datetime-local |
Date and time without timezone |
month |
Year and month selector |
week |
Year and ISO week number selector |
Selection & Actions
| Type | Description |
|---|---|
checkbox |
Boolean toggle or multi-select option |
radio |
Mutually exclusive option in a named radio group |
color |
Color picker palette |
file |
File attachment upload input (accept, multiple) |
hidden |
Value sent with form but hidden from visual layout |
submit |
Form submission trigger button |
reset |
Reset form values back to initial defaults |
button |
Generic actionable button without default form action |
Common Validation Attributes
| Attribute | Applies To | Description |
|---|---|---|
required |
Most inputs | Form cannot be submitted while field is empty |
pattern="[A-Z]{3}" |
text, tel, search |
Regular expression for validation |
min / max |
Numeric & temporal | Minimum and maximum values allowed |
step |
number, range, dates |
Granular value increment |
minlength / maxlength |
Textual | String character length bounds |
placeholder |
Textual | Temporary hint text |
autocomplete |
Textual | Browser autofill directive (email, current-password) |