html5 mullet: forms & input validation

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 | anglin@telerik.com

Please remember to complete and return your session eval forms.

www.KendoUI.com