Input Types
Use different input types for text, email, numbers, and more.
Syntax
<input type="email" name="email">The <input> element is the most common form control. Its type attribute decides what kind of input it accepts.
Common input types
text— single-line text.email— an email address.password— hidden characters.number— numeric input.date— a date picker.
Example
Loading editor…
Press Run to see the result.
When to use it
- A booking form uses type="date" so users get a native date-picker on mobile and desktop browsers.
- A settings page uses type="color" to let users pick a brand color with the browser color wheel.
- A profile form uses type="tel" to trigger a numeric keypad on mobile for phone number entry.
More examples
Text email and password inputs
Each type activates browser validation and the right keyboard on mobile (e.g., @ key for email).
<input type="text" placeholder="Username">
<input type="email" placeholder="Email address">
<input type="password" placeholder="Password" minlength="8">Number range and date inputs
Numeric and date input types render native controls appropriate for each data type on all platforms.
<label>Age: <input type="number" min="1" max="120" value="25"></label>
<label>Volume: <input type="range" min="0" max="100" value="50"></label>
<label>Birthday: <input type="date"></label>Search color and file inputs
Specialized types (search, color, file) trigger browser-native pickers and UI patterns for each use case.
<input type="search" placeholder="Search..." name="q">
<input type="color" value="#0066cc" name="brand-color">
<input type="file" name="resume" accept=".pdf,.doc">
Discussion