Todd Anglin gave a presentation on HTML5 forms and input types. He discussed the new input types available like email, url, number and date/time. He demonstrated how to use these new input types and attributes like placeholder, required and pattern. Anglin also covered customizing the browser rendered inputs using shadow DOM and styling validation states with CSS. For older browsers without native support, he recommended polyfilling the new functionality with JavaScript.

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