This is a practical reference for choose the right kind of input control for the data you ask people to enter. Keep it nearby when you are writing a page, but do not worry about memorizing every entry at once.
What this reference covers
Choose the right kind of input control for the data you ask people to enter. The entries below summarize the most useful choices and what each one means.
| Value or item | What it means |
|---|---|
text | Ordinary single-line text |
email | Email syntax checking |
password | Conceals typed characters |
number | Numeric spinner and constraints |
tel | Telephone-friendly keyboard |
url | URL syntax checking |
search | Search query box |
date | Calendar date |
time | Local time |
datetime-local | Local date and time without zone |
month | Month and year |
week | ISO week |
range | Slider |
checkbox | Independent choice |
radio | One of a shared name group |
color | Color picker |
file | File selection |
hidden | Non-visible submitted value |
submit | Submit form |
reset | Restore original values |
button | Script-controlled button |
image | Image submit control |
See it in HTML
A small example shows how one of these ideas appears in a normal page:
<form action="/profile" method="get">
<label for="contact-email">Email address</label>
<input id="contact-email" name="email" type="email" required>
<button type="submit">Continue</button>
</form>How to use the reference
Begin by identifying what the page is trying to achieve. Then choose the entry that describes that job, instead of choosing a setting merely because it looks familiar.
Read the code from the outer element inward. Pay attention to attribute names, tag nesting, and any links between elements through IDs. A browser may accept some incorrect markup, but accepting it is not the same as using it correctly.
A useful check before publishing
Try changing one choice in the example while keeping the rest of the page the same. Inspect the result in your browser. For compatibility-sensitive features, test another browser; for accessibility-sensitive features, use keyboard navigation and an accessibility inspector.
Some entries describe browser hints rather than guarantees. User input still needs server-side validation, and event-based behavior needs JavaScript even if the HTML describes the control.
Common Beginner Mistakes
- Treating every item in a reference list as interchangeable instead of choosing the one that matches the job.
- Copying reference markup without checking the element’s surrounding context or required attributes.
- Assuming one successful browser test proves the markup is accessible or universally supported.
Key Takeaways
- Choose the right kind of input control for the data you ask people to enter.
- Pick a setting for its meaning, then test the smallest working example.
- HTML references are most useful when combined with validation, browser inspection, and accessibility testing.