HTML5Web forms & microdata

Akiva Levy, SixThirteen

http://sixthirteendesign.com

2011.03.27 Tel Aviv, Israel

Web forms

Input Types

Input type: email

• Falls back to type="text" for browsers currently lacking

support

• iPhone’s mobile Safari will switch to the numeric

keyboard type

<input type="email" />

Input type: URL

• Falls back to type="text" for browsers currently lacking

support

• iPhone’s mobile Safari will use the URI keyboard input

type

<input type="url" />

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

<input type="search" />

Input type: search

<input type="search" />

Matching native Mac Safari UI

Includes the native one-click clear button within element

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

<input type="color" />

Input type: COLOR

<input type="color" />

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”

<input type="number" />

Input type: NUMBER

• Offers additional Javascript methods:

• input.stepUp(n)

• input.stepDown(n)

• input.valueAsNumber

<input type="number" />

Input type: Range

• Works much the same as the new number input type

• Vendors are expected to display as a horizontal slider

<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…

<input type="range" />

Other new bits

Placeholder

• 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

<input placeholder="Enter e-mail address" />

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!

<input autofocus />

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

Validation

Example e-mail validation

Example number with max value validation

Required

• Ties into validation, as simple as adding required

<input required />

Example

contact form

Microdata

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

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

MICRODATA: How?

o

__|__

/_____\

____[\ - - /]____

/\ #\ \_____/ /# /\

/ \# \_.---._/ #/ \

/ /|\ | | /|\ \

/___/ | | | | | | \___\

| | | | |---| | | | |

|__| \_| |___| |_/ |__|

//\\ <\ ___ /> //\\

\||/ | | | | \||/

| | | |

|---| |---|

|---| |---|

| | | |

|___| |___|

/ \ / \

|_____| |_____|

• 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

itemprop=""

• Let’s see an example…

MICRODATA: How?

o

__|__

/_____\

____[\ O O /]____

/\ #\ \_____/ /# /\

/ \# \_.---._/ #/ \

/ /|\ | | /|\ \

/___/ | | | | | | \___\

| | | | |---| | | | |

|__| \_| |___| |_/ |__|

//\\ <\ ___ /> //\\

\||/ | | | | \||/

| | | |

|---| |---|

|---| |---|

| | | |

|___| |___|

/ \ / \

|_____| |_____|

Loading…

Recommended links

Read http://html5doctor.com

Test http://modernizr.com

Review http://foolip.org/microdatajs/live

</presentation>

<standingOvation />

Thanks!

Akiva Levy, founder of SixThirteen

Developer, Designer, Advocate

WWWHTTP://SIXTHIRTEENDESIGN.CO

M

E-MAILINFO@SIXTHIRTEENDESIGN.CO

M

TWITTER @AKIVALEVY @SIXTHIRTEENCO