html5 web forms & microdata - akiva levi
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/1.jpg)
HTML5Web forms & microdata
Akiva Levy, SixThirteen
http://sixthirteendesign.com
2011.03.27 Tel Aviv, Israel
![Page 2: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/2.jpg)
Web forms
![Page 3: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/3.jpg)
Input Types
![Page 4: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/4.jpg)
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" />
![Page 5: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/5.jpg)
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" />
![Page 6: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/6.jpg)
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" />
![Page 7: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/7.jpg)
Input type: search
<input type="search" />
Matching native Mac Safari UI
Includes the native one-click clear button within element
![Page 8: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/8.jpg)
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" />
![Page 9: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/9.jpg)
Input type: COLOR
<input type="color" />
![Page 10: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/10.jpg)
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" />
![Page 11: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/11.jpg)
Input type: NUMBER
• Offers additional Javascript methods:
• input.stepUp(n)
• input.stepDown(n)
• input.valueAsNumber
<input type="number" />
![Page 12: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/12.jpg)
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" />
![Page 13: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/13.jpg)
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" />
![Page 14: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/14.jpg)
![Page 15: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/15.jpg)
Other new bits
![Page 16: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/16.jpg)
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" />
![Page 17: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/17.jpg)
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 />
![Page 18: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/19.jpg)
Validation
Example e-mail validation
Example number with max value validation
![Page 20: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/20.jpg)
Required
• Ties into validation, as simple as adding required
<input required />
![Page 21: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/21.jpg)
Example
contact form
![Page 22: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/22.jpg)
Microdata
![Page 23: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/23.jpg)
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
![Page 24: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/25.jpg)
![Page 26: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/26.jpg)
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…
![Page 27: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/27.jpg)
MICRODATA: How?
o
__|__
/_____\
____[\ O O /]____
/\ #\ \_____/ /# /\
/ \# \_.---._/ #/ \
/ /|\ | | /|\ \
/___/ | | | | | | \___\
| | | | |---| | | | |
|__| \_| |___| |_/ |__|
//\\ <\ ___ /> //\\
\||/ | | | | \||/
| | | |
|---| |---|
|---| |---|
| | | |
|___| |___|
/ \ / \
|_____| |_____|
Loading…
![Page 28: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/28.jpg)
![Page 29: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/29.jpg)
![Page 30: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/30.jpg)
![Page 31: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/31.jpg)
Recommended links
Read http://html5doctor.com
Test http://modernizr.com
Review http://foolip.org/microdatajs/live
![Page 32: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/32.jpg)
</presentation>
![Page 33: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/33.jpg)
<standingOvation />
![Page 34: HTML5 Web forms & microdata - Akiva Levi](https://reader034.vdocuments.mx/reader034/viewer/2022051609/545ca069af7959c8098b488d/html5/thumbnails/34.jpg)
Thanks!
Akiva Levy, founder of SixThirteen
Developer, Designer, Advocate
WWWHTTP://SIXTHIRTEENDESIGN.CO
M
M
TWITTER @AKIVALEVY @SIXTHIRTEENCO