SlideShare uma empresa Scribd logo
1 de 151
Baixar para ler 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.
Forms suck.
can
Forms suck.
don’t have to
Forms suck.
can
a lot less
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
Code Examples
http://is.gd/ag_forms
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 1: Label & Field
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
Screen Reader: Narrator (via IE)
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.
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.
Browsers ignore
what they don’t
understand
Progressive
Enhancement
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: NVDA (via Firefox)
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
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
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 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”
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
>
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="requested_tour_time" type="time" name=“requested_tour_time">
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label>
<input id="requested_tour_time" type="time" name=“requested_tour_time">
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: 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
Based on work by Jeremy Keith: http://adactio.com/journal/4272
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">
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=“newsletter” value=“yes”>
Sign me up for this newsletter
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”
id=“newsletter”>
<label for=“newsletter”>Sign me up for this newsletter</label>
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label>
<input type=“checkbox” name=“newsletter” value=“yes”>
Sign me up for this newsletter
</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=“newsletter”>
<input type=“checkbox” name=“newsletter” value=“yes”
id=“newsletter”>
Sign me up for this newsletter
</label>
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<li class=“confirm”>
<label for=“newsletter”>
<input type=“checkbox” name=“newsletter” value=“yes”
id=“newsletter”>
Sign me up for this newsletter
</label>
</li>
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (9 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 (9 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>(9 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: Narrator (via IE)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”>
<fieldset>
<legend>Tablets <em>(9 available)</em></legend>
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
</fieldset>
</li>
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 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: Narrator (via Firefox)
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.
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
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
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”>Your 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: “Please Enter ";
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: NVDA (via IE)
One More Thing…
Falling in Love with Forms [Microsoft Edge Web Summit 2015]
Forms suck.
Forms suck.
can
a lot less
Forms can be…
easy to build
predictable
effortless to use
and accessible
Questions?
Shy? Tweet me at
@AaronGustafson
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

Mais conteúdo relacionado

Mais procurados

Everything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail RenderingEverything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail RenderingLitmus
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a ProLitmus
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a ProLitmus
 
Fork forms library
Fork forms libraryFork forms library
Fork forms libraryYoniWeb
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignmentbeachtch
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a ProLitmus
 
Printable version (must have Word)
Printable version (must have Word)Printable version (must have Word)
Printable version (must have Word)butest
 
Flash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nlFlash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nlJoomla!Days Netherlands
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
18servers And Forms
18servers And Forms18servers And Forms
18servers And FormsAdil Jafri
 
Chapter 14 - Web Design
Chapter 14 - Web DesignChapter 14 - Web Design
Chapter 14 - Web Designtclanton4
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themescrokitta
 
ONA08 - Jesse Thomas
ONA08 - Jesse ThomasONA08 - Jesse Thomas
ONA08 - Jesse ThomasJesse Thomas
 

Mais procurados (18)

Everything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail RenderingEverything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail Rendering
 
Learn html5
Learn html5Learn html5
Learn html5
 
5.1 html lec 5
5.1 html lec 55.1 html lec 5
5.1 html lec 5
 
4.1 html lec 4
4.1 html lec 44.1 html lec 4
4.1 html lec 4
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Fork forms library
Fork forms libraryFork forms library
Fork forms library
 
Web pageassignment
Web pageassignmentWeb pageassignment
Web pageassignment
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Printable version (must have Word)
Printable version (must have Word)Printable version (must have Word)
Printable version (must have Word)
 
Flash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nlFlash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nl
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
18servers And Forms
18servers And Forms18servers And Forms
18servers And Forms
 
Chapter 14 - Web Design
Chapter 14 - Web DesignChapter 14 - Web Design
Chapter 14 - Web Design
 
HTML5 Web Forms
HTML5 Web FormsHTML5 Web Forms
HTML5 Web Forms
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
ONA08 - Jesse Thomas
ONA08 - Jesse ThomasONA08 - Jesse Thomas
ONA08 - Jesse Thomas
 
Tercer trabajo de drapi 02
Tercer trabajo de drapi 02Tercer trabajo de drapi 02
Tercer trabajo de drapi 02
 

Destaque

An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutRachel Andrew
 
O processo da estrategia
O processo da estrategia O processo da estrategia
O processo da estrategia Roberta Fonseca
 
Em Ambientes Complexos a Solução é Management 3.0
Em Ambientes Complexos a Solução é Management 3.0Em Ambientes Complexos a Solução é Management 3.0
Em Ambientes Complexos a Solução é Management 3.0Ari Amaral
 
Anexo 8. inducción sst
Anexo 8. inducción sstAnexo 8. inducción sst
Anexo 8. inducción sstYuranny Hoyos
 
Guia de laboratorio No 5 sobre disección de un riñón de cerdo
Guia de laboratorio No 5 sobre disección de un riñón de cerdoGuia de laboratorio No 5 sobre disección de un riñón de cerdo
Guia de laboratorio No 5 sobre disección de un riñón de cerdoproyectosdecorazon
 
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL: DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL:  DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL:  DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL: DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...Dimas Marques
 
Slide/Seminário sobre os continente base geografia
Slide/Seminário sobre os continente base geografiaSlide/Seminário sobre os continente base geografia
Slide/Seminário sobre os continente base geografiaRenan Sales
 
A EvoluçãO Da Escrita
A EvoluçãO Da EscritaA EvoluçãO Da Escrita
A EvoluçãO Da EscritaJoseSimas
 
Vision y Voz Capítulo 10 clase 2 revisado
Vision y Voz Capítulo 10 clase 2 revisadoVision y Voz Capítulo 10 clase 2 revisado
Vision y Voz Capítulo 10 clase 2 revisadouanzigba
 
"I watch people work—in a non-creepy way": Applying genre and sociocultural t...
"I watch people work—in a non-creepy way": Applying genre and sociocultural t..."I watch people work—in a non-creepy way": Applying genre and sociocultural t...
"I watch people work—in a non-creepy way": Applying genre and sociocultural t...Clay Spinuzzi
 
Marketing culturale e nuovi strumenti di comunicazione
Marketing culturale e nuovi strumenti di comunicazioneMarketing culturale e nuovi strumenti di comunicazione
Marketing culturale e nuovi strumenti di comunicazioneClaudio Simbula
 
Recursos y plataformas de formación a distancia, de empleo y de salud
Recursos y plataformas de formación a distancia, de empleo y de saludRecursos y plataformas de formación a distancia, de empleo y de salud
Recursos y plataformas de formación a distancia, de empleo y de saludoliver7041
 
Where to buy power rangers costumes
Where to buy power rangers costumesWhere to buy power rangers costumes
Where to buy power rangers costumesRain Wang
 

Destaque (20)

An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
 
O processo da estrategia
O processo da estrategia O processo da estrategia
O processo da estrategia
 
Qué es tecnología
Qué es tecnologíaQué es tecnología
Qué es tecnología
 
Alienação
AlienaçãoAlienação
Alienação
 
Em Ambientes Complexos a Solução é Management 3.0
Em Ambientes Complexos a Solução é Management 3.0Em Ambientes Complexos a Solução é Management 3.0
Em Ambientes Complexos a Solução é Management 3.0
 
Anexo 8. inducción sst
Anexo 8. inducción sstAnexo 8. inducción sst
Anexo 8. inducción sst
 
Guia de laboratorio No 5 sobre disección de un riñón de cerdo
Guia de laboratorio No 5 sobre disección de un riñón de cerdoGuia de laboratorio No 5 sobre disección de un riñón de cerdo
Guia de laboratorio No 5 sobre disección de un riñón de cerdo
 
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL: DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL:  DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL:  DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...
O TRÁFICO DE ANIMAIS SILVESTRES NO BRASIL: DAS ORIGENS ÀS POLÍTICAS PÚBLICAS...
 
Slide/Seminário sobre os continente base geografia
Slide/Seminário sobre os continente base geografiaSlide/Seminário sobre os continente base geografia
Slide/Seminário sobre os continente base geografia
 
El impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
El impacto social de las revistas científicas. Dr. Alejandro Márquez JiménezEl impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
El impacto social de las revistas científicas. Dr. Alejandro Márquez Jiménez
 
A EvoluçãO Da Escrita
A EvoluçãO Da EscritaA EvoluçãO Da Escrita
A EvoluçãO Da Escrita
 
Hongos fitopatogenos 1
Hongos fitopatogenos 1Hongos fitopatogenos 1
Hongos fitopatogenos 1
 
Micologia
MicologiaMicologia
Micologia
 
Blendspace tutorial
Blendspace tutorialBlendspace tutorial
Blendspace tutorial
 
Vision y Voz Capítulo 10 clase 2 revisado
Vision y Voz Capítulo 10 clase 2 revisadoVision y Voz Capítulo 10 clase 2 revisado
Vision y Voz Capítulo 10 clase 2 revisado
 
Talleres semana santa
Talleres semana santaTalleres semana santa
Talleres semana santa
 
"I watch people work—in a non-creepy way": Applying genre and sociocultural t...
"I watch people work—in a non-creepy way": Applying genre and sociocultural t..."I watch people work—in a non-creepy way": Applying genre and sociocultural t...
"I watch people work—in a non-creepy way": Applying genre and sociocultural t...
 
Marketing culturale e nuovi strumenti di comunicazione
Marketing culturale e nuovi strumenti di comunicazioneMarketing culturale e nuovi strumenti di comunicazione
Marketing culturale e nuovi strumenti di comunicazione
 
Recursos y plataformas de formación a distancia, de empleo y de salud
Recursos y plataformas de formación a distancia, de empleo y de saludRecursos y plataformas de formación a distancia, de empleo y de salud
Recursos y plataformas de formación a distancia, de empleo y de salud
 
Where to buy power rangers costumes
Where to buy power rangers costumesWhere to buy power rangers costumes
Where to buy power rangers costumes
 

Semelhante a Falling in Love with Forms [Microsoft Edge Web Summit 2015]

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
 
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
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Formstina1357
 
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
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 formH K
 
Blog Content Marketing - How to Be the Best Answer
Blog Content Marketing - How to Be the Best AnswerBlog Content Marketing - How to Be the Best Answer
Blog Content Marketing - How to Be the Best AnswerTopRank Marketing Agency
 
Google Search
Google SearchGoogle Search
Google Searchjjs1981
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processorsdhoman
 
How to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingHow to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingAimeeKyra
 
Best Practices in Email Design & Development: HighRoad Solution Workshop
Best Practices in Email Design & Development: HighRoad Solution WorkshopBest Practices in Email Design & Development: HighRoad Solution Workshop
Best Practices in Email Design & Development: HighRoad Solution WorkshopLitmus
 
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Distilled
 
MCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALMCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALDIVYA SINGH
 
Php Form
Php FormPhp Form
Php Formlotlot
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryFAKHRUN NISHA
 
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
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML FormsMike Crabb
 
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
 
Validate Email with JavaScript
Validate Email with JavaScriptValidate Email with JavaScript
Validate Email with JavaScriptEmailConcern
 

Semelhante a Falling in Love with Forms [Microsoft Edge Web Summit 2015] (20)

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]
 
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]
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 
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
 
Html basics 10 form
Html basics 10 formHtml basics 10 form
Html basics 10 form
 
Blog Content Marketing - How to Be the Best Answer
Blog Content Marketing - How to Be the Best AnswerBlog Content Marketing - How to Be the Best Answer
Blog Content Marketing - How to Be the Best Answer
 
Handout7 html forms
Handout7 html formsHandout7 html forms
Handout7 html forms
 
Google Search
Google SearchGoogle Search
Google Search
 
Forms 2010
Forms 2010Forms 2010
Forms 2010
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processor
 
How to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS StylingHow to code radio buttons in HTML5 and CSS Styling
How to code radio buttons in HTML5 and CSS Styling
 
Best Practices in Email Design & Development: HighRoad Solution Workshop
Best Practices in Email Design & Development: HighRoad Solution WorkshopBest Practices in Email Design & Development: HighRoad Solution Workshop
Best Practices in Email Design & Development: HighRoad Solution Workshop
 
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
Justine Jordan | SearchLove San Diego, 'Designed for Success: Optimizing The ...
 
MCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALMCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUAL
 
Php Form
Php FormPhp Form
Php Form
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
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
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through 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
 

Mais de 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
 

Mais de 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]
 

Último

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 

Último (20)

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 

Falling in Love with Forms [Microsoft Edge Web Summit 2015]

  • 1. FALLING IN LOVE WITH FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  • 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
  • 15. How about a
 common example? Let’s look
 at a contact form.
  • 18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input type=“text” 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 Your Name <input name=“full_name”>
  • 22. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label>Your Name</label> <input 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”>
  • 24. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
  • 25. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> Screen Reader: Narrator (via IE)
  • 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 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 id=“email” name=“email” required> We will only use your email address to respond to your message.
  • 29. 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.
  • 30. 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. 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.
  • 32. Browsers ignore what they don’t understand
  • 34. 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>
  • 35. 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>
  • 36. 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>
  • 37. 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: NVDA (via Firefox)
  • 38. 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>
  • 39. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
  • 40. FALLING IN LOVE WITH FORMS Buttons <input type=“submit” value=“Send My Message”>
  • 41. FALLING IN LOVE WITH FORMS Buttons <button type=“submit”>Send My Message</button>
  • 42. HELPFUL HINT A button element can contain pretty much anything (within reason)
  • 43. 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>
  • 44. That new email field looks cool, can we see more of that fancy HTML5 stuff?
  • 45. 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>
  • 46. 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>
  • 47. 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>
  • 48. 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>
  • 49. 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>
  • 50. HELPFUL HINT Placeholders are just that: placeholders for actual content. They are not labels!
  • 51. 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” >
  • 52. 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” >
  • 53. 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” >
  • 54. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  • 55. 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 -->
  • 56. 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” >
  • 57. 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” >
  • 58. 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 >
  • 59. 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 >
  • 60. 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 >
  • 61. 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 >
  • 62. 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” >
  • 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 min=“2014-09-10” max=“2014-12-19” >
  • 64. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
  • 65. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
  • 66. 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>
  • 67. 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>
  • 68. 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>
  • 69. 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
  • 70. FALLING IN LOVE WITH FORMS Based on work by Jeremy Keith: http://adactio.com/journal/4272 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">
  • 71. 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
  • 72. 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
  • 73. Ok, I get it: forms in HTML5 are awesome. But how should we organize our forms?
  • 74. 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>
  • 75. 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>
  • 76. 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>
  • 77. FALLING IN LOVE WITH FORMS Is it a list of questions? form ol, form ul { list-style: none; margin: 0; padding: 0; }
  • 78. 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>
  • 79. 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>
  • 80. 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>
  • 81. 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>
  • 82. 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>
  • 83. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
  • 84. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
  • 85. Makes sense. What about more complex form constructs?
  • 86. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
  • 87. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> <label for=“newsletter”>Sign me up for this newsletter</label>
  • 88. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
  • 89. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations input { /* Styles for most normal input types */ } label input { /* Styles for checkbox and radio controls */ }
  • 90. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label for=“newsletter”> <input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> Sign me up for this newsletter </label>
  • 91. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <li class=“confirm”> <label for=“newsletter”> <input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> Sign me up for this newsletter </label> </li>
  • 92. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (9 available) <label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label> <!-- more options -->
  • 93. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (8 available) <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>
  • 94. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <fieldset> <legend>Tablets (9 available)</legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
  • 95. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <fieldset> <legend>Tablets <em>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
  • 96. 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: Narrator (via IE)
  • 97. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
  • 98. 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>
  • 99. 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>
  • 100. 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>
  • 101. 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); }
  • 102. 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>
  • 103. 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>
  • 104. 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>
  • 105. 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: Narrator (via Firefox)
  • 106. HELPFUL HINT Focus on
 making the form read naturally and easily.
  • 107. HELPFUL HINT You can’t always make an interface perfect, but you can make it usable.
  • 108. Ok, I think I’m getting it, but
 small screens still
 scare me a little.
  • 109. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  • 110. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  • 111. 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%; }
  • 112. FALLING IN LOVE WITH FORMS No layout before its time .form-control label, .form-control input { display: block; margin-bottom: .328em; }
  • 113. 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
  • 114. 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
  • 115. Makes sense. Could we talk a bit
 about validation?
  • 116. 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>
  • 117. 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>
  • 118. 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
  • 119. 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>
  • 120. 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
  • 121. 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>
  • 122. 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
  • 123. HELPFUL HINT Focus on
 making the form read naturally and easily.
  • 124. 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.
  • 125. 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]*” >
  • 126. 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}” >
  • 127. 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}” >
  • 128. FALLING IN LOVE WITH FORMS Custom error messages
  • 129. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  • 130. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  • 132. A dead simple polyfill for HTML5 forms & custom validation messages.
  • 133. 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” >
  • 134. 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>
  • 135. HELPFUL HINT Don’t forget about server-side validation either.
  • 136. FALLING IN LOVE WITH FORMS Provide a list of errors retreats4geeks.com/contact
  • 137. 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>
  • 138. 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
  • 139. 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>
  • 140. 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>
  • 141. FALLING IN LOVE WITH FORMS Provide field-level help <li class="text validation-error"> <label for=“email”>Your 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>
  • 142. 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; }
  • 143. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: “Please Enter "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
  • 144. 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: NVDA (via IE)
  • 149. Forms can be… easy to build predictable effortless to use and accessible
  • 150. Questions? Shy? Tweet me at @AaronGustafson