html5 mullet: forms & input validation
TRANSCRIPT
Todd Anglin@toddanglin
VP HTML5 Web & Mobile Tools, TelerikMicrosoft MVP, ASP Insider, O'Reilly Author
@htmluihtmlui.com
@toddanglin
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?
HTML FORMSTODAY
asdflkajfds
Enter your email: <input type="text" /><input type="submit" value="Submit" />
In HTML4…• Everything’s a text box• Lots of JavaScript
textpasswordhiddenfile
checkboxradiosubmitresetimagebutton
HTML4
<input type="_________" />
Wouldn't it be nice if…• Browsers understood
different data types• Browsers tailored input
methods to data types• Browsers could do basic
validation
FORMS
• New input types• New rendering• New input features
–EX: Placeholder Text, AutoFocus
Backwards compatible!
textpasswordhiddenfile
checkboxradiosubmitresetimagebutton
HTML4
<input type="_________" />
textpasswordhiddenfileemailtel
checkboxradiosubmitresetimagebutton
HTML5
<input type="_________" />
urlsearchcolornumberrangedatetime*
State of the Browsers(Mid 2012)
A+A B+B B-
11.621 611 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)?"
Shadow DOMShadow DOMinput[type=range].custom::-webkit-slider-thumb
Nope. Not yet. Not really.
DEMO:CUSTOMIZING SHADOW DOM
asdflkajfds
Enter your email: <input type="email" placeholder="Enter
your email" required title="Please enter your email" />
<input type="submit" value="Submit" />
New Attributes• More control over input behavior
–Still no JavaScript– Improved usability
• Attributes:– Placeholder– Autofocus– Max Length– List– AutoComplete– Required– Pattern– Spellcheck
– NoValidate
– FormNoValidate
– Accept
– Multiple
– Min/Max
– Step
DEMO:NEW INPUT ATTRIBUTES
Validation• Handled by browser
–Can be disabled via form novalidate
• Saves JavaScript–Less to download = faster loading apps
Does not replace server-side validation
3 Ways to Control Validation
Customizing validation
• Change message– In Chrome, use input title attribute
(Not FF, O, S)
• Pattern attribute
HTML
Validation API
• JavaScript for greater control
JavaScript
checkValidity() setCustomValidity()
CSS Styling for Validation
New states:
CSS
validinvalid required optional
in-range out-of-range ready-only write-only
DEMO:CUSTOMIZING VALIDATION
Lowest common denominator?Including IE9?
NOTHING.
:(
Older Browsers
1. Polyfill
2. JavaScript fallbacks
DEMO:POLYFILLING HTML5 FORMS
THANKS!@toddanglin | [email protected]
Please remember to complete and return your session eval forms.
www.KendoUI.com