HTML 5

1
2
3
4
5
6
7
1. <input type="text" placeholder="Your name here" /> (auto-focus, with place holder and required field)
2. Number: <input max="5" min="0" type="number" /> 
3. Email: <input required="" type="email" /> - validation on email upon form submission
4. Range: <input max="10" min="0" step="1" type="range" value="5" />
5. Date: <input type="date" /> (also available type datetime, time, week, month)
6. URL: <input type="url" /> (on phone - no space bar on keypad)
7. Color: <input type="color" />

Output

1. (auto-focus, with place holder and required field)
2. Number:
3. Email: – validation on email upon form submission
4. Range:
5. Date:
6. URL: (on iPhone – no space bar on keypad)
7. Color:

Validation only works on submission (click on submit button)

Use modernizr to detect and automatically correct non-supported browsers

Leave a Reply

Your email address will not be published. Required fields are marked *