Modern Forms: Enhancing User Interaction with HTML5 Features

1. HTML5 Forms Janelle Krebsbach Tyson Phillips

2. 13 New Input Types

3. Placeholder Text <form> <input name="q" placeholder=“Search Text"> <input type="submit" value="Search"> </form>

4. Autofocus Fields <form> <input name="q" autofocus> <input type="submit" value="Search"> </form>

5. Data Lists <form> <input type=“text” list=“states”> <datalistid=“states” > <option value=“AK” label=“Alaska”> <option value=“AL” label=“Alabama”> <option value=“AR” label=“Arkansas”> </datalist> </form>

6. Spin Boxes <form> <input type="number" min="0" max="20" step="2" value="2"> </form>

7. Sliders <form> <input type="range" min="0" max="20" step="2" value="2"> <input type=“submit” value=“Go”> </form>

8. Date Pickers <form> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type=“time"> <input type="week"> <input type="month"> <input type="submit"> </form>

9. JavaScript Date Picker function show_calendar(str_target, str_datetime) { vararr_months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; varweek_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; varn_weekstart = 1; // day week starts from (normally 0 or 1) vardt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); vardt_prev_month = new Date(dt_datetime); dt_prev_month.setMonth(dt_datetime.getMonth()-1); vardt_next_month = new Date(dt_datetime); dt_next_month.setMonth(dt_datetime.getMonth()+1); vardt_firstday = new Date(dt_datetime); dt_firstday.setDate(1); dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); vardt_lastday = new Date(dt_next_month); dt_lastday.setDate(0); …

10. Color Pickers <form> <input type="color"> </form>

11. Validation <form> <input type="text" required> <input type="hidden" required> <input type="image" required> </form> <form novalidate> <input type="text"> <input type=“submit” value=“Submit”> </form>

12. Validation Example

13. Modernizr – HTML5 Detection Library • Open source JavaScript library that detects support for many HTML5 features.

14. References • “Web Forms – Dive into HTML 5” http://diveintohtml5.org/forms.html • “Dectecting HTML5 Features” http://diveintohtml5.org/detect.html