Falling in Love with Forms [Øredev 2015]

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

Transcript of Falling in Love with Forms [Øredev 2015]

Page 1: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH

FORMSAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

Page 2: Falling in Love with Forms [Øredev 2015]

Forms suck.

Page 3: Falling in Love with Forms [Øredev 2015]

They are incredibly tedious to create.

Page 4: Falling in Love with Forms [Øredev 2015]

They are undeniablyannoying to fill in.

Page 5: Falling in Love with Forms [Øredev 2015]

They can be frustrating to test.

Page 6: Falling in Love with Forms [Øredev 2015]

They require logic.

Page 7: Falling in Love with Forms [Øredev 2015]

Forms suck.

Page 8: Falling in Love with Forms [Øredev 2015]

Forms suck.can

Page 9: Falling in Love with Forms [Øredev 2015]

Forms suck.don’t have to

Page 10: Falling in Love with Forms [Øredev 2015]

Forms suck.can

a lot less

Page 11: Falling in Love with Forms [Øredev 2015]

Forms can be… easy to build predictable

effortless to use and accessible

Page 12: Falling in Love with Forms [Øredev 2015]

It’s all in how you look at them.

Page 13: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

Break large,complex forms into

smaller, simpler, reusable patterns

Page 14: Falling in Love with Forms [Øredev 2015]

Code Examples http://is.gd/ag_forms

Page 15: Falling in Love with Forms [Øredev 2015]

How about acommon example?

Let’s lookat a contact form.

Page 16: Falling in Love with Forms [Øredev 2015]

webstandardssherpa.com/contact

Page 17: Falling in Love with Forms [Øredev 2015]

webstandardssherpa.com/contact

Page 18: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

Your Name <input type=“text” name=“full_name”>

Page 19: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

Your Name <input name=“full_name”>

Page 20: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

Your Name <input name=“full_name”/>

Page 21: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

Your Name <input name=“full_name”>

Page 22: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

<label>Your Name</label> <input name=“full_name”>

Page 23: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>

Page 24: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 1: Label & Field

<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>

Page 25: Falling in Love with Forms [Øredev 2015]

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.

Page 26: Falling in Love with Forms [Øredev 2015]

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.

Page 27: Falling in Love with Forms [Øredev 2015]

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.

Page 28: Falling in Love with Forms [Øredev 2015]

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.

Page 29: Falling in Love with Forms [Øredev 2015]

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.

Page 30: Falling in Love with Forms [Øredev 2015]

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.

Page 31: Falling in Love with Forms [Øredev 2015]

Browsers ignore what they don’t

understand

Page 32: Falling in Love with Forms [Øredev 2015]

Progressive Enhancement

Page 33: Falling in Love with Forms [Øredev 2015]

SHAMELESS PLUG!Crafting Rich Experienceswith Progressive Enhancement

SECOND EDITION

ADAPTIVEWEB DESIGN

by Aaron GustafsonForeword by Jeremy KeithRead Free at http://is.gd/awd1st

AvailableDec 6th

Page 34: Falling in Love with Forms [Øredev 2015]

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>

Page 35: Falling in Love with Forms [Øredev 2015]

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>

Page 36: Falling in Love with Forms [Øredev 2015]

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>

Page 37: Falling in Love with Forms [Øredev 2015]

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>

Page 38: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Rinse & Repeat

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

Page 39: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Buttons

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

Page 40: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Buttons

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

Page 41: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

A button element can contain pretty

much anything (within reason)

Page 42: Falling in Love with Forms [Øredev 2015]

That new email field looks cool, can we see more of that

fancy HTML5 stuff?

Page 43: Falling in Love with Forms [Øredev 2015]

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>

Page 44: Falling in Love with Forms [Øredev 2015]

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>

Page 45: Falling in Love with Forms [Øredev 2015]

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>

Page 46: Falling in Love with Forms [Øredev 2015]

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>

Page 47: Falling in Love with Forms [Øredev 2015]

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>

Page 48: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

Placeholders are just that: placeholders for actual content.

They are not labels!

Page 49: Falling in Love with Forms [Øredev 2015]

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>

Page 50: Falling in Love with Forms [Øredev 2015]

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

Page 51: Falling in Love with Forms [Øredev 2015]

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

Page 52: Falling in Love with Forms [Øredev 2015]

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

Page 53: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Requesting numbers

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

Page 54: Falling in Love with Forms [Øredev 2015]

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

Page 55: Falling in Love with Forms [Øredev 2015]

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

Page 56: Falling in Love with Forms [Øredev 2015]

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 >

Page 57: Falling in Love with Forms [Øredev 2015]

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 >

Page 58: Falling in Love with Forms [Øredev 2015]

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 >

Page 59: Falling in Love with Forms [Øredev 2015]

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

Page 60: Falling in Love with Forms [Øredev 2015]

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

Page 61: Falling in Love with Forms [Øredev 2015]

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

Page 62: Falling in Love with Forms [Øredev 2015]

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

Page 63: Falling in Love with Forms [Øredev 2015]

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>

Page 64: Falling in Love with Forms [Øredev 2015]

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>

Page 65: Falling in Love with Forms [Øredev 2015]

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>

Page 66: Falling in Love with Forms [Øredev 2015]

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

Page 67: Falling in Love with Forms [Øredev 2015]

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

Page 68: Falling in Love with Forms [Øredev 2015]

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

Page 69: Falling in Love with Forms [Øredev 2015]

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

Page 70: Falling in Love with Forms [Øredev 2015]

Ok, I get it: forms in HTML5 are awesome.

But how should we organize our forms?

Page 71: Falling in Love with Forms [Øredev 2015]

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>

Page 72: Falling in Love with Forms [Øredev 2015]

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>

Page 73: Falling in Love with Forms [Øredev 2015]

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>

Page 74: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Is it a list of questions?

form ol, form ul { list-style: none; margin: 0; padding: 0; }

Page 75: Falling in Love with Forms [Øredev 2015]

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>

Page 76: Falling in Love with Forms [Øredev 2015]

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>

Page 77: Falling in Love with Forms [Øredev 2015]

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>

Page 78: Falling in Love with Forms [Øredev 2015]

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>

Page 79: Falling in Love with Forms [Øredev 2015]

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>

Page 80: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Control Group Classification

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

Page 81: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Control Group Classification

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

Page 82: Falling in Love with Forms [Øredev 2015]

Makes sense. What about more

complex form constructs?

Page 83: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 3: Confirmations

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

Page 84: Falling in Love with Forms [Øredev 2015]

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>

Page 85: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 3: Confirmations

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

Page 86: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 3: Confirmations

input { /* Styles for most normal input types */ }

label input { /* Styles for checkbox and radio controls */ }

Page 87: Falling in Love with Forms [Øredev 2015]

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>

Page 88: Falling in Love with Forms [Øredev 2015]

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

Page 89: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Pattern 4: Multiple Choice

Tablets (8 available)

<ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>

Page 90: Falling in Love with Forms [Øredev 2015]

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>

Page 91: Falling in Love with Forms [Øredev 2015]

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>

Page 92: Falling in Love with Forms [Øredev 2015]

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>

Page 93: Falling in Love with Forms [Øredev 2015]

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>

Page 94: Falling in Love with Forms [Øredev 2015]

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>

Page 95: Falling in Love with Forms [Øredev 2015]

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>

Page 96: Falling in Love with Forms [Øredev 2015]

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

Page 97: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

Focus onmaking the form

read naturally and easily.

Page 98: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

You can’t always make an interface

perfect, but you can make it usable.

Page 99: Falling in Love with Forms [Øredev 2015]

Ok, I think I’m getting it, but

small screens stillscare me a little.

Page 100: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Tap-friendly hit targets

.confirm label,

.radios label,

.checkboxes label { margin: -1em 0; padding: 1em 0; }

Page 101: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Tap-friendly hit targets

.confirm label,

.radios label,

.checkboxes label { margin: -1em 0; padding: 1em 0; }

Page 102: Falling in Love with Forms [Øredev 2015]

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%; }

Page 103: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

No layout before its time.form-control label, .form-control input { display: block; margin-bottom: .328em; }

Page 104: Falling in Love with Forms [Øredev 2015]

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

Page 105: Falling in Love with Forms [Øredev 2015]

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

Page 106: Falling in Love with Forms [Øredev 2015]

Makes sense. Could we talk a bit about validation?

Page 107: Falling in Love with Forms [Øredev 2015]

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>

Page 108: Falling in Love with Forms [Øredev 2015]

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>

Page 109: Falling in Love with Forms [Øredev 2015]

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>

Page 110: Falling in Love with Forms [Øredev 2015]

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>

Page 111: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

Focus onmaking the form

read naturally and easily.

Page 112: Falling in Love with Forms [Øredev 2015]

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.

Page 113: Falling in Love with Forms [Øredev 2015]

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

Page 114: Falling in Love with Forms [Øredev 2015]

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

Page 115: Falling in Love with Forms [Øredev 2015]

HELPFUL HINT

Don’t forget about server-side

validation either.

Page 116: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Provide a list of errors

retreats4geeks.com/contact

Page 117: Falling in Love with Forms [Øredev 2015]

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>

Page 118: Falling in Love with Forms [Øredev 2015]

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>

Page 119: Falling in Love with Forms [Øredev 2015]

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>

Page 120: Falling in Love with Forms [Øredev 2015]

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>

Page 121: Falling in Love with Forms [Øredev 2015]

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

Page 122: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Provide field-level help

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

Page 123: Falling in Love with Forms [Øredev 2015]

FALLING IN LOVE WITH FORMS

Provide field-level help

.validation-error label::before { content: “Please Enter "; font-family: Verdana, sans-serif; }

Page 124: Falling in Love with Forms [Øredev 2015]

One More Thing…

Page 125: Falling in Love with Forms [Øredev 2015]
Page 126: Falling in Love with Forms [Øredev 2015]

Forms suck.

Page 127: Falling in Love with Forms [Øredev 2015]

Forms suck.can

a lot less

Page 128: Falling in Love with Forms [Øredev 2015]

Forms can be… easy to build predictable

effortless to use and accessible

Page 129: Falling in Love with Forms [Øredev 2015]

Questions?

Tweet me at@AaronGustafson

Page 130: Falling in Love with Forms [Øredev 2015]

Thank you!

@AaronGustafson aaron-gustafson.com

slideshare.net/AaronGustafson