Upload
aaron-gustafson
View
116
Download
2
Tags:
Embed Size (px)
DESCRIPTION
We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.
Citation preview
Aaron Gustafson
SemanticsAccessibility Forms&5HTML
2
HTML5 provides more control
3
Paves the cowpaths we’ve carved on the web
4
The process is ongoing, however, so watch your step
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Then & now
5
<fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption></fig>
The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Then & now
6
<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Photo of Albert Einstein</p></div>
The original “figure” microformat.
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Then & now
7
<figure> <img src="photo.jpeg" alt=""/> <legend>Photo of Albert Einstein</legend></figure>
The original HTML5 figure.
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Then & now
8
<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Photo of Albert Einstein</p></div>
The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Then & now
9
<figure> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>
The current (dare I say final?) HTML5 figure.
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Oldies but goodies
10
aabbraddress area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfndiv
dl dt
fieldsetformh1 h2 h3 h4 h5 h6
headhtml
i
iframe img
inputins
kbd
labellegend
li
link
map
meta
noscriptobject ol
optgroupoption
pparam
pre q samp
script
selectspan
style
sub
tabletbody
td
textarea
tfootth
thead
title
tr
ul
var
basebdo b
cite
em
hr menusmall
strongsup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
New & revisited
11
aabbraddress area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfndiv
dl dt
fieldsetformh1 h2 h3 h4 h5 h6
headhtml
i
iframe img
inputins
kbd
labellegend
li
link
map
meta
noscriptobject ol
optgroupoption
pparam
pre q samp
script
selectspan
style
sub
tabletbody
td
textarea
tfootth
thead
title
tr
ul
var
basebdo b
cite
em
hr menusmall
strong
articleaside
audiocanvas
commanddatalist
details
embed
figcaptionfigurefooterheader
hgroupkeygen
mark meter
nav
output progress
rprt
ruby
section
source
summary
time
video
wbr
sup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
Our focus today
12
aabbraddress area
blockquote
body
br
button
caption
code
col colgroup
dd
del
dfndiv
dl dt
fieldsetformh1 h2 h3 h4 h5 h6
headhtml
i
iframe img
inputins
kbd
labellegend
li
link
map
meta
noscriptobject ol
optgroupoption
pparam
pre q samp
script
selectspan
style
sub
tabletbody
td
textarea
tfootth
thead
title
tr
ul
var
basebdo b
cite
em
hr menusmall
strong
articleaside
audiocanvas
commanddatalist
details
embed
figcaptionfigurefooterheader
hgroupkeygen
mark meter
nav
output progress
rprt
ruby
section
source
summary
time
video
wbr
sup
13
Cha-cha-cha-changes...
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
and are back
14
b i
<p>This presentation is about <b>HTML5</b>.</p>
The b elementRepresents a span of text offset from its surrounding content, but of no extra importance.
<p>The <code>b</code> and <code>i</code> elementshave been legitimized in HTML5. <i>Go figure.</i></p>
The i elementRepresents a span of text in an alternate voice or mood.
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
and got adjusted
15
em strong
<p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>
The em elementRepresents a span of text text with emphatic stress.
<p>Please fill out the form below. <strong>Note: allfields are required.</strong></p>
The strong elementRepresents a span of text of great importance.
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
turned to the dark side
16
smallThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
got clarified
17
citeThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).
<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
got resurrected
18
menuThe menu elementRepresents a list of commands.
<menu> <li><a id="bold">Bold</a></li> <li><a id="italic">Italic</a></li> <li><a id="underline">Underline</a></li></menu>
<menu> <command icon="/i/icons/b.png" label="Bold"/> <command icon="/i/icons/i.png" label="Italic"/> <command icon="/i/icons/u.png" label="Underline"/></menu>
or
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
found meaning
19
hrThe hr elementRepresents a paragraph-level thematic break.
20
HTML5 offers many new options for building documents
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
21
The section elementRepresents a section of a document, typically with a title or heading.
The article elementRepresents a section of content that forms an independent part of a document or site.
Organization: &
<section> <!-- pretty much anything can go here --></section>
<article> <!-- pretty much anything can go here --></article>
section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
22
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
23
section
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
24
section > article
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
25
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
26
article
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
27
article > section
Organization: & section article
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
28
The header elementRepresents the header of a section.
The footer elementRepresents the footer of a section.
<header> <!-- titles, etc. go here --></header>
<footer> <!-- meta/supplementary information goes here --></footer>
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
29
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
30
header
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
31
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
32
footer
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
33
article
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
34
article > header
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
35
article
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
36
article > footer
Organization: & header footer
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
37
The nav elementDemarcates a group of navigational links.
<nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p></nav>
Organization:nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
38
Organization:nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
39
nav
Organization:nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
40
Organization:nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
41
nav
Organization:nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
42
The aside elementDemarcates content that is tangentially related to the primary content.
<article>
<!-- main content -->
<aside> <!-- something related --> </aside>
</article>
Organization:aside
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
43
Organization:aside
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
44
aside
Organization:aside
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
45
The details elementA UI control for hiding optional content. Must contain a summary element, followed by other content.
<details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p></details>
Organization:details
It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org).
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
46
The figure elementA unit of content (typically referenced by the primary content) that is self-contained. May contain a figcaption element and other content.
<figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table></figure>
Organization:figure
<figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>
47
Document outlines
in HTML5
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
48
Implicit sectioning
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process<p> The Web Hypertext Application...
<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
1 HTML51.1 W3C standardization process1.2 Markup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h2> W3C standardization process<p> The Web Hypertext Application...
<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
49
Explicit sectioning
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
sect
ion
sect
ion
1 HTML51.1 W3C standardization process1.2 Markup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h1> W3C standardization process<p> The Web Hypertext Application...
<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h1> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
50
Explicit sectioning
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
sect
ion
sect
ion
1 HTML51.1 W3C standardization process1.2 Markup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...
<h4> W3C standardization process<p> The Web Hypertext Application...
<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...
<h6> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...
51
Explicit sectioning
A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
sect
ion
sect
ion
1 HTML51.1 W3C standardization process1.2 Markup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
52
Section managementSectioning elementsCreate explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
53
Outline limitations
1 Title1.1 Subtitle
<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...
<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...
<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...
54
Enter the
hgro
up
1 Title
hgroup
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
55
Section managementSectioning rootsEstablish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
56
Rooted sections
1 Title1.1 Section heading
<h1> Title<p> Text content continues...<p> Text content continues...
<h2> Section heading<p> Text content continues...
<blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues...<p> Text content continues...<p> Text content continues...
57
New elements
to consider
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
58
audiovideocanvas(plus object & embed)
Multimedia
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
59
audiovideocanvas(plus object & embed)
Stick around to hear Molly speak on these.
Multimedia
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
60
The time elementRepresents a date and/or time.
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
61
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
62
time
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
63
The time elementRepresents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
64
The time elementRepresents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time>
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
65
The time elementRepresents a date and/or time.
<time>October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time>
<time datetime="2010-11-26T01:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>
Nailing down a time
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
66
The mark elementRepresents a a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users' online activities.</p> </li></ol>
Highlighting content
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
67
Highlighting content
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
68
Highlighting content
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
69
mark
Highlighting content
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
70
Highlighting content
mark
71
HTML5 supports ARIA out of the box
72
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
73
The role attributeDefines the part an element is playing (assuming it’s different than the semantics would otherwise imply).
<section id="main" role="main"> <!-- The primary content for the page would go here --></section>
All the site’s a play...
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
74
Landmark roles
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
75
<header role="banner">
Landmark roles
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
76
Landmark roles
<nav role="navigation">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
77
Landmark roles
<form role="search">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
78
Landmark roles
<section role="main">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
79
Landmark roles
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
80
Landmark roles
<footer role="contentinfo">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
81
Landmark roles
<nav role="navigation">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
82
Landmark roles
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
83
Landmark roles
<aside role="complementary">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
84
Landmark rolesapplicationbannercomplementary
contentinfoformmain
navigationsearch
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
85
Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroup
headingimglistlistitemmathnote
presentationregionrowrowheaderseparator
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
86
Structural roles
<article role="article">
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
87
<span role="button">OK</span>
Widget roles
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
88
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
89
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
<div role="alert"> <p>Something went wrong.</p></div>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
90
<span role="button">OK</span>
Widget roles
(of course <button>OK</button> would be better)
<div role="alert"> <p>Something went wrong.</p></div>
<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
91
Widget rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog
marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar
sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem
Widget Container Rolesgridlistboxmenu
menubartablisttoolbar
treetreegrid
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
92
Widget propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live
aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
93
Widget states
<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
B(off)
B(on)
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
94
Widget states
B(off)
B(on)
<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
95
Widget states
B(off)
B(on)
<span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></span><span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></span>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
96
Widget statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)
97
With HTML5 you can
build more usable forms
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
98
datetimeA UI control for selecting a date & time that includes timezone information.
datetime-localA UI control for selecting a date & time that does not include timezone information.
dateA UI control for selecting a date with access to all date components (day, month and year).
monthA UI control for selecting a date that provides access to month and year only.
timeA UI control for selecting a time that does not include timezone information.
weekA UI control for selecting a date that provides access to week and year only.
New input types: dates & times
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
99
New input types: dates & times
<input type="date" name="dob"/>
Safari
Opera
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
100
numberA UI control for selecting a number.
rangeA UI control for selecting an imprecise number.
New input types: numbers
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
101
New input types: numbers
<input type="range" min="1" max="11" name="foo"/>
<input type="number" name="foo"/>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
102
emailA UI control for entering an email.
urlA UI control for entering a URL.
telA UI control for entering a telephone number.
New input types
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
103
New input types
<input type="email" ... /> <input type="url" ... />
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
104
searchA UI control for plain text editing of one or more search terms.
New input types: search
my search terms x
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
105
colorA UI control for selecting a color.
New input types: color
#EC4D0E
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
106
autocompleteTells the User Agent whether or not the value should be stored.
autofocusTells the User Agent to bring focus to the form control on page load.
formAn id reference to the form to which a given control belongs.
requiredIndicated the form control must be provided a value.
placeholderOffers users a short hint about the required value.
UI controls
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
107
min & maxLower and upper boundary for an element value (dates, time, and numbers only).
stepThe granularity of values allowed (dates, time, and numbers only).
Value controls
<input type="range" min="1" max="11" step="0.5" .../>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
108
patternA regular expression pattern that the User Agent should validate the input against.
Value controls
<input type="text" pattern="\d{6}\w{3}" placeholder="6 digits followed by 3 letters" .../>
HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010
109
listAn id reference to a datalist element containing acceptable values.
Value controls
<input type="text" list="countries" name="country"/><datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --></datalist>
110
Which path will
you take?
Aaron Gustafson
SemanticsAccessibility Forms&5HTML
HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010
Slides available athttp://slideshare.net/AaronGustafson
This presentation is licensed underCreative Commons
Attribution-Noncommercial-Share Alike 3.0
flickr Photo Credits“2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi
“IMG_6200” by pcutler“Construction material” by raisin bun
“TOC” by D'Arcy Norman“Dual Samsung Monitors” by steve-uk
112