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,093 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,093
On SlideShare
0
From Embeds
0
Number of Embeds
348
Actions
Shares
0
Downloads
120
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • The HTML5 Mullet: Form Input and Validation Really, it ’s the HTML5 Reverse Mullet. Party in the front, business in the back. Most talk about HTML5 generally revolves around the fun and exciting technologies like Geolocation, Video, and the powerful styling CSS3 brings to the party. But how useful is HTML5 for business apps? HTML5 promises a number of new features in browsers that will make data entry and validation easier for developers and end-users. In this session, you will learn how HTML5 is helping business developers simplify working with data and input validation, and see practical techniques for leveraging these features across all browsers, old and new. You will learn: How to use HTML5 Forms and input validation Techniques for bridging the gap to older browsers that lack HTML5 How to customize the default browser HTML5 Forms experience
  • Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • This HTML4 form would submit without hesitation, even though the input is clearly wrong. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Configuration for basic input example Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • http://www.w3.org/TR/html4/interact/forms.html#adef-type-INPUT The &quot;state of the art&quot; for forms in HTML4 Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • http://www.w3.org/TR/html4/interact/forms.html#adef-type-INPUT Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • There are 13 new input types Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Browsers ultimately dictate the usability of HTML5 forms. Great overview available here: http://wufoo.com/html5/ This non-specific rating focuses on Desktop Browsers. Mobile browsers are a different story. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Most new types still render as a normal textbox Shown: IE9, FF11 LIVE TEST: http://jsbin.com/imonat Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Chrome 21 (Mac) Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Not only do renderings differ by browser, but by client Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • iOS varies the keyboard significantly on the iPhone depending on the input type Shown: iOS5 (not available in iOS4) Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Android (4.0) also provides unique keyboards, but support is not nearly as extensive for HTML5 input types as iOS Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ Example: input[type=range].custom::-webkit-slider-thumb { -webkit-appearance: none; background-color: Green; opacity: 0.5; width: 10px; height: 40px; } Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Validation helps improve user experience. Fewer trips to the server if you can catch simple user mistakes on the client.
  • By default, browser use RFC-compliant email validation Some types, like Telephone intentionally do not validate format http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message http://jsfiddle.net/nfgfP/61/
  • http://www.alistapart.com/articles/forward-thinking-form-validation/
  • The common set of HTML5 Form features that work in all modern HTML5 browsers *Note that IE9 offers no HTML5 forms support Types Email, Tel, Url, Search, Number Attributes Placeholder, MaxLength, NoValidate, Autofocus Elements Output Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Sad truth is that HTML5 forms support across all browsers is evolving slowly. BUT…that doesn&apos;t mean this is all for waste. We can use a couple of solutions to take advantage of new HTML5 forms syntax. Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • HTML5 Forms polyfill: https://github.com/ryanseddon/H5F OR Polyfill approach also gives you more control over rendering in browsers. Makes it useful in modern browsers, too.
  • Baby Steps - HTML5 Forms support is not perfect today, but it is headed in the right direction Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • Visual Studio Live! Las Vegas 2011MGB 2003 © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
  • 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

    ×