Input Types
Discover the many faces of the <input> element — from email and telephone to date pickers, color choosers, and file uploads.
One element, many faces
The <input> element is one of the most remarkable elements in HTML. By changing a single attribute — type — you can transform it from a plain text field into a date picker, a color chooser, a file uploader, a password field, or a numeric slider. The same element does all of these things.
HTML5 (introduced around 2010-2014) dramatically expanded the number of input types available. Before HTML5, developers had to use JavaScript libraries to create date pickers, number spinners, and email validation. Now, the browser does all of this natively with zero JavaScript.
Why does this matter? Because native browser inputs are:
- Accessible by default — screen readers understand them, keyboard navigation works automatically
- Mobile-optimized — setting
type="email"shows an email keyboard on phones,type="tel"shows a phone dial pad - Validated automatically —
type="email"checks for an @ sign,type="url"checks for a valid URL format - Consistent — users already know how their phone's native date picker works
Let's explore the most important input types, grouped by what they do.
<input> element as a Swiss Army knife — or better yet, a universal toolbox. The type attribute is like picking which tool to pull out. You don't need a separate element for dates, another for emails, another for numbers. It's one element that shapeshifts into whatever you need. Just like a toolbox has a screwdriver, hammer, wrench, and pliers all in one kit, the <input> element has text, email, date, number, color, and file all in one element.type="text". This means you can safely use modern input types — older browsers will simply show a text field instead. This graceful degradation is built into the HTML specification by design.