The type attribute is what actually defines an <input>'s behavior — HTML5 defines over 20 values, each with its own native browser UI, keyboard, and validation rules.
Syntax
<input type="value-from-the-table-below" name="...">The Full Reference
| Type | Use for | Full details |
|---|---|---|
text | General single-line text | text-input |
email | Email addresses, with built-in format validation | email-input |
password | Masked, sensitive text | password-input |
number | Numeric values meant for actual math | number-input |
date | Calendar dates | date-input |
time | Clock times | time-input |
file | Uploading a file | file-input |
checkbox | Independent on/off choices | checkbox |
radio | One choice from a group | radio-button |
hidden | Data submitted with the form, never shown or edited by the user | — |
tel | Phone numbers — brings up a numeric keypad on mobile, but no strict format validation | — |
url | Web addresses, with built-in URL format validation | — |
search | Search boxes — may show a native "clear" icon | — |
color | A native color picker | — |
range | A slider between a min and max value | — |
month / week | A specific month or week, rather than a full date | — |
Real-World Example
<input type="tel" name="phone" placeholder="+91 12345 67890">
<input type="url" name="portfolio" placeholder="https://yourportfolio.com">
<input type="color" name="brand-color" value="#185FA5">Three specialized input types in one snippet — each brings a genuinely different native UI and keyboard experience with zero extra JavaScript.
Common Mistakes
- Defaulting to
type="text"for everything, missing out on free built-in validation and better mobile keyboards - Using
type="number"for values that aren't actually meant for math, like phone numbers or postal codes — see number-input for why
Best Practices
- Always pick the most specific type available for the actual data being collected
- Test how each type's native UI looks on both desktop and mobile — they can differ noticeably
Accessibility Considerations
Native input types come with correct roles and keyboard behavior built in for assistive technology — a real advantage over reimplementing the same behavior with plain text inputs and custom JavaScript.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Older browsers that don't recognize a specific type (rare today) simply fall back to treating the field as type="text" — a safe, graceful degradation built into the spec.
Mini Practice
- Build a form with a
tel, aurl, and acolorinput, and compare their native UI on your device. - Identify the correct input type for: a coupon code, a birthdate, and a profile photo upload.
