NEW HTML5 FORM INPUT TYPES
HTML5 introduced many new <input> types to:
Reduce JavaScript usage
Improve validation
Enhance mobile & user experience
1. email
Example
<input type="email" name="user_email" required>
Attribute Explanation
Attribute Explanation
type="emai Accepts valid email format
l"
name Key used in form
submission
required Mandatory field
Behavior
Browser checks @ and domain format
Mobile shows email keyboard
2. url
Example
<input type="url" name="website">
Accepts valid URL format ([Link] [Link]
Auto validation
3. number
Example
<input type="number" name="age" min="18" max="60"
step="1">
Attribute Explanation
Attribut Purpose
e
min Minimum value
max Maximum value
step Increment/
decrement
Behavior
Shows spinner controls
Numeric keyboard on mobile
4. range
Example
<input type="range" name="volume" min="0" max="100"
step="10">
Slider input
Used for volume, brightness, ratings
5. date
Example
<input type="date" name="dob">
Displays calendar picker
Format: YYYY-MM-DD
6. time
Example
<input type="time" name="login_time">
7. datetime-local
Example
<input type="datetime-local" name="meeting">
Date + time
No timezone included
8. month
Example
<input type="month" name="billing_month">
9. week
Example
<input type="week" name="project_week">
10. color
Example
<input type="color" name="fav_color">
Opens color picker
Returns hex value (#ff0000)
11. search
Example
<input type="search" name="query" placeholder="Search
here">
Optimized for search fields
Clear button on some browsers
12. tel
Example
<input type="tel" name="mobile" pattern="[0-9]{10}">
Shows numeric keypad
No automatic validation (use pattern)
13. file
Example
<input type="file" name="resume" accept=".pdf,.doc" multiple>
Attribut Explanation
e
accept Allowed file types
multiple Select multiple
files
14. hidden
Example
<input type="hidden" name="user_id" value="12345">
Not visible
Used to pass backend data
15. image
Example
<input type="image" src="[Link]" alt="Submit">
Acts as submit button
Sends click coordinates
16. button
Example
<input type="button" value="Click Me">
Used with JavaScript.
17. submit
Example
<input type="submit" value="Register">
18. reset
Example
<input type="reset" value="Clear">
19. password (Enhanced in HTML5)
Example
<input type="password" name="pwd" minlength="8">
20. checkbox
Example
<input type="checkbox" name="agree" required>
21. radio
Example
<input type="radio" name="gender" value="M">
22. datalist (NEW HTML5 FEATURE)
Example
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
Auto-suggestions
User can type custom value
23. AUTOCOMPLETE ATTRIBUTE
Example
<input type="email" autocomplete="on">
Browser shows saved emails
You can select instead of typing again
Attribute Purpose
type="email" Validates email format
name="user_emai Used to send data to server
l"
required Makes field mandatory
autocomplete="o Shows saved email
n" suggestions
24. AUTOFUCUS ATTRIBUTE
Example
<input type="text" autofocus>
Cursor is already in the text box
You start typing immediately
25. FORM VALIDATION ATTRIBUTES (HTML5)
Example
<input type="text"
required
pattern="[A-Za-z]+"
minlength="3"
maxlength="10">
26. SUMMARY TABLE
Input Purpose
Type
email Email
validation
url Website URL
number Numeric input
range Slider
date Calendar
time Time picker
color Color picker
search Search input
tel Phone number
file File upload
hidden Backend data
datalist Auto-suggest
NOTES
HTML5 input types improve UX and accessibility
Validation happens before server submission
Reduces JavaScript dependency