falling in love with forms [blendconf 2014]
DESCRIPTION
In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including: * new HTML5 field types; * validation, error messages & formatting hints; * how to mark up and style forms for the greatest flexibility in responsive designs; and * best practices for enhancing forms with JavaScript.TRANSCRIPT
![Page 1: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/1.jpg)
FALLING IN LOVE WITH
FORMSAaron Gustafson
@AaronGustafson slideshare.net/AaronGustafson
![Page 2: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/2.jpg)
Forms suck.
![Page 3: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/3.jpg)
They are incredibly tedious to create.
![Page 4: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/4.jpg)
They are undeniablyannoying to fill in.
![Page 5: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/5.jpg)
They can be frustrating to test.
![Page 6: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/6.jpg)
They require logic.
![Page 7: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/7.jpg)
Forms suck.can
![Page 8: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/8.jpg)
Forms suck.don’t have to
![Page 9: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/9.jpg)
Forms suck.can
a lot less
![Page 10: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/10.jpg)
Forms can be… easy to build predictable
effortless to use and accessible
![Page 11: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/11.jpg)
It’s all in how you look at them.
![Page 12: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/12.jpg)
HELPFUL HINT
Break large,complex forms into
smaller, simpler, reusable patterns
![Page 13: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/13.jpg)
How about acommon example?
Let’s lookat a contact form.
![Page 16: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/16.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input type=“text” name=“full_name”>
![Page 17: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/17.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”>
![Page 18: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/18.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”/>
![Page 19: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/19.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”>
![Page 20: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/20.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label>Your Name</label> <input name=“full_name”>
![Page 21: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/21.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
![Page 22: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/22.jpg)
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 23: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/23.jpg)
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 24: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/24.jpg)
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 25: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/25.jpg)
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 [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/26.jpg)
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 27: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/27.jpg)
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 28: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/28.jpg)
Browsers ignore what they don’t
understand
![Page 29: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/29.jpg)
Progressive Enhancement
![Page 30: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/30.jpg)
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 31: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/31.jpg)
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 32: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/32.jpg)
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 33: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/33.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em>
Screen Reader: Chrome Vox
![Page 34: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/34.jpg)
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 35: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/35.jpg)
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
![Page 36: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/36.jpg)
FALLING IN LOVE WITH FORMS
Buttons
<input type=“submit” value=“Send My Message”>
![Page 37: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/37.jpg)
FALLING IN LOVE WITH FORMS
Buttons
<button type=“submit”>Send My Message</button>
![Page 38: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/38.jpg)
HELPFUL HINT
A button element can contain pretty
much anything !
(within reason)
![Page 39: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/39.jpg)
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>
![Page 40: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/40.jpg)
That new email field looks cool, can we see more of that
fancy HTML5 stuff?
![Page 41: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/41.jpg)
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 42: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/42.jpg)
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 43: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/43.jpg)
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 [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/44.jpg)
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 45: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/45.jpg)
HELPFUL HINT
Placeholders are just that: placeholders for actual content.
They are not labels!
![Page 46: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/46.jpg)
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 47: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/47.jpg)
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 48: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/48.jpg)
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 49: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/49.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
![Page 50: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/50.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
![Page 51: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/51.jpg)
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 -->
![Page 52: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/52.jpg)
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 53: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/53.jpg)
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 54: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/54.jpg)
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 55: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/55.jpg)
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 56: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/56.jpg)
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 [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/57.jpg)
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 58: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/58.jpg)
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 59: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/59.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
![Page 60: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/60.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
![Page 61: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/61.jpg)
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 62: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/62.jpg)
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 63: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/63.jpg)
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 64: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/64.jpg)
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 65: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/65.jpg)
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 66: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/66.jpg)
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 67: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/67.jpg)
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 68: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/68.jpg)
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 [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/69.jpg)
Ok, I get it: forms in HTML5 are awesome.
But how should we organize our forms?
![Page 70: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/70.jpg)
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 71: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/71.jpg)
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 72: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/72.jpg)
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 73: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/73.jpg)
FALLING IN LOVE WITH FORMS
Is it a list of questions?
form ol, form ul { list-style: none; margin: 0; padding: 0; }
![Page 74: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/74.jpg)
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 75: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/75.jpg)
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 76: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/76.jpg)
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 77: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/77.jpg)
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 78: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/78.jpg)
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 79: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/79.jpg)
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 80: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/80.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
![Page 81: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/81.jpg)
Makes sense. What about more
complex form constructs?
![Page 82: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/82.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
![Page 83: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/83.jpg)
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 84: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/84.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
![Page 85: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/85.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
input { /* Styles for most normal input types */ } !label input { /* Styles for checkbox and radio controls */ }
![Page 86: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/86.jpg)
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 87: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/87.jpg)
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>
![Page 88: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/88.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available) !<label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label> !<!-- more options -->
![Page 89: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/89.jpg)
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 [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/90.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets (8 available)</legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
![Page 91: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/91.jpg)
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>
![Page 92: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/92.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
Screen Reader: Chrome Vox
![Page 93: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/93.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
![Page 94: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/94.jpg)
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 95: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/95.jpg)
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 96: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/96.jpg)
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 97: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/97.jpg)
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 98: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/98.jpg)
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>
![Page 99: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/99.jpg)
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>
![Page 100: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/100.jpg)
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend> ! <label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select> ! <!-- continued… --> ! </fieldset> </li>
Screen Reader: Chrome Vox
![Page 101: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/101.jpg)
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>
![Page 102: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/102.jpg)
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”> <fieldset> <legend id=“select_date”>Select a date</legend> ! <label for=“month" id=“month_label”>Month</label> <select name="month" id=“month” aria-labelledby=“select_date month_label” ><!-- options --> </select> ! <!-- continued… --> </fieldset> </li>
Screen Reader: Chrome Vox
![Page 103: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/103.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
![Page 104: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/104.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
![Page 105: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/105.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
![Page 106: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/106.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
![Page 107: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/107.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
![Page 108: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/108.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“experience value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
![Page 109: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/109.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table>
![Page 110: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/110.jpg)
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table>
Screen Reader: Chrome Vox
![Page 111: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/111.jpg)
HELPFUL HINT
Focus onmaking the form
read naturally and easily.
![Page 112: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/112.jpg)
HELPFUL HINT
You can’t always make an interface
perfect, but you can make it usable.
![Page 113: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/113.jpg)
Ok, I think I’m getting it, but
small screens stillscare me a little.
![Page 114: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/114.jpg)
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
![Page 115: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/115.jpg)
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
![Page 116: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/116.jpg)
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 117: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/117.jpg)
FALLING IN LOVE WITH FORMS
No layout before its time.form-control label, .form-control input { display: block; margin-bottom: .328em; }
![Page 118: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/118.jpg)
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 */ }
![Page 119: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/119.jpg)
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 120: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/120.jpg)
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%; } !}
![Page 121: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/121.jpg)
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 122: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/122.jpg)
Makes sense. Could we talk a bit about validation?
![Page 123: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/123.jpg)
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 124: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/124.jpg)
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 125: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/125.jpg)
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
![Page 126: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/126.jpg)
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 127: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/127.jpg)
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
![Page 128: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/128.jpg)
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 129: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/129.jpg)
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
![Page 130: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/130.jpg)
HELPFUL HINT
Focus onmaking the form
read naturally and easily.
![Page 131: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/131.jpg)
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 132: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/132.jpg)
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 133: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/133.jpg)
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 134: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/134.jpg)
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 135: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/135.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
![Page 136: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/136.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
![Page 137: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/137.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
![Page 138: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/138.jpg)
github.com/easy-designs/jquery.easy-validation.js
![Page 139: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/139.jpg)
A dead simple polyfill for HTML5
forms & custom validation messages.
![Page 140: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/140.jpg)
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” >
![Page 141: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/141.jpg)
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>
![Page 142: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/142.jpg)
HELPFUL HINT
Don’t forget about server-side
validation either.
![Page 143: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/143.jpg)
FALLING IN LOVE WITH FORMS
Provide a list of errors
retreats4geeks.com/contact
![Page 144: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/144.jpg)
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 145: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/145.jpg)
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
![Page 146: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/146.jpg)
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 147: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/147.jpg)
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 148: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/148.jpg)
FALLING IN LOVE WITH FORMS
Provide field-level help
<li class="text validation-error"> <label for=“email">Email <abbr title=“required">*</abbr> </label> <input id="email" type="email" name="email" required=“" aria-required=“true” aria-invalid="true" aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> </li>
![Page 149: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/149.jpg)
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 150: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/150.jpg)
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 151: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/151.jpg)
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
Screen Reader: Chrome Vox
![Page 152: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/152.jpg)
Forms suck.
![Page 153: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/153.jpg)
Forms suck.can
a lot less
![Page 154: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/154.jpg)
Forms can be… easy to build predictable
effortless to use and accessible
![Page 155: Falling in Love with Forms [BlendConf 2014]](https://reader033.vdocument.in/reader033/viewer/2022061204/547e90d0b4af9fe2158b5698/html5/thumbnails/155.jpg)
Thank you! !
@AaronGustafson aaron-gustafson.com
slideshare.net/AaronGustafson