1. HTML5
Web forms & microdata
Akiva Levy, SixThirteen
http://sixthirteendesign.com
2011.03.27 Tel Aviv, Israel

2. Web forms

3. Input Types

4. Input type: email
<input type="email" />
• Falls back to type="text" for browsers currently lacking
support
• iPhone’s mobile Safari will switch to the numeric
keyboard type

5. Input type: URL
<input type="url" />
• Falls back to type="text" for browsers currently lacking
support
• iPhone’s mobile Safari will use the URI keyboard input
type

6. Input type: search
<input type="search" />
• Falls back to type="text" for browsers currently lacking
support
• Vendors style this element to match their browser’s
native UI
• Currently only supported by Mac OS X Safari

7. Input type: search
<input type="search" />
Matching native Mac Safari UI
Includes the native one-click clear button within element

8. Input type: COLOR
<input type="color" />
• Falls back to type="text" for browsers currently lacking
support
• Utilizes the native OS colour picker widget
• Returns a six digit hexidecimal colour value (ie.
27272a)
• Currently only supported by Opera 11

9. Input type: COLOR
<input type="color" />

10. Input type: NUMBER
<input type="number" />
• Optional attributes include: min, max, step, and value
• Falls back to type="text" for browsers currently lacking
support
• Styling is dependent upon Vendor implementation
• Activates iPhone’s on-screen keyboard to numeric type
• Desktop Opera implements a “spin box”

11. Input type: NUMBER
<input type="number" />
• Offers additional Javascript methods:
• input.stepUp(n)
• input.stepDown(n)
• input.valueAsNumber

12. Input type: Range
<input type="range" />
• Works much the same as the new number input type
• Vendors are expected to display as a horizontal slider

13. Input type: Range
<input type="range" />
• However, iPhone does not display range as a slider
• Nor does it select the numeric keyboard type
• iPhone simply falls back to the text type…

15. Other new bits

16. Placeholder
<input placeholder="Enter e-mail address" />
• Allows for a DOM-specific way to populate an input
field with placeholder text, usually instructing the user
as to the expected action they should perform
• Aims to remove the need for Javascript hacks to
manage this

17. AUTOfocus
<input autofocus />
• Allows for a DOM-specific way to automatically focus
on a particular input field
• Aims to remove the need for Javascript hacks to
manage this
• Solves usability problems by allowing this feature to be
enabled or disabled as a preference within the browser
• Power users everywhere rejoice!

18. validation
• Aims to replace the need for client-side validation
• Works for types: url, email, and number
• Enabled by default in browsers that support it
• To explicitly disable this feature use: <form novalidate>
• Some current implementations are incomplete and do
not offer any visual feedback when validation fails,
leaving users guessing why the form did not submit

19. Validation
Example e-mail validation
Example number with max value validation

20. Required
<input required />
• Ties into validation, as simple as adding required

21. Example
contact form

22. Microdata

23. Microdata
• Offers a means to add semantic context to your markup
• Alternative to RDFa, Microformats, etc.
• Extensible and definable
• Machine-readable data allows for easily digestible
meaning to markup, allowing for richer context of
content

24. Microdata: Why care?
• Allowing your markup to be easily digestible by
machines means your content can be extrapolated in
meaningful ways
• Microdata allows you to implement semantics easily
• Microdata allows machines to understand the context
of your site easily
• Microdata = win / win

26. MICRODATA: How?
• Create meaningful context using scoped name/value
pairs
• Choose (or define) a vocabulary appropriate for your
content and declare using itemscope and itemtype="" in
the parent node
• For each piece of data you wish to annotate, use o
__|__
itemprop="" /_____
____[ - - /]____
/ # _____/ /# /
/ # _.---._/ #/
/ /| | | /|
Let’s see an example…
/___/ | | | | | | ___
• | | | | |---| | | | |
|__| _| |___| |_/ |__|
// < ___ /> //
||/ | | | | ||/
| | | |
|---| |---|
|---| |---|
| | | |
|___| |___|
/ /

27. MICRODATA: How?
Loading…
o
__|__
/_____
____[ O O /]____
/ # _____/ /# /
/ # _.---._/ #/
/ /| | | /|
/___/ | | | | | | ___
| | | | |---| | | | |
|__| _| |___| |_/ |__|
// < ___ /> //
||/ | | | | ||/
| | | |
|---| |---|
|---| |---|
| | | |
|___| |___|
/ /

31. Recommended links
Read http://html5doctor.com
Test http://modernizr.com
Review http://foolip.org/microdatajs/live

32. </presentation>

33. <standingOvation />

34. Thanks!
Akiva Levy, founder of SixThirteen
Developer, Designer, Advocate
HTTP://SIXTHIRTEENDESIGN.CO
WWW
M
INFO@SIXTHIRTEENDESIGN.CO
E-MAIL
M
TWITTER @AKIVALEVY @SIXTHIRTEENCO