Successfully reported this slideshow.
Todd Anglin  @toddanglin
@t oddanglinVP HTML5 Web & Mobile Tools, TelerikMicrosoft MVP, ASP Insider, OReilly Author   htmlui.com   @htmlui
HTML5 forms & input:learning goals•   what’s available?•   how do you use it?•   how do you customize the    default exper...
TODAYHTML FORMS
asdflkajfds
Enter your email: <input type="text" /><input type="submit" value="Submit" />
In HTML4…•   Everything’s a text box•   Lots of JavaScript
<input type="_________" /> text               checkbox password           radio hidden             submit file            ...
Wouldnt it be nice if…•   Browsers understood different    data types•   Browsers tailored input    methods to data types•...
FORMS
•   New input types•   New rendering•   New input features    – EX: Placeholder Text, AutoFocus      Backwards compatible!
<input type="_________" /> text               checkbox password           radio hidden             submit file            ...
<input type="_________" />text       url         checkboxpassword   search      radiohidden     color       submitfile    ...
State of the Browsers(Mid 2012) A      B    A+    B+   B- 21    11   11.6    6   9
OS X
[No unique keyboard for Date/Time]    Chrome for Android improves the story,but only available to fraction of Android users.
DEMO:NEW INPUT TYPES
"Can I customize browser   rendered input elements    (like calendar or range            slider)?"             Nope. Not y...
DEMO:CUSTOMIZING SHADOWDOM
asdflkajfds
Enter your email:<input type="email" placeholder="Enteryour email" required title="Pleaseenter your email" /><input type="...
New Attributes•   More control over input    behavior    – Still no JavaScript    – Improved usability                    ...
DEMO:NEW INPUT ATTRIBUTES
Validation•   Handled by browser    – Can be disabled via form      novalidate•   Saves JavaScript    – Less to download =...
3 Ways to Control Validation
Customizing validation HTML •   Change message     – In Chrome, use input title attribute       (Not FF, O, S) •   Pattern...
JavaScriValidation API                      pt  •   JavaScript for greater controlcheckValidity() setCustomValidity()
CSS Styling for Validation CSS  New states:    valid       in-range    invalid     out-of-range    required    ready-only ...
DEMO:CUSTOMIZING VALIDATION
Lowest common denominator?       Including IE9?     NOTHING.        :(
Older Browsers1.   Polyfill2.   JavaScript fallbacks
DEMO:POLYFILLING HTML5 FORMS
Please remember to complete and     return your session eval forms.@toddanglin | anglin@telerik.comTHANKS!                ...
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
Upcoming SlideShare
Loading in …5
×

HTML5 Mullet: Forms & Input Validation

6,108 views

Published on

Published in: Technology, Design
  • Be the first to comment

HTML5 Mullet: Forms & Input Validation

  1. Todd Anglin @toddanglin
  2. @t oddanglinVP HTML5 Web & Mobile Tools, TelerikMicrosoft MVP, ASP Insider, OReilly Author htmlui.com @htmlui
  3. HTML5 forms & input:learning goals• what’s available?• how do you use it?• how do you customize the default experience?• how do you make it work in older browsers?
  4. TODAYHTML FORMS
  5. asdflkajfds
  6. Enter your email: <input type="text" /><input type="submit" value="Submit" />
  7. In HTML4…• Everything’s a text box• Lots of JavaScript
  8. <input type="_________" /> text checkbox password radio hidden submit file reset image buttonHTML4
  9. Wouldnt it be nice if…• Browsers understood different data types• Browsers tailored input methods to data types• Browsers could do basic validation
  10. FORMS
  11. • New input types• New rendering• New input features – EX: Placeholder Text, AutoFocus Backwards compatible!
  12. <input type="_________" /> text checkbox password radio hidden submit file reset image buttonHTML4
  13. <input type="_________" />text url checkboxpassword search radiohidden color submitfile number resetemail range imagetel datetime* buttonHTML5
  14. State of the Browsers(Mid 2012) A B A+ B+ B- 21 11 11.6 6 9
  15. OS X
  16. [No unique keyboard for Date/Time] Chrome for Android improves the story,but only available to fraction of Android users.
  17. DEMO:NEW INPUT TYPES
  18. "Can I customize browser rendered input elements (like calendar or range slider)?" Nope. Not yet. Not really. Shadow DOMinput[type=range].custom::-webkit-slider-thumb
  19. DEMO:CUSTOMIZING SHADOWDOM
  20. asdflkajfds
  21. Enter your email:<input type="email" placeholder="Enteryour email" required title="Pleaseenter your email" /><input type="submit" value="Submit" />
  22. New Attributes• More control over input behavior – Still no JavaScript – Improved usability – NoValidate• Attributes: – FormNoValidate – Placeholder – Accept – Autofocus – Multiple – Max Length – Min/Max – List – Step – AutoComplete – Required – Pattern
  23. DEMO:NEW INPUT ATTRIBUTES
  24. Validation• Handled by browser – Can be disabled via form novalidate• Saves JavaScript – Less to download = faster loading apps Does not replace server- side validation
  25. 3 Ways to Control Validation
  26. Customizing validation HTML • Change message – In Chrome, use input title attribute (Not FF, O, S) • Pattern attribute
  27. JavaScriValidation API pt • JavaScript for greater controlcheckValidity() setCustomValidity()
  28. CSS Styling for Validation CSS New states: valid in-range invalid out-of-range required ready-only optional write-only
  29. DEMO:CUSTOMIZING VALIDATION
  30. Lowest common denominator? Including IE9? NOTHING. :(
  31. Older Browsers1. Polyfill2. JavaScript fallbacks
  32. DEMO:POLYFILLING HTML5 FORMS
  33. Please remember to complete and return your session eval forms.@toddanglin | anglin@telerik.comTHANKS! www.KendoUI.com

×