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
Validation only works on submission (click on submit button)
Use modernizr to detect and automatically correct non-supported browsers