Advanced Input Types & Datalist
12 min read
input typesdatalisttelrangedatecolorautocomplete
HTML Input Types: Beyond Text
HTML5 introduced many specialized input types that provide native validation, mobile-optimized keyboards, and accessible date/color pickers — all without JavaScript.
Input Types You Must Know
| Type | Mobile Keyboard | Built-in Validation |
|---|---|---|
| @ key visible | Requires @ and domain | |
| tel | Number pad | None (use pattern) |
| url | / and .com keys | Requires protocol |
| number | Number pad | min, max, step |
| range | N/A | Slider with min/max |
| date | Date picker | Native date selection |
| color | Color picker | Hex color selection |
| search | Normal + clear button | None |
The Datalist Element
<datalist> provides autocomplete suggestions for any input — a lightweight alternative to custom dropdown components.
The autocomplete Attribute
Helps password managers and autofill: autocomplete="email", autocomplete="new-password", autocomplete="cc-number".