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?
9. Wouldn't it be nice if…
• Browsers understood different
data types
• Browsers tailored input
methods to data types
• Browsers could do basic
validation
13. <input type="_________" />
text url checkbox
password search radio
hidden color submit
file number reset
email range image
tel datetime* button
HTML5
14.
15. State of the Browsers
(Mid 2012)
A B A+ B+ B-
21 11 11.6 6 9
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
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
43. Please remember to complete and
return your session eval forms.
@toddanglin | anglin@telerik.com
THANKS!
www.KendoUI.com
Editor's Notes
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
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/
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.
