html5 mullet: forms & input validation

43
Todd Anglin @toddanglin

Upload: todd-anglin

Post on 12-May-2015

4.160 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: HTML5 Mullet: Forms & Input Validation

Todd Anglin@toddanglin

Page 2: HTML5 Mullet: Forms & Input Validation

VP HTML5 Web & Mobile Tools, TelerikMicrosoft MVP, ASP Insider, O'Reilly Author

@htmluihtmlui.com

@toddanglin

Page 3: HTML5 Mullet: Forms & Input Validation

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?

Page 4: HTML5 Mullet: Forms & Input Validation

HTML FORMSTODAY

Page 5: HTML5 Mullet: Forms & Input Validation

asdflkajfds

Page 6: HTML5 Mullet: Forms & Input Validation

Enter your email: <input type="text" /><input type="submit" value="Submit" />

Page 7: HTML5 Mullet: Forms & Input Validation

In HTML4…• Everything’s a text box• Lots of JavaScript

Page 8: HTML5 Mullet: Forms & Input Validation

textpasswordhiddenfile

checkboxradiosubmitresetimagebutton

HTML4

<input type="_________" />

Page 9: HTML5 Mullet: Forms & Input Validation

Wouldn't it be nice if…• Browsers understood

different data types• Browsers tailored input

methods to data types• Browsers could do basic

validation

Page 10: HTML5 Mullet: Forms & Input Validation

FORMS

Page 11: HTML5 Mullet: Forms & Input Validation

• New input types• New rendering• New input features

–EX: Placeholder Text, AutoFocus

Backwards compatible!

Page 12: HTML5 Mullet: Forms & Input Validation

textpasswordhiddenfile

checkboxradiosubmitresetimagebutton

HTML4

<input type="_________" />

Page 13: HTML5 Mullet: Forms & Input Validation

textpasswordhiddenfileemailtel

checkboxradiosubmitresetimagebutton

HTML5

<input type="_________" />

urlsearchcolornumberrangedatetime*

Page 14: HTML5 Mullet: Forms & Input Validation
Page 15: HTML5 Mullet: Forms & Input Validation

State of the Browsers(Mid 2012)

A+A B+B B-

11.621 611 9

Page 16: HTML5 Mullet: Forms & Input Validation
Page 17: HTML5 Mullet: Forms & Input Validation
Page 18: HTML5 Mullet: Forms & Input Validation

OS X

Page 19: HTML5 Mullet: Forms & Input Validation
Page 20: HTML5 Mullet: Forms & Input Validation
Page 21: HTML5 Mullet: Forms & Input Validation
Page 22: HTML5 Mullet: Forms & Input Validation
Page 23: HTML5 Mullet: Forms & Input Validation

[No unique keyboard for Date/Time]

Chrome for Android improves the story,but only available to fraction of Android users.

Page 24: HTML5 Mullet: Forms & Input Validation

DEMO:NEW INPUT TYPES

Page 25: HTML5 Mullet: Forms & Input Validation

"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.

Page 26: HTML5 Mullet: Forms & Input Validation
Page 27: HTML5 Mullet: Forms & Input Validation

DEMO:CUSTOMIZING SHADOW DOM

Page 28: HTML5 Mullet: Forms & Input Validation

asdflkajfds

Page 29: HTML5 Mullet: Forms & Input Validation

Enter your email: <input type="email" placeholder="Enter

your email" required title="Please enter your email" />

<input type="submit" value="Submit" />

Page 30: HTML5 Mullet: Forms & Input Validation

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

Page 31: HTML5 Mullet: Forms & Input Validation

DEMO:NEW INPUT ATTRIBUTES

Page 32: HTML5 Mullet: Forms & Input Validation

Validation• Handled by browser

–Can be disabled via form novalidate

• Saves JavaScript–Less to download = faster loading apps

Does not replace server-side validation

Page 33: HTML5 Mullet: Forms & Input Validation

3 Ways to Control Validation

Page 34: HTML5 Mullet: Forms & Input Validation

Customizing validation

• Change message– In Chrome, use input title attribute

(Not FF, O, S)

• Pattern attribute

HTML

Page 35: HTML5 Mullet: Forms & Input Validation

Validation API

• JavaScript for greater control

JavaScript

checkValidity() setCustomValidity()

Page 36: HTML5 Mullet: Forms & Input Validation

CSS Styling for Validation

New states:

CSS

validinvalid required optional

in-range out-of-range ready-only write-only

Page 37: HTML5 Mullet: Forms & Input Validation

DEMO:CUSTOMIZING VALIDATION

Page 38: HTML5 Mullet: Forms & Input Validation

Lowest common denominator?Including IE9?

NOTHING.

:(

Page 39: HTML5 Mullet: Forms & Input Validation
Page 40: HTML5 Mullet: Forms & Input Validation

Older Browsers

1. Polyfill

2. JavaScript fallbacks

Page 41: HTML5 Mullet: Forms & Input Validation

DEMO:POLYFILLING HTML5 FORMS

Page 42: HTML5 Mullet: Forms & Input Validation
Page 43: HTML5 Mullet: Forms & Input Validation

THANKS!@toddanglin | [email protected]

Please remember to complete and return your session eval forms.

www.KendoUI.com