5 min read
ā¢Question 10 of 49easyWhat are the Different Input Types?
HTML5 input types for better UX.
What You'll Learn
- HTML5 input types
- When to use each type
- Mobile keyboard benefits
Why Input Types Matter
HTML5 introduced many input types beyond basic text. These provide:
- Better mobile keyboards
- Built-in validation
- Specialized UI controls
All without JavaScript!
Input Types Overview
Text Types
index.htmlHTML
<input type="text" placeholder="Regular text">
<input type="email" placeholder="email@example.com">
<input type="password" placeholder="ā¢ā¢ā¢ā¢ā¢ā¢ā¢ā¢">
<input type="tel" placeholder="Phone number">
<input type="url" placeholder="https://...">Number Types
index.htmlHTML
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">Date and Time
index.htmlHTML
<input type="date">
<input type="time">
<input type="datetime-local">Special Types
index.htmlHTML
<input type="color" value="#ff0000">
<input type="file" accept="image/*">Selection
index.htmlHTML
<input type="checkbox"> Agree to terms
<input type="radio" name="size" value="s"> Small
<input type="radio" name="size" value="m"> Medium