HTML5 Mullet: Forms & Input Validation
Download as PPT, PDF2 likes5,805 views
Todd Anglin gave a presentation on HTML5 forms and input types. He discussed the new input types available like email, url, number and date/time. He demonstrated how to use these new input types and attributes like placeholder, required and pattern. Anglin also covered customizing the browser rendered inputs using shadow DOM and styling validation states with CSS. For older browsers without native support, he recommended polyfilling the new functionality with JavaScript.
![[No unique keyboard for Date/Time]
Chrome for Android improves the story,
but only available to fraction of Android users.](https://image.slidesharecdn.com/t5anglinhtml5-mullet-form-input-validation-120830144154-phpapp02/85/HTML5-Mullet-Forms-Input-Validation-23-320.jpg)
!["Can I customize browser
rendered input elements
(like calendar or range
slider)?"
Nope. Not yet. Not really.
Shadow DOM
input[type=range].custom::-webkit-slider-thumb](https://image.slidesharecdn.com/t5anglinhtml5-mullet-form-input-validation-120830144154-phpapp02/85/HTML5-Mullet-Forms-Input-Validation-25-320.jpg)
HTML5 Mullet: Forms & Input Validation
- 1. Todd Anglin @toddanglin
- 2. @t oddanglin VP HTML5 Web & Mobile Tools, Telerik Microsoft MVP, ASP Insider, O'Reilly 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?
- 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 button HTML4
- 9. Wouldn't 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 button HTML4
- 13. <input type="_________" /> text url checkbox password search radio hidden color submit file number reset email range image tel datetime* button HTML5
- 15. State of the Browsers (Mid 2012) A B A+ B+ B- 21 11 11.6 6 9
- 18. OS X
- 23. [No unique keyboard for Date/Time] Chrome for Android improves the story, but only available to fraction of Android users.
- 25. "Can I customize browser rendered input elements (like calendar or range slider)?" Nope. Not yet. Not really. Shadow DOM input[type=range].custom::-webkit-slider-thumb
- 28. asdflkajfds
- 29. Enter your email: <input type="email" placeholder="Enter your email" required title="Please enter your email" /> <input type="submit" value="Submit" />
- 30. 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
- 32. Validation • Handled by browser – Can be disabled via form novalidate • Saves JavaScript – Less to download = faster loading apps Does not replace server- side validation
- 33. 3 Ways to Control Validation
- 34. Customizing validation HTML • Change message – In Chrome, use input title attribute (Not FF, O, S) • Pattern attribute
- 35. JavaScri Validation API pt • JavaScript for greater control checkValidity() setCustomValidity()
- 36. CSS Styling for Validation CSS New states: valid in-range invalid out-of-range required ready-only optional write-only
- 38. Lowest common denominator? Including IE9? NOTHING. :(
- 40. Older Browsers 1. Polyfill 2. JavaScript fallbacks
- 43. Please remember to complete and return your session eval forms. @toddanglin | [email protected] THANKS! www.KendoUI.com
Editor's Notes
- #2: 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
- #3: 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.
- #6: 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.
- #7: 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.
- #9: http://www.w3.org/TR/html4/interact/forms.html#adef-type-INPUT The "state of the art" 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.
- #13: 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.
- #14: 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.
- #16: 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.
- #17: 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.
- #18: 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.
- #19: 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.
- #20: 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.
- #24: 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.
- #26: 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.
- #33: Validation helps improve user experience. Fewer trips to the server if you can catch simple user mistakes on the client.
- #35: 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/
- #37: http://www.alistapart.com/articles/forward-thinking-form-validation/
- #39: 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.
- #40: Sad truth is that HTML5 forms support across all browsers is evolving slowly. BUT…that doesn'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.
- #41: 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.
- #43: 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.
- #44: 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.