HTML5 Input Types in HTML
From the HTML cheat sheet · Forms & Input Elements · verified Jul 2026
HTML5 Input Types
Modern input types with built-in validation
css
<!-- Date and time inputs -->
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="expiry">
<input type="week" name="week">
<!-- Numeric inputs -->
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">
<!-- Contact inputs -->
<input type="email" multiple>
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="url" placeholder="https://example.com">
<!-- Other inputs -->
<input type="search" placeholder="Search...">
<input type="color" value="#ff0000">
<input type="file" accept="image/*" multiple>html
<form>
<input type="date" value="2024-01-01">
<input type="time" value="14:30">
<input type="color" value="#4285f4">
<input type="range" min="0" max="100">
<input type="file" accept=".pdf,.doc">
</form>🟢 Essential - HTML5 inputs provide native validation
💡 date/time inputs have native pickers
📌 Use datalist for autocomplete suggestions
⚡ type="search" adds clear button
⚠️ Browser support varies for some types
html5inputforms