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?

4. TODAY
HTML FORMS

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.

24. DEMO:
NEW INPUT TYPES

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

27. DEMO:
CUSTOMIZING SHADOW
DOM

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

31. DEMO:
NEW INPUT ATTRIBUTES

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

37. DEMO:
CUSTOMIZING VALIDATION

38. Lowest common denominator?
Including IE9?
NOTHING.
:(

40. Older Browsers
1. Polyfill
2. JavaScript fallbacks

41. DEMO:
POLYFILLING HTML5 FORMS

43. Please remember to complete and
return your session eval forms.
@toddanglin | anglin@telerik.com
THANKS!
www.KendoUI.com