Falling in Love with Forms [BlendConf 2014]

FALLING IN LOVE WITH FORMS
Aaron Gustafson
@AaronGustafson
slideshare.net/AaronGustafson

They are incredibly
tedious to create.

They are undeniably
annoying to fill in.

They can be
frustrating to test.

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

Pattern 1: Label & Field
Your Name
<input type=“text” name=“full_name”>

Your Name
<input name=“full_name”>

Your Name
<input name=“full_name”/>

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.

<input id=“email” name=“email” required>
!

<input type=“email” id=“email” name=“email” required>
!

Browsers ignore
what they don’t
understand

</em>
Screen Reader: Chrome Vox

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>

Rinse & Repeat
<label for=“message”>Your Message</label>
<textarea id="message" name="message"></textarea>

Buttons
<input type=“submit” value=“Send My Message”>

Buttons
<button type=“submit”>Send My Message</button>

HELPFUL HINT
A button element
can contain pretty
much anything
! (within reason)

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?

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>

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!

Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label>
<input type="tel" id="preferred_phone" name=“preferred_phone”
placeholder="ex. 123-456-7890”
>

Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name="test">

Requesting numbers
<input id="test" type=“number" name=“test”
pattern=“[0-9]*”
>

Requesting numbers
<label for=“volume">How Loud is Spinal Tap?</label>
<input id="volume" type=“range" name=“volume”
min=“0” max=“11” step=“1”
>

Requesting numbers
min=“0” max=“9”
>

Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
>

<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”
>

<label for="requested_tour_time">Tour Time Requested</label>
<input id="preferred_dates" type="time" name=“preferred_dates">

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>

</datalist>

Mentalism
<label for="state">State</label>
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</datalist>

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>
</select>
!
If other, please specify
!
</datalist>
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?

Do we divide it up?
<div>
</div>

Do paragraphs make sense?
<p>
</p>

Is it a list of questions?
<ol>
<li>
</li>
</ol>

Is it a list of questions?
form ol,
form ul {
list-style: none;
margin: 0;
padding: 0;
}

Control Group Classification
<li class=“text”>
</li>

<li class=“email”>
We will only use your email address to respond
to your message.
</em>
</li>

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

<li class=“textarea”>
<label for=“message”>Your Message</label>
<textarea id="message" name=“message"></textarea>
</li>

<li class=“buttons”>
<button type=“submit”>Send My Message</button>
</li>

Makes sense.
What about more
complex form
constructs?

Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”>
Sign me up for this newsletter

<input type=“checkbox” name=“newsletter” value=“yes”
id=“newsletter”>
<label for=“newsletter”>Sign me up for this newsletter</label>

input {
/* Styles for most normal input types */
}
!
label input {
/* Styles for checkbox and radio controls */
}

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>
!

Tablets (8 available)
!
<ul>
<li></li>
</ul>

<fieldset>
<legend>Tablets (8 available)</legend>
<ul>
</ul>
</fieldset>

<fieldset>
<legend>Tablets <em>(8 available)</em></legend>
<ul>
</ul>
</fieldset>

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>

<fieldset>
<legend>Requested Day and Time</legend>
!
<select id=“requested_date" name="requested_date"
required=“”></select>
<label for="requested_time">Requested Time</label>
<select id="requested_time" name=“requested_time" required="">
</select>
!
</fieldset>

<li class=“grouped date-time-selects”>
<fieldset>
<legend>Requested Day and Time</legend>
!
<select id=“requested_date" name="requested_date"
required=“”></select>

!
</fieldset>
</li>

/* 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);
}

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”> </select>
!
!
</fieldset>
</li>

<fieldset>
<legend>Select a date</legend>
!
<label for="month">Month</label>
<select name="month" id=“month”> </select>
!
!
</fieldset>
</li>

<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”
> </select>
!
</fieldset>
</li>

Pattern 7: The dreaded table

<table>
<thead>
<tr>
<td></td>
<th>Poor</th>

</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>

</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<td></td>
<th id=“value-1”>Poor</th>
</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>

</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<td></td>
<th id=“value-1”>Poor</th>
</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>

</tr>
</tbody>
</table>

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.

Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}

No layout before its time
.form-control {
clear: both;
}
.form-control label,
.form-control input {
float: left;
width: 34%;
}
width: 63%;
}

display: block;
margin-bottom: .328em;
}

display: block;
}
!
@media only screen and (min-width: 60em) {
/* Side by Side layout */
}

display: block;
}
!
@media only screen and (min-width: 60em) {
/* Side by Side layout */
}
YMQMV

@media only screen and (min-width:30em) {
!
form .grouped ul li {
float: left;
width: 50%;
}
!
}

@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?

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>

Requiring a field
<p>Fields marked with a * are required.</p>
<p>
</label>
</p>

Requiring a field
<p>Fields marked with a * are
<strong id="required">required</strong>.</p>
<p>
First Name
<abbr title=“required” aria-labelledby=“required”>*</abbr>
</label>
</p>

Requiring a field
<p tabindex="0">Fields marked with a * are required.</p>
<p>
</label>
<input id="first_name" name="first_name" required
aria-required="true">
</p>

Native validation
!

Non-native format validation
>

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}”
>

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.

<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
data-validation-error-empty=“You forgot to enter text here”
data-validation-error-invalid=“Whoops, that’s not right”
>

<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”
data-validation-error-invalid=“Why not try 111aa?”
>
!
</form>

HELPFUL HINT
Don’t forget about
server-side
validation either.

Provide a list of errors
retreats4geeks.com/contact

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

Provide easy access to them
<ol>
</ol>
</div>

Provide easy access to them
<label for=“message”>
Message <abbr title=“required">*</abbr>
</label>
<textarea id="message" name="message" required></textarea>

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>

li.validation-error {
color: #922026;
}
!
li.validation-error input,
li.validation-error textarea,
li.validation-error select {
border-color: #922026;
}

.validation-error label::before {
content: "x ";
font-family: Verdana, sans-serif;
speak: none; /* The future! */
}

Thank you!
!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

Falling in Love with Forms [BlendConf 2014]

More Related Content

Viewers also liked (16)

More from Aaron Gustafson (20)

Recently uploaded (20)

Falling in Love with Forms [BlendConf 2014]