SlideShare a Scribd company logo
1 of 171
Download to read offline
FALLING IN LOVE WITH FORMS 
Aaron Gustafson 
@AaronGustafson 
slideshare.net/AaronGustafson
Forms suck.
They are incredibly 
tedious to create.
They are undeniably 
annoying to fill in.
They can be 
frustrating to test.
They require logic.
Forms suck.
can 
Forms suck.
don’t have to 
Forms suck.
can 
a lot less 
Forms suck.
Forms can be… 
easy to build 
predictable 
effortless to use 
and accessible
It’s all in how you 
look at them.
HELPFUL HINT 
Break large, 
complex forms into 
smaller, simpler, 
reusable patterns
How about a 
common example? 
Let’s look 
at a contact form.
webstandardssherpa.com/contact
webstandardssherpa.com/contact
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
Your Name 
<input type=“text” name=“full_name”>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
Your Name 
<input name=“full_name”>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
Your Name 
<input name=“full_name”/>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
Your Name 
<input name=“full_name”>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
<label>Your Name</label> 
<input name=“full_name”>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name”>
FALLING IN LOVE WITH FORMS 
Pattern 1: Label & Field 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required>
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input id=“email” name=“email” required> 
We will only use your email address to respond to your message.
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input id=“email” name=“email” required> 
We will only use your email address to respond to your message. 
!
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input id=“email” name=“email” required> 
We will only use your email address to respond to your message. 
!
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required> 
We will only use your email address to respond to your message. 
!
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required> 
We will only use your email address to respond to your message. 
!
Progressive 
Enhancement
Technological 
restrictions
User Experience 
BASIC ADVANCED 
Browser Capabilities
User Experience 
BASIC ADVANCED 
Browser Capabilities 
Content
User Experience 
Interactivity 
Design 
BASIC ADVANCED 
Semantics 
Browser Capabilities 
Content 
Accessibility
User Experience 
JavaScript 
CSS 
↖ 
{} 
BASIC ADVANCED 
HTML 
Browser Capabilities 
Text & HTTP 
<> 
¶
HTML
ARIA 
HTML5 
HTML4 
HTML
Browsers ignore 
what they don’t 
understand
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required> 
<em> 
We will only use your email address to respond to your message. 
</em>
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required> 
<em class=“note”> 
We will only use your email address to respond to your message. 
</em>
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required 
aria-describedby=“email-note”> 
<em class=“note” id=“email-note”> 
We will only use your email address to respond to your message. 
</em>
FALLING IN LOVE WITH FORMS 
Pattern 2: Label, Field & Note 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required 
aria-describedby=“email-note”> 
<em class=“note” id=“email-note”> 
We will only use your email address to respond to your message. 
</em> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Rinse & Repeat 
<label for=“subject”>Purpose of Your Message</label> 
<select id="subject" name="subject"> 
<option>Question/Comment</option> 
<option>Article Error</option> 
<option>Website Bug Report</option> 
<option>Ask the Sherpas a question</option> 
</select>
FALLING IN LOVE WITH FORMS 
Rinse & Repeat 
<label for=“message”>Your Message</label> 
<textarea id="message" name="message"></textarea>
FALLING IN LOVE WITH FORMS 
Buttons 
<input type=“submit” value=“Send My Message”>
FALLING IN LOVE WITH FORMS 
Buttons 
<button type=“submit”>Send My Message</button>
HELPFUL HINT 
A button element 
can contain pretty 
much anything 
! (within reason)
FALLING IN LOVE WITH FORMS 
Buttons 
<button type="submit" value=“basic"> 
<h3>Basic Plan</h3> 
<p>You get 20 <abbr title="gigabytes">GB</abbr> of storage 
and a single domain name for <strong>$2.99 
<abbr title=“per month”>/mo</abbr></strong></p> 
</button>
That new email field 
looks cool, can we 
see more of that 
fancy HTML5 stuff?
FALLING IN LOVE WITH FORMS 
Requesting URLs 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
FALLING IN LOVE WITH FORMS 
Requesting URLs 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
FALLING IN LOVE WITH FORMS 
Requesting URLs 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
FALLING IN LOVE WITH FORMS 
Providing hints 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
placeholder=“http://www.yoursite.com/specific-page#anchored-section” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
HELPFUL HINT 
Placeholders are just 
that: placeholders 
for actual content. 
They are not labels!
FALLING IN LOVE WITH FORMS 
Providing hints 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
placeholder=“http://www.yoursite.com/specific-page#anchored-section” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
FALLING IN LOVE WITH FORMS 
Providing hints 
<label for=“url”>URL</label> 
<input type=“url” id=“url” name=“url” required 
aria-describedby=“url-note” 
placeholder=“http://www.yoursite.com/specific-page#anchored-section” 
> 
<em class=“note” id=“url-note”> 
Please provide the URL for the specific page that includes the area 
you want reviewed. 
</em>
FALLING IN LOVE WITH FORMS 
Requesting phone numbers 
<label for="preferred_phone">Preferred Phone</label> 
<input type="tel" id="preferred_phone" name=“preferred_phone” 
placeholder="ex. 123-456-7890” 
>
FALLING IN LOVE WITH FORMS 
Requesting phone numbers 
<label for="preferred_phone">Preferred Phone</label> 
<input type="tel" id="preferred_phone" name=“preferred_phone” 
placeholder="ex. 123-456-7890” 
>
FALLING IN LOVE WITH FORMS 
Requesting numbers 
<label for="test">What is 1 + 1?</label> 
<input id="test" type=“number" name="test">
FALLING IN LOVE WITH FORMS 
Requesting numbers 
<label for="test">What is 1 + 1?</label> 
<input id="test" type=“number" name="test">
FALLING IN LOVE WITH FORMS 
Requesting numbers 
<label for="test">What is 1 + 1?</label> 
<input id="test" type=“number" name=“test” 
pattern=“[0-9]*” 
> 
<!-- Note: pattern ensures Safari Mobile gives a keypad -->
FALLING IN LOVE WITH FORMS 
Requesting numbers 
<label for=“volume">How Loud is Spinal Tap?</label> 
<input id="volume" type=“range" name=“volume” 
min=“0” max=“11” step=“1” 
>
FALLING IN LOVE WITH FORMS 
Requesting numbers 
<label for="test">What is 1 + 1?</label> 
<input id="test" type=“number" name=“test” 
pattern=“[0-9]*” 
min=“0” max=“9” 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="preferred_dates">Preferred Date to Visit</label> 
<input id="preferred_dates" type="date" name=“preferred_dates" 
required 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="preferred_dates">Preferred Date to Visit</label> 
<input id="preferred_dates" type="date" name=“preferred_dates" 
required 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="preferred_dates">Preferred Date to Visit</label> 
<input id="preferred_dates" type="date" name=“preferred_dates" 
required 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="preferred_dates">Preferred Date to Visit</label> 
<input id="preferred_dates" type="date" name=“preferred_dates" 
required 
min=“2014-09-10” max=“2014-12-19” 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="preferred_dates">Preferred Date to Visit</label> 
<input id="preferred_dates" type="date" name=“preferred_dates" 
required 
min=“2014-09-10” max=“2014-12-19” 
>
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="requested_tour_time">Tour Time Requested</label> 
<input id="preferred_dates" type="time" name=“preferred_dates">
FALLING IN LOVE WITH FORMS 
Requesting dates & times 
<label for="requested_tour_time">Tour Time Requested</label> 
<input id="preferred_dates" type="time" name=“preferred_dates">
FALLING IN LOVE WITH FORMS 
Other fun date-related types 
๏ month 
๏ week 
๏ datetime 
๏ datetime-local 
71
FALLING IN LOVE WITH FORMS 
Facilitating search 
<label for="query">Looking for something?</label> 
<input type="search" name="keywords" id="query" value="test"> 
<button type="submit">Search</button>
FALLING IN LOVE WITH FORMS 
Facilitating search 
<label for="query">Looking for something?</label> 
<input type="search" name="keywords" id="query" value="test"> 
<button type="submit">Search</button>
FALLING IN LOVE WITH FORMS 
Mentalism 
<label for="state">State</label> 
<input id="state" name="state" list="states"> 
<datalist id="states"> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</datalist>
FALLING IN LOVE WITH FORMS 
Mentalism 
<label for="state">State</label> 
<input id="state" name="state" list="states"> 
<datalist id="states"> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</datalist>
FALLING IN LOVE WITH FORMS 
Mentalism 
<label for="state">State</label> 
<input id="state" name="state" list="states"> 
<datalist id="states"> 
<option value="AL">Alabama</option> 
<option value="AK">Alaska</option> 
<option value="AZ">Arizona</option> 
<option value="AR">Arkansas</option> 
<!-- options continue --> 
</datalist>
FALLING IN LOVE WITH FORMS 
Mentalism 
<label for="state">State</label> 
<input id="state" name="state" list="states"> 
<datalist id="states"> 
<option value="AL">Alabama</option> 
<option value="AK">Alaska</option> 
<option value="AZ">Arizona</option> 
<option value="AR">Arkansas</option> 
<!-- options continue --> 
</datalist>
FALLING IN LOVE WITH FORMS 
Mentalism: smart fallbacks 
<label for=“state" id=“state_label”>State</label> 
<datalist id=“states”> 
! 
<select name=“state” aria-labelledby=“state_label”> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</select> 
! 
If other, please specify 
! 
</datalist> 
<input id="state" name="state" list="states"> 
Based on work by Jeremy Keith: http://adactio.com/journal/4272
FALLING IN LOVE WITH FORMS 
Mentalism: smart fallbacks 
<label for=“state" id=“state_label”>State</label> 
<datalist id=“states”> 
! 
<select name=“state” aria-labelledby=“state_label”> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</select> 
! 
If other, please specify 
! 
</datalist> 
<input id="state" name="state" list="states"> 
Based on work by Jeremy Keith: http://adactio.com/journal/4272
FALLING IN LOVE WITH FORMS 
Mentalism: smart fallbacks 
<label for=“state" id=“state_label”>State</label> 
<datalist id=“states”> 
! 
<select name=“state” aria-labelledby=“state_label”> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</select> 
! 
If other, please specify 
! 
</datalist> 
<input id="state" name="state" list="states"> 
Based on work by Jeremy Keith: http://adactio.com/journal/4272
FALLING IN LOVE WITH FORMS 
Mentalism: smart fallbacks 
<label for=“state" id=“state_label”>State</label> 
<datalist id=“states”> 
! 
<select name=“state” aria-labelledby=“state_label”> 
<option>Alabama</option> 
<option>Alaska</option> 
<option>Arizona</option> 
<option>Arkansas</option> 
<!-- options continue --> 
</select> 
! 
If other, please specify 
! 
</datalist> 
<input id="state" name="state" list="states"> 
Based on work by Jeremy Keith: http://adactio.com/journal/4272
Ok, I get it: forms in 
HTML5 are awesome. 
But how should we 
organize our forms?
FALLING IN LOVE WITH FORMS 
Do we divide it up? 
<div> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</div>
FALLING IN LOVE WITH FORMS 
Do paragraphs make sense? 
<p> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</p>
FALLING IN LOVE WITH FORMS 
Is it a list of questions? 
<ol> 
<li> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</li> 
</ol>
FALLING IN LOVE WITH FORMS 
Is it a list of questions? 
form ol, 
form ul { 
list-style: none; 
margin: 0; 
padding: 0; 
}
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“text”> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“form-control form-control--text”> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“text”> 
<label for=“full_name”>Your Name</label> 
<input id=“full_name” name=“full_name” required> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“email”> 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required 
aria-describedby=“email-note”> 
<em class=“note” id=“email-note”> 
We will only use your email address to respond 
to your message. 
</em> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“select”> 
<label for=“subject”>Purpose of Your Message</label> 
<select id="subject" name="subject"> 
<option>Question/Comment</option> 
<option>Article Error</option> 
<option>Website Bug Report</option> 
<option>Ask the Sherpas a question</option> 
</select> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“textarea”> 
<label for=“message”>Your Message</label> 
<textarea id="message" name=“message"></textarea> 
</li>
FALLING IN LOVE WITH FORMS 
Control Group Classification 
<li class=“buttons”> 
<button type=“submit”>Send My Message</button> 
</li>
Makes sense. 
What about more 
complex form 
constructs?
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
<input type=“checkbox” name=“accept_terms” value=“yes”> 
I agree to the <a href=“/terms”>Terms of Use</a>
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
<input type=“checkbox” name=“accept_terms” value=“yes” 
id=“terms”> 
<label for=“terms”> 
I agree to the <a href=“/terms”>Terms of Use</a> 
</label>
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
<label> 
<input type=“checkbox” name=“accept_terms” value=“yes”> 
I agree to the <a href=“/terms”>Terms of Use</a> 
</label>
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
input { 
/* Styles for most normal input types */ 
} 
! 
label input { 
/* Styles for checkbox and radio controls */ 
}
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
<label for=“terms”> 
<input type=“checkbox” name=“accept_terms” value=“yes” 
id=“terms”> 
I agree to the <a href=“/terms”>Terms of Use</a> 
</label>
FALLING IN LOVE WITH FORMS 
Pattern 3: Confirmations 
<li class=“confirm”> 
<label for=“terms”> 
<input type=“checkbox” name=“accept_terms” value=“yes” 
id=“terms”> 
I agree to the <a href=“/terms”>Terms of Use</a> 
</label> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
Tablets (8 available) 
! 
<label for="asus-nexus-7"> 
<input type="checkbox" name="device[]" id=“asus-nexus-7"> 
Asus Nexus 7 
</label> 
! 
<!-- more options -->
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
Tablets (8 available) 
! 
<ul> 
<li><!-- Asus Nexus 7 --></li> 
<!-- more options --> 
</ul>
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
<fieldset> 
<legend>Tablets (8 available)</legend> 
<ul> 
<li><!-- Asus Nexus 7 --></li> 
<!-- more options --> 
</ul> 
</fieldset>
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
<fieldset> 
<legend>Tablets <em>(8 available)</em></legend> 
<ul> 
<li><!-- Asus Nexus 7 --></li> 
<!-- more options --> 
</ul> 
</fieldset>
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
<fieldset> 
<legend>Tablets <em>(8 available)</em></legend> 
<ul> 
<li><!-- Asus Nexus 7 --></li> 
<!-- more options --> 
</ul> 
</fieldset> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
<li class=“grouped checkboxes”> 
<fieldset> 
<legend>Tablets <em>(8 available)</em></legend> 
<ul> 
<li><!-- Asus Nexus 7 --></li> 
<!-- more options --> 
</ul> 
</fieldset> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
form .grouped ul li { 
float: left; 
width: 50%; 
}
FALLING IN LOVE WITH FORMS 
Pattern 4: Multiple Choice 
@media only screen and (min-width:30em) { 
! 
form .grouped ul li { 
float: left; 
width: 50%; 
YMQMV 
} 
! 
}
FALLING IN LOVE WITH FORMS 
Pattern 5: Related Entry 
Requested Day and Time 
! 
<label for="requested_date">Requested Day</label> 
<select id=“requested_date" name=“requested_date" required=“”> 
<!-- options —> 
</select> 
<label for="requested_time">Requested Time</label> 
<select id="requested_time" name=“requested_time" required=""> 
<!-- options —> 
</select>
FALLING IN LOVE WITH FORMS 
Pattern 5: Related Entry 
<fieldset> 
<legend>Requested Day and Time</legend> 
! 
<label for="requested_date">Requested Day</label> 
<select id=“requested_date" name="requested_date" 
required=“”><!-- options --></select> 
<label for="requested_time">Requested Time</label> 
<select id="requested_time" name=“requested_time" required=""> 
<!-- options --></select> 
! 
</fieldset>
FALLING IN LOVE WITH FORMS 
Pattern 5: Related Entry 
<li class=“grouped date-time-selects”> 
<fieldset> 
<legend>Requested Day and Time</legend> 
! 
<label for="requested_date">Requested Day</label> 
<select id=“requested_date" name="requested_date" 
required=“”><!-- options --></select> 
<!-- continued… --> 
! 
</fieldset> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 5: Related Entry 
/* Hide the labels in an accessible way */ 
form .date-time-selects label { 
position: absolute; 
height: 1px; 
width: 1px; 
overflow: hidden; 
clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */ 
clip: rect(1px, 1px, 1px, 1px); 
}
FALLING IN LOVE WITH FORMS 
Pattern 6: Multiple Labels 
<li class=“grouped year-month-day-selects”> 
<fieldset> 
<legend>Select a date</legend> 
! 
<label for="month">Month</label> 
<select name="month" id=“month”><!-- options --> </select> 
! 
<!-- continued… --> 
! 
</fieldset> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 6: Multiple Labels 
<li class=“grouped year-month-day-selects”> 
<fieldset> 
<legend>Select a date</legend> 
! 
<label for="month">Month</label> 
<select name="month" id=“month”><!-- options --> </select> 
! 
<!-- continued… --> 
! 
</fieldset> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 6: Multiple Labels 
<li class=“grouped year-month-day-selects”> 
<fieldset> 
<legend>Select a date</legend> 
! 
<label for="month">Month</label> 
<select name="month" id=“month”><!-- options --> </select> 
! 
<!-- continued… --> 
! 
</fieldset> 
</li> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Pattern 6: Multiple Labels 
<li class=“grouped year-month-day-selects”> 
<fieldset> 
<legend id=“select_date”>Select a date</legend> 
! 
<label for=“month" id=“month_label”>Month</label> 
<select name="month" id=“month” 
aria-labelledby=“select_date month_label” 
><!-- options --> </select> 
! 
<!-- continued… --> 
</fieldset> 
</li>
FALLING IN LOVE WITH FORMS 
Pattern 6: Multiple Labels 
<li class=“grouped year-month-day-selects”> 
<fieldset> 
<legend id=“select_date”>Select a date</legend> 
! 
<label for=“month" id=“month_label”>Month</label> 
<select name="month" id=“month” 
aria-labelledby=“select_date month_label” 
><!-- options --> </select> 
! 
<!-- continued… --> 
</fieldset> 
</li> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<td></td> 
<th>Poor</th> 
<!-- Headings continue --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>How would you rate your experience with Foo Bar Title 
from initial contact to closing?</th> 
<td> 
<input type="radio" name="experience" value=“1"> 
</td> 
<!-- etc. --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<td></td> 
<th>Poor</th> 
<!-- Headings continue --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>How would you rate your experience with Foo Bar Title 
from initial contact to closing?</th> 
<td> 
<input type="radio" name="experience" value=“1"> 
</td> 
<!-- etc. --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<td></td> 
<th>Poor</th> 
<!-- Headings continue --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>How would you rate your experience with Foo Bar Title 
from initial contact to closing?</th> 
<td> 
<input type="radio" name="experience" value=“1"> 
</td> 
<!-- etc. --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<td></td> 
<th id=“value-1”>Poor</th> 
<!-- Headings continue --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>How would you rate your experience with Foo Bar Title 
from initial contact to closing?</th> 
<td> 
<input … aria-labelledby=“value-1”> 
</td> 
<!-- etc. --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<td></td> 
<th id=“value-1”>Poor</th> 
<!-- Headings continue --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th id=“experience”>How would you rate your experience 
with Foo Bar Title from initial contact to closing?</th> 
<td> 
<input … aria-labelledby=“experience value-1”> 
</td> 
<!-- etc. --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<!-- Headings before --> 
<th id=“value-3”>Good</th> 
<!-- Headings after --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th id=“experience”>How would you rate your experience 
with Foo Bar Title from initial contact to closing?</th> 
<!-- values 1 & 2 --> 
<td><input … aria-labelledby=“experience value-3”></td> 
<!-- values 4 & 5 --> 
</tr> 
</tbody> 
</table>
FALLING IN LOVE WITH FORMS 
Pattern 7: The dreaded table 
<table> 
<thead> 
<tr> 
<!-- Headings before --> 
<th id=“value-3”>Good</th> 
<!-- Headings after --> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th id=“experience”>How would you rate your experience 
with Foo Bar Title from initial contact to closing?</th> 
<!-- values 1 & 2 --> 
<td><input … aria-labelledby=“experience value-3”></td> 
<!-- values 4 & 5 --> 
</tr> 
</tbody> 
</table> 
Screen Reader: Chrome Vox
HELPFUL HINT 
Focus on 
making the form 
read naturally 
and easily.
HELPFUL HINT 
You can’t always 
make an interface 
perfect, but you can 
make it usable.
Ok, I think I’m 
getting it, but 
small screens still 
scare me a little.
Let’s touch 
on that a little. 
(get it?!)
FALLING IN LOVE WITH FORMS 
Tap-friendly hit targets 
.confirm label, 
.radios label, 
.checkboxes label { 
margin: -1em 0; 
padding: 1em 0; 
}
FALLING IN LOVE WITH FORMS 
Tap-friendly hit targets 
.confirm label, 
.radios label, 
.checkboxes label { 
margin: -1em 0; 
padding: 1em 0; 
}
FALLING IN LOVE WITH FORMS 
Making old Safari play nice 
label { 
cursor: pointer; 
}
FALLING IN LOVE WITH FORMS 
No layout before its time 
.form-control { 
clear: both; 
} 
.form-control label, 
.form-control input { 
float: left; 
width: 34%; 
} 
.form-control input { 
width: 63%; 
}
FALLING IN LOVE WITH FORMS 
No layout before its time 
.form-control label, 
.form-control input { 
display: block; 
margin-bottom: .328em; 
}
FALLING IN LOVE WITH FORMS 
No layout before its time 
.form-control label, 
.form-control input { 
display: block; 
margin-bottom: .328em; 
} 
! 
@media only screen and (min-width: 60em) { 
/* Side by Side layout */ 
} 
YMQMV
FALLING IN LOVE WITH FORMS 
No layout before its time 
@media only screen and (min-width:30em) { 
! 
form .grouped ul li { 
float: left; 
width: 50%; 
YMQMV 
} 
! 
}
Makes sense. 
Could we talk a bit 
about validation?
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p>Fields marked with a * are required.</p> 
<p> 
<label for=“first_name"> 
First Name <abbr title=“required">*</abbr> 
</label> 
<input id="first_name" name="first_name" required> 
</p>
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p>Fields marked with a * are required.</p> 
<p> 
<label for=“first_name"> 
First Name <abbr title=“required">*</abbr> 
</label> 
<input id="first_name" name="first_name" required> 
</p>
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p>Fields marked with a * are required.</p> 
<p> 
<label for=“first_name"> 
First Name <abbr title=“required">*</abbr> 
</label> 
<input id="first_name" name="first_name" required> 
</p> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p>Fields marked with a * are 
<strong id="required">required</strong>.</p> 
<p> 
<label for=“first_name"> 
First Name 
<abbr title=“required” aria-labelledby=“required”>*</abbr> 
</label> 
<input id="first_name" name="first_name" required> 
</p>
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p>Fields marked with a * are 
<strong id="required">required</strong>.</p> 
<p> 
<label for=“first_name"> 
First Name 
<abbr title=“required” aria-labelledby=“required”>*</abbr> 
</label> 
<input id="first_name" name="first_name" required> 
</p> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p tabindex="0">Fields marked with a * are required.</p> 
<p> 
<label for=“first_name"> 
First Name <abbr title=“required">*</abbr> 
</label> 
<input id="first_name" name="first_name" required 
aria-required="true"> 
</p>
FALLING IN LOVE WITH FORMS 
Requiring a field 
<p tabindex="0">Fields marked with a * are required.</p> 
<p> 
<label for=“first_name"> 
First Name <abbr title=“required">*</abbr> 
</label> 
<input id="first_name" name="first_name" required 
aria-required="true"> 
</p> 
Screen Reader: Chrome Vox
HELPFUL HINT 
Focus on 
making the form 
read naturally 
and easily.
FALLING IN LOVE WITH FORMS 
Native validation 
<label for=“email”>Your Email</label> 
<input type=“email” id=“email” name=“email” required> 
We will only use your email address to respond to your message. 
!
FALLING IN LOVE WITH FORMS 
Non-native format validation 
<label for="test">What is 1 + 1?</label> 
<input id="test" type=“number" name=“test” 
pattern=“[0-9]*” 
>
FALLING IN LOVE WITH FORMS 
Non-native format validation 
<label for=“test">Enter three numbers 
followed by two letters</label> 
<input id="test" name=“test” 
placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
>
FALLING IN LOVE WITH FORMS 
Non-native format validation 
<label for=“test">Enter three numbers 
followed by two letters</label> 
<input id="test" name=“test” 
placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
>
FALLING IN LOVE WITH FORMS 
Custom error messages
FALLING IN LOVE WITH FORMS 
Custom error messages 
<label for=“test">Enter three numbers 
followed by two letters</label> 
<input id="test" name=“test” 
placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
title=“Whoops, that’s not right” 
>
FALLING IN LOVE WITH FORMS 
Custom error messages 
<label for=“test">Enter three numbers 
followed by two letters</label> 
<input id="test" name=“test” 
placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
title=“Whoops, that’s not right” 
>
FALLING IN LOVE WITH FORMS 
Custom error messages 
var field = document.getElementById(‘test’); 
field.setCustomValidity( ‘My custom error message’ );
FALLING IN LOVE WITH FORMS 
Custom error messages 
var field = document.getElementById(‘test’); 
field.setCustomValidity( ‘My custom error message’ );
github.com/easy-designs/jquery.easy-validation.js
A dead simple 
polyfill for HTML5 
forms & custom 
validation messages.
FALLING IN LOVE WITH FORMS 
Custom error messages 
<label for=“test">Enter three numbers 
followed by two letters</label> 
<input id="test" name=“test” 
placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
data-validation-error-empty=“You forgot to enter text here” 
data-validation-error-invalid=“Whoops, that’s not right” 
>
FALLING IN LOVE WITH FORMS 
Custom error messages 
<form … 
data-validation-error-empty=“You forgot to enter text here” 
data-validation-error-invalid=“Whoops, that’s not right” 
> 
! 
<label for=“test">Enter three numbers followed by two letters 
</label> 
<input id="test" name=“test” placeholder=“e.g. 123ab” 
pattern=“d{3}[a-zA-Z]{2}” 
data-validation-error-invalid=“Why not try 111aa?” 
> 
! 
</form>
HELPFUL HINT 
Don’t forget about 
server-side 
validation either.
FALLING IN LOVE WITH FORMS 
Provide a list of errors 
retreats4geeks.com/contact
FALLING IN LOVE WITH FORMS 
Provide a list of errors 
<div role=“alert”> 
<p>There were errors with your form submission:</p> 
<ol> 
<li><a href="#message">Message</a> is a required field</li> 
<li><a href="#name">Name</a> is a required field</li> 
<li><a href="#email">Email</a> is a required field</li> 
</ol> 
</div>
FALLING IN LOVE WITH FORMS 
Provide a list of errors 
<div role=“alert”> 
<p>There were errors with your form submission:</p> 
<ol> 
<li><a href="#message">Message</a> is a required field</li> 
<li><a href="#name">Name</a> is a required field</li> 
<li><a href="#email">Email</a> is a required field</li> 
</ol> 
</div> 
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS 
Provide easy access to them 
<div role=“alert”> 
<p>There were errors with your form submission:</p> 
<ol> 
<li><a href="#message">Message</a> is a required field</li> 
<li><a href="#name">Name</a> is a required field</li> 
<li><a href="#email">Email</a> is a required field</li> 
</ol> 
</div>
FALLING IN LOVE WITH FORMS 
Provide easy access to them 
<label for=“message”> 
Message <abbr title=“required">*</abbr> 
</label> 
<textarea id="message" name="message" required></textarea>
FALLING IN LOVE WITH FORMS 
Provide field-level help 
<li class="text validation-error"> 
<label for=“email">Email <abbr title=“required">*</abbr> 
</label> 
<input id="email" type="email" name="email" 
required=“" aria-required=“true” 
aria-invalid="true" 
aria-describedby=“email-error" 
> 
<strong id="email-error" class=“validation-error-message"> 
Your email address is required</strong> 
</li>
FALLING IN LOVE WITH FORMS 
Provide field-level help 
li.validation-error { 
color: #922026; 
} 
! 
li.validation-error input, 
li.validation-error textarea, 
li.validation-error select { 
border-color: #922026; 
}
FALLING IN LOVE WITH FORMS 
Provide field-level help 
.validation-error label::before { 
content: "x "; 
font-family: Verdana, sans-serif; 
speak: none; /* The future! */ 
}
FALLING IN LOVE WITH FORMS 
Provide field-level help 
.validation-error label::before { 
content: "x "; 
font-family: Verdana, sans-serif; 
speak: none; /* The future! */ 
} 
Screen Reader: Chrome Vox
Forms suck.
can 
a lot less 
Forms suck.
Forms can be… 
easy to build 
predictable 
effortless to use 
and accessible
Thank you! 
! 
@AaronGustafson 
aaron-gustafson.com 
slideshare.net/AaronGustafson

More Related Content

What's hot

Chapter 9 - Web Design
Chapter 9 - Web DesignChapter 9 - Web Design
Chapter 9 - Web Designtclanton4
 
Chapter 8 - Web Design
Chapter 8 - Web DesignChapter 8 - Web Design
Chapter 8 - Web Designtclanton4
 
Android Develpment vol. 3, MFF UK, 2015
Android Develpment vol. 3, MFF UK, 2015Android Develpment vol. 3, MFF UK, 2015
Android Develpment vol. 3, MFF UK, 2015Tomáš Kypta
 
Salesforce access
Salesforce accessSalesforce access
Salesforce accessJay Petel
 
Wireframing recitation
Wireframing recitationWireframing recitation
Wireframing recitationcarolynzhang
 

What's hot (8)

Learn html5
Learn html5Learn html5
Learn html5
 
Chapter 9 - Web Design
Chapter 9 - Web DesignChapter 9 - Web Design
Chapter 9 - Web Design
 
Chapter 8 - Web Design
Chapter 8 - Web DesignChapter 8 - Web Design
Chapter 8 - Web Design
 
Android Develpment vol. 3, MFF UK, 2015
Android Develpment vol. 3, MFF UK, 2015Android Develpment vol. 3, MFF UK, 2015
Android Develpment vol. 3, MFF UK, 2015
 
Salesforce access
Salesforce accessSalesforce access
Salesforce access
 
Gallery
GalleryGallery
Gallery
 
Wireframing recitation
Wireframing recitationWireframing recitation
Wireframing recitation
 
Tags
TagsTags
Tags
 

Similar to Falling in Love with Forms [Accessibility Summit 2014]

Falling in Love with Forms [BDConf 2014]
Falling in Love with Forms [BDConf 2014]Falling in Love with Forms [BDConf 2014]
Falling in Love with Forms [BDConf 2014]Aaron Gustafson
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Aaron Gustafson
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Formstina1357
 
Fork forms library
Fork forms libraryFork forms library
Fork forms libraryYoniWeb
 
Make Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingMake Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingViget Labs
 
Keywords seo-strategies
Keywords seo-strategiesKeywords seo-strategies
Keywords seo-strategiesDebbie Morris
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processorsdhoman
 
Make Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingMake Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingPatrick Reagan
 
Validate Email with JavaScript
Validate Email with JavaScriptValidate Email with JavaScript
Validate Email with JavaScriptEmailConcern
 
Learning To Love Forms [The Ajax Experience East 2007]
Learning To Love Forms [The Ajax Experience East 2007]Learning To Love Forms [The Ajax Experience East 2007]
Learning To Love Forms [The Ajax Experience East 2007]Aaron Gustafson
 
Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Shashikant Bhongale
 
Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceDesigned for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceLitmus
 
Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)Aaron Gustafson
 

Similar to Falling in Love with Forms [Accessibility Summit 2014] (15)

Falling in Love with Forms [BDConf 2014]
Falling in Love with Forms [BDConf 2014]Falling in Love with Forms [BDConf 2014]
Falling in Love with Forms [BDConf 2014]
 
Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]Falling in Love with Forms [Øredev 2015]
Falling in Love with Forms [Øredev 2015]
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 
Fork forms library
Fork forms libraryFork forms library
Fork forms library
 
Make Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingMake Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance Testing
 
Keywords seo-strategies
Keywords seo-strategiesKeywords seo-strategies
Keywords seo-strategies
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processor
 
Handout7 html forms
Handout7 html formsHandout7 html forms
Handout7 html forms
 
Make Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance TestingMake Everyone a Tester: Natural Language Acceptance Testing
Make Everyone a Tester: Natural Language Acceptance Testing
 
Validate Email with JavaScript
Validate Email with JavaScriptValidate Email with JavaScript
Validate Email with JavaScript
 
Tercer trabajo de drapi 02
Tercer trabajo de drapi 02Tercer trabajo de drapi 02
Tercer trabajo de drapi 02
 
Learning To Love Forms [The Ajax Experience East 2007]
Learning To Love Forms [The Ajax Experience East 2007]Learning To Love Forms [The Ajax Experience East 2007]
Learning To Love Forms [The Ajax Experience East 2007]
 
Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16
 
Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceDesigned for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email Experience
 
Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)Learning To Love Forms (The Ajax Experience West 2007)
Learning To Love Forms (The Ajax Experience West 2007)
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Recently uploaded (20)

Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

Falling in Love with Forms [Accessibility Summit 2014]

  • 1. FALLING IN LOVE WITH FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  • 3. They are incredibly tedious to create.
  • 4. They are undeniably annoying to fill in.
  • 5. They can be frustrating to test.
  • 9. don’t have to Forms suck.
  • 10. can a lot less Forms suck.
  • 11. Forms can be… easy to build predictable effortless to use and accessible
  • 12. It’s all in how you look at them.
  • 13. HELPFUL HINT Break large, complex forms into smaller, simpler, reusable patterns
  • 14. How about a common example? Let’s look at a contact form.
  • 17. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input type=“text” name=“full_name”>
  • 18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>
  • 19. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”/>
  • 20. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>
  • 21. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label>Your Name</label> <input name=“full_name”>
  • 22. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
  • 23. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
  • 24. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.
  • 25. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message. !
  • 26. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message. !
  • 27. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message. !
  • 28. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message. !
  • 31. User Experience BASIC ADVANCED Browser Capabilities
  • 32. User Experience BASIC ADVANCED Browser Capabilities Content
  • 33. User Experience Interactivity Design BASIC ADVANCED Semantics Browser Capabilities Content Accessibility
  • 34. User Experience JavaScript CSS ↖ {} BASIC ADVANCED HTML Browser Capabilities Text & HTTP <> ¶
  • 35. HTML
  • 37. Browsers ignore what they don’t understand
  • 38. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em> We will only use your email address to respond to your message. </em>
  • 39. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em class=“note”> We will only use your email address to respond to your message. </em>
  • 40. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em>
  • 41. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em> Screen Reader: Chrome Vox
  • 42. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“subject”>Purpose of Your Message</label> <select id="subject" name="subject"> <option>Question/Comment</option> <option>Article Error</option> <option>Website Bug Report</option> <option>Ask the Sherpas a question</option> </select>
  • 43. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
  • 44. FALLING IN LOVE WITH FORMS Buttons <input type=“submit” value=“Send My Message”>
  • 45. FALLING IN LOVE WITH FORMS Buttons <button type=“submit”>Send My Message</button>
  • 46. HELPFUL HINT A button element can contain pretty much anything ! (within reason)
  • 47. FALLING IN LOVE WITH FORMS Buttons <button type="submit" value=“basic"> <h3>Basic Plan</h3> <p>You get 20 <abbr title="gigabytes">GB</abbr> of storage and a single domain name for <strong>$2.99 <abbr title=“per month”>/mo</abbr></strong></p> </button>
  • 48. That new email field looks cool, can we see more of that fancy HTML5 stuff?
  • 49. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 50. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 51. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 52. FALLING IN LOVE WITH FORMS Providing hints <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 53. HELPFUL HINT Placeholders are just that: placeholders for actual content. They are not labels!
  • 54. FALLING IN LOVE WITH FORMS Providing hints <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 55. FALLING IN LOVE WITH FORMS Providing hints <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
  • 56. FALLING IN LOVE WITH FORMS Requesting phone numbers <label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >
  • 57. FALLING IN LOVE WITH FORMS Requesting phone numbers <label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >
  • 58. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  • 59. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  • 60. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” > <!-- Note: pattern ensures Safari Mobile gives a keypad -->
  • 61. FALLING IN LOVE WITH FORMS Requesting numbers <label for=“volume">How Loud is Spinal Tap?</label> <input id="volume" type=“range" name=“volume” min=“0” max=“11” step=“1” >
  • 62. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” min=“0” max=“9” >
  • 63. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
  • 64. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
  • 65. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
  • 66. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required min=“2014-09-10” max=“2014-12-19” >
  • 67. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required min=“2014-09-10” max=“2014-12-19” >
  • 68. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
  • 69. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
  • 70. FALLING IN LOVE WITH FORMS Other fun date-related types ๏ month ๏ week ๏ datetime ๏ datetime-local 71
  • 71. FALLING IN LOVE WITH FORMS Facilitating search <label for="query">Looking for something?</label> <input type="search" name="keywords" id="query" value="test"> <button type="submit">Search</button>
  • 72. FALLING IN LOVE WITH FORMS Facilitating search <label for="query">Looking for something?</label> <input type="search" name="keywords" id="query" value="test"> <button type="submit">Search</button>
  • 73. FALLING IN LOVE WITH FORMS Mentalism <label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </datalist>
  • 74. FALLING IN LOVE WITH FORMS Mentalism <label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </datalist>
  • 75. FALLING IN LOVE WITH FORMS Mentalism <label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <!-- options continue --> </datalist>
  • 76. FALLING IN LOVE WITH FORMS Mentalism <label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <!-- options continue --> </datalist>
  • 77. FALLING IN LOVE WITH FORMS Mentalism: smart fallbacks <label for=“state" id=“state_label”>State</label> <datalist id=“states”> ! <select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select> ! If other, please specify ! </datalist> <input id="state" name="state" list="states"> Based on work by Jeremy Keith: http://adactio.com/journal/4272
  • 78. FALLING IN LOVE WITH FORMS Mentalism: smart fallbacks <label for=“state" id=“state_label”>State</label> <datalist id=“states”> ! <select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select> ! If other, please specify ! </datalist> <input id="state" name="state" list="states"> Based on work by Jeremy Keith: http://adactio.com/journal/4272
  • 79. FALLING IN LOVE WITH FORMS Mentalism: smart fallbacks <label for=“state" id=“state_label”>State</label> <datalist id=“states”> ! <select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select> ! If other, please specify ! </datalist> <input id="state" name="state" list="states"> Based on work by Jeremy Keith: http://adactio.com/journal/4272
  • 80. FALLING IN LOVE WITH FORMS Mentalism: smart fallbacks <label for=“state" id=“state_label”>State</label> <datalist id=“states”> ! <select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select> ! If other, please specify ! </datalist> <input id="state" name="state" list="states"> Based on work by Jeremy Keith: http://adactio.com/journal/4272
  • 81. Ok, I get it: forms in HTML5 are awesome. But how should we organize our forms?
  • 82. FALLING IN LOVE WITH FORMS Do we divide it up? <div> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </div>
  • 83. FALLING IN LOVE WITH FORMS Do paragraphs make sense? <p> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </p>
  • 84. FALLING IN LOVE WITH FORMS Is it a list of questions? <ol> <li> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li> </ol>
  • 85. FALLING IN LOVE WITH FORMS Is it a list of questions? form ol, form ul { list-style: none; margin: 0; padding: 0; }
  • 86. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
  • 87. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“form-control form-control--text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
  • 88. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
  • 89. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“email”> <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em> </li>
  • 90. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“select”> <label for=“subject”>Purpose of Your Message</label> <select id="subject" name="subject"> <option>Question/Comment</option> <option>Article Error</option> <option>Website Bug Report</option> <option>Ask the Sherpas a question</option> </select> </li>
  • 91. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
  • 92. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
  • 93. Makes sense. What about more complex form constructs?
  • 94. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“accept_terms” value=“yes”> I agree to the <a href=“/terms”>Terms of Use</a>
  • 95. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“accept_terms” value=“yes” id=“terms”> <label for=“terms”> I agree to the <a href=“/terms”>Terms of Use</a> </label>
  • 96. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label> <input type=“checkbox” name=“accept_terms” value=“yes”> I agree to the <a href=“/terms”>Terms of Use</a> </label>
  • 97. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations input { /* Styles for most normal input types */ } ! label input { /* Styles for checkbox and radio controls */ }
  • 98. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label for=“terms”> <input type=“checkbox” name=“accept_terms” value=“yes” id=“terms”> I agree to the <a href=“/terms”>Terms of Use</a> </label>
  • 99. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <li class=“confirm”> <label for=“terms”> <input type=“checkbox” name=“accept_terms” value=“yes” id=“terms”> I agree to the <a href=“/terms”>Terms of Use</a> </label> </li>
  • 100. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (8 available) ! <label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label> ! <!-- more options -->
  • 101. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (8 available) ! <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>
  • 102. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <fieldset> <legend>Tablets (8 available)</legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
  • 103. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
  • 104. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> Screen Reader: Chrome Vox
  • 105. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
  • 106. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice form .grouped ul li { float: left; width: 50%; }
  • 107. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice @media only screen and (min-width:30em) { ! form .grouped ul li { float: left; width: 50%; YMQMV } ! }
  • 108. FALLING IN LOVE WITH FORMS Pattern 5: Related Entry Requested Day and Time ! <label for="requested_date">Requested Day</label> <select id=“requested_date" name=“requested_date" required=“”> <!-- options —> </select> <label for="requested_time">Requested Time</label> <select id="requested_time" name=“requested_time" required=""> <!-- options —> </select>
  • 109. FALLING IN LOVE WITH FORMS Pattern 5: Related Entry <fieldset> <legend>Requested Day and Time</legend> ! <label for="requested_date">Requested Day</label> <select id=“requested_date" name="requested_date" required=“”><!-- options --></select> <label for="requested_time">Requested Time</label> <select id="requested_time" name=“requested_time" required=""> <!-- options --></select> ! </fieldset>
  • 110. FALLING IN LOVE WITH FORMS Pattern 5: Related Entry <li class=“grouped date-time-selects”> <fieldset> <legend>Requested Day and Time</legend> ! <label for="requested_date">Requested Day</label> <select id=“requested_date" name="requested_date" required=“”><!-- options --></select> <!-- continued… --> ! </fieldset> </li>
  • 111. FALLING IN LOVE WITH FORMS Pattern 5: Related Entry /* Hide the labels in an accessible way */ form .date-time-selects label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */ clip: rect(1px, 1px, 1px, 1px); }
  • 112. FALLING IN LOVE WITH FORMS Pattern 6: Multiple Labels <li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend> ! <label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select> ! <!-- continued… --> ! </fieldset> </li>
  • 113. FALLING IN LOVE WITH FORMS Pattern 6: Multiple Labels <li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend> ! <label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select> ! <!-- continued… --> ! </fieldset> </li>
  • 114. FALLING IN LOVE WITH FORMS Pattern 6: Multiple Labels <li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend> ! <label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select> ! <!-- continued… --> ! </fieldset> </li> Screen Reader: Chrome Vox
  • 115. FALLING IN LOVE WITH FORMS Pattern 6: Multiple Labels <li class=“grouped year-month-day-selects”> <fieldset> <legend id=“select_date”>Select a date</legend> ! <label for=“month" id=“month_label”>Month</label> <select name="month" id=“month” aria-labelledby=“select_date month_label” ><!-- options --> </select> ! <!-- continued… --> </fieldset> </li>
  • 116. FALLING IN LOVE WITH FORMS Pattern 6: Multiple Labels <li class=“grouped year-month-day-selects”> <fieldset> <legend id=“select_date”>Select a date</legend> ! <label for=“month" id=“month_label”>Month</label> <select name="month" id=“month” aria-labelledby=“select_date month_label” ><!-- options --> </select> ! <!-- continued… --> </fieldset> </li> Screen Reader: Chrome Vox
  • 117. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table
  • 118. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
  • 119. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
  • 120. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
  • 121. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
  • 122. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“experience value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
  • 123. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table>
  • 124. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table <table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table> Screen Reader: Chrome Vox
  • 125. HELPFUL HINT Focus on making the form read naturally and easily.
  • 126. HELPFUL HINT You can’t always make an interface perfect, but you can make it usable.
  • 127. Ok, I think I’m getting it, but small screens still scare me a little.
  • 128. Let’s touch on that a little. (get it?!)
  • 129. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  • 130. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  • 131. FALLING IN LOVE WITH FORMS Making old Safari play nice label { cursor: pointer; }
  • 132. FALLING IN LOVE WITH FORMS No layout before its time .form-control { clear: both; } .form-control label, .form-control input { float: left; width: 34%; } .form-control input { width: 63%; }
  • 133. FALLING IN LOVE WITH FORMS No layout before its time .form-control label, .form-control input { display: block; margin-bottom: .328em; }
  • 134. FALLING IN LOVE WITH FORMS No layout before its time .form-control label, .form-control input { display: block; margin-bottom: .328em; } ! @media only screen and (min-width: 60em) { /* Side by Side layout */ } YMQMV
  • 135. FALLING IN LOVE WITH FORMS No layout before its time @media only screen and (min-width:30em) { ! form .grouped ul li { float: left; width: 50%; YMQMV } ! }
  • 136. Makes sense. Could we talk a bit about validation?
  • 137. FALLING IN LOVE WITH FORMS Requiring a field <p>Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required> </p>
  • 138. FALLING IN LOVE WITH FORMS Requiring a field <p>Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required> </p>
  • 139. FALLING IN LOVE WITH FORMS Requiring a field <p>Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required> </p> Screen Reader: Chrome Vox
  • 140. FALLING IN LOVE WITH FORMS Requiring a field <p>Fields marked with a * are <strong id="required">required</strong>.</p> <p> <label for=“first_name"> First Name <abbr title=“required” aria-labelledby=“required”>*</abbr> </label> <input id="first_name" name="first_name" required> </p>
  • 141. FALLING IN LOVE WITH FORMS Requiring a field <p>Fields marked with a * are <strong id="required">required</strong>.</p> <p> <label for=“first_name"> First Name <abbr title=“required” aria-labelledby=“required”>*</abbr> </label> <input id="first_name" name="first_name" required> </p> Screen Reader: Chrome Vox
  • 142. FALLING IN LOVE WITH FORMS Requiring a field <p tabindex="0">Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required aria-required="true"> </p>
  • 143. FALLING IN LOVE WITH FORMS Requiring a field <p tabindex="0">Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required aria-required="true"> </p> Screen Reader: Chrome Vox
  • 144. HELPFUL HINT Focus on making the form read naturally and easily.
  • 145. FALLING IN LOVE WITH FORMS Native validation <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message. !
  • 146. FALLING IN LOVE WITH FORMS Non-native format validation <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” >
  • 147. FALLING IN LOVE WITH FORMS Non-native format validation <label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” >
  • 148. FALLING IN LOVE WITH FORMS Non-native format validation <label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” >
  • 149. FALLING IN LOVE WITH FORMS Custom error messages
  • 150. FALLING IN LOVE WITH FORMS Custom error messages <label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” title=“Whoops, that’s not right” >
  • 151. FALLING IN LOVE WITH FORMS Custom error messages <label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” title=“Whoops, that’s not right” >
  • 152. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  • 153. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  • 155. A dead simple polyfill for HTML5 forms & custom validation messages.
  • 156. FALLING IN LOVE WITH FORMS Custom error messages <label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” data-validation-error-empty=“You forgot to enter text here” data-validation-error-invalid=“Whoops, that’s not right” >
  • 157. FALLING IN LOVE WITH FORMS Custom error messages <form … data-validation-error-empty=“You forgot to enter text here” data-validation-error-invalid=“Whoops, that’s not right” > ! <label for=“test">Enter three numbers followed by two letters </label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“d{3}[a-zA-Z]{2}” data-validation-error-invalid=“Why not try 111aa?” > ! </form>
  • 158. HELPFUL HINT Don’t forget about server-side validation either.
  • 159. FALLING IN LOVE WITH FORMS Provide a list of errors retreats4geeks.com/contact
  • 160. FALLING IN LOVE WITH FORMS Provide a list of errors <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  • 161. FALLING IN LOVE WITH FORMS Provide a list of errors <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div> Screen Reader: Chrome Vox
  • 162. FALLING IN LOVE WITH FORMS Provide easy access to them <div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  • 163. FALLING IN LOVE WITH FORMS Provide easy access to them <label for=“message”> Message <abbr title=“required">*</abbr> </label> <textarea id="message" name="message" required></textarea>
  • 164. FALLING IN LOVE WITH FORMS Provide field-level help <li class="text validation-error"> <label for=“email">Email <abbr title=“required">*</abbr> </label> <input id="email" type="email" name="email" required=“" aria-required=“true” aria-invalid="true" aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> </li>
  • 165. FALLING IN LOVE WITH FORMS Provide field-level help li.validation-error { color: #922026; } ! li.validation-error input, li.validation-error textarea, li.validation-error select { border-color: #922026; }
  • 166. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
  • 167. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ } Screen Reader: Chrome Vox
  • 169. can a lot less Forms suck.
  • 170. Forms can be… easy to build predictable effortless to use and accessible
  • 171. Thank you! ! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson