html5 web forms & microdata - akiva levi
Post on 07-Nov-2014
1.844 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related