Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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=“f...
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“f...
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“f...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
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=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“em...
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“subject”>Purpose of Your Message</label>
<select id="subject" name="...
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“message”>Your Message</label>
<textarea id="message" name="message">...
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="gig...
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
ari...
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
ari...
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
ari...
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
ari...
FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
ari...
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"...
FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label>
<input type="tel"...
FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label>
<input type="tel"...
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name...
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name...
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for=“volume">How Loud is Spinal Tap?</label>
<input id="volume" type=...
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label>
<input id...
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label>
<input id...
FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datal...
FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datal...
FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datal...
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“stat...
FALLING IN LOVE WITH FORMS
Based on work by Jeremy Keith: http://adactio.com/journal/4272
Mentalism: smart fallbacks
<labe...
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“stat...
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“stat...
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=“...
FALLING IN LOVE WITH FORMS
Do paragraphs make sense?
<p>
<label for=“full_name”>Your Name</label>
<input id=“full_name” na...
FALLING IN LOVE WITH FORMS
Is it a list of questions?
<ol>
<li>
<label for=“full_name”>Your Name</label>
<input id=“full_n...
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 ...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“form-control form-control--text”>
<label for=“full_name...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“text”>
<label for=“full_name”>Your Name</label>
<input ...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“email”>
<label for=“email”>Your Email</label>
<input ty...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“select”>
<label for=“subject”>Purpose of Your Message</...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“textarea”>
<label for=“message”>Your Message</label>
<t...
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“buttons”>
<button type=“submit”>Send My Message</button...
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 t...
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”
id=“newsletter”>
...
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label>
<input type=“checkbox” name=“newsletter” value=“yes”>
Sign me ...
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
input {
/* Styles for most normal input types */
}
label input {
/* St...
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label for=“newsletter”>
<input type=“checkbox” name=“newsletter” valu...
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<li class=“confirm”>
<label for=“newsletter”>
<input type=“checkbox” n...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (9 available)
<label for="asus-nexus-7">
<input type="checkb...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available)
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more ...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets (9 available)</legend>
<ul>
<li><!-- Asus...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets <em>(9 available)</em></legend>
<ul>
<li>...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets <em>(8 available)</em></legend>
<ul>
<li>...
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”>
<fieldset>
<legend>Tablets <em>(9 av...
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
Requested Day and Time
<label for="requested_date">Requested Day</labe...
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<fieldset>
<legend>Requested Day and Time</legend>
<label for="request...
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<li class=“grouped date-time-selects”>
<fieldset>
<legend>Requested Da...
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
/* Hide the labels in an accessible way */
form .date-time-selects lab...
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend>Selec...
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend>Selec...
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend id=“s...
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend id=“s...
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;
pad...
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label {
margin: -1em 0;
pad...
FALLING IN LOVE WITH FORMS
No layout before its time
.form-control {
clear: both;
}
.form-control label,
.form-control inp...
FALLING IN LOVE WITH FORMS
No layout before its time
.form-control label,
.form-control input {
display: block;
margin-bot...
FALLING IN LOVE WITH FORMS
No layout before its time
.form-control label,
.form-control input {
display: block;
margin-bot...
FALLING IN LOVE WITH FORMS
No layout before its time
@media only screen and (min-width:30em) {
form .grouped ul li {
float...
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">
Firs...
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p>
<p>
<label for=“first_name">
Firs...
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p>
<p>
<label for=“first_name">
Firs...
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are
<strong id="required">required</strong>.</p>
<p...
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are
<strong id="required">required</strong>.</p>
<p...
FALLING IN LOVE WITH FORMS
Requiring a field
<p tabindex="0">Fields marked with a * are required.</p>
<p>
<label for=“firs...
FALLING IN LOVE WITH FORMS
Requiring a field
<p tabindex="0">Fields marked with a * are required.</p>
<p>
<label for=“firs...
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=“em...
FALLING IN LOVE WITH FORMS
Non-native format validation
<label for="test">What is 1 + 1?</label>
<input id="test" type=“nu...
FALLING IN LOVE WITH FORMS
Non-native format validation
<label for=“test">Enter three numbers
followed by two letters</lab...
FALLING IN LOVE WITH FORMS
Non-native format validation
<label for=“test">Enter three numbers
followed by two letters</lab...
FALLING IN LOVE WITH FORMS
Custom error messages
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’);
field.setCustomValidity( ‘My...
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’);
field.setCustomValidity( ‘My...
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>
<in...
FALLING IN LOVE WITH FORMS
Custom error messages
<form …
data-validation-error-empty=“You forgot to enter text here”
data-...
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>...
FALLING IN LOVE WITH FORMS
Provide a list of errors
<div role=“alert”>
<p>There were errors with your form submission:</p>...
FALLING IN LOVE WITH FORMS
Provide easy access to them
<div role=“alert”>
<p>There were errors with your form submission:<...
FALLING IN LOVE WITH FORMS
Provide easy access to them
<label for=“message”>
Message <abbr title=“required">*</abbr>
</lab...
FALLING IN LOVE WITH FORMS
Provide field-level help
<li class="text validation-error">
<label for=“email”>Your Email <abbr...
FALLING IN LOVE WITH FORMS
Provide field-level help
li.validation-error {
color: #922026;
}
li.validation-error input,
li....
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before {
content: “Please Enter ";
font-famil...
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before {
content: "x ";
font-family: Verdana,...
One More Thing…
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
Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
Nächste SlideShare
Wird geladen in …5
×

Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson Falling in Love with Forms [Microsoft Edge Web Summit 2015]

19.576 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Sex in your area is here: www.bit.ly/sexinarea
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ●●● http://scamcb.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How You Can Go From Dead Broke To Abundantly Wealthy By Using One Simple Mind Hack... ●●● http://ishbv.com/manifestd1/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • My special guest's 3-Step "No Product Funnel" can be duplicated to start earning a significant income online. ➤➤ https://tinyurl.com/y3ylrovq
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×