Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Falling in Love with Forms [BlendConf 2014] Slide 1 Falling in Love with Forms [BlendConf 2014] Slide 2 Falling in Love with Forms [BlendConf 2014] Slide 3 Falling in Love with Forms [BlendConf 2014] Slide 4 Falling in Love with Forms [BlendConf 2014] Slide 5 Falling in Love with Forms [BlendConf 2014] Slide 6 Falling in Love with Forms [BlendConf 2014] Slide 7 Falling in Love with Forms [BlendConf 2014] Slide 8 Falling in Love with Forms [BlendConf 2014] Slide 9 Falling in Love with Forms [BlendConf 2014] Slide 10 Falling in Love with Forms [BlendConf 2014] Slide 11 Falling in Love with Forms [BlendConf 2014] Slide 12 Falling in Love with Forms [BlendConf 2014] Slide 13 Falling in Love with Forms [BlendConf 2014] Slide 14 Falling in Love with Forms [BlendConf 2014] Slide 15 Falling in Love with Forms [BlendConf 2014] Slide 16 Falling in Love with Forms [BlendConf 2014] Slide 17 Falling in Love with Forms [BlendConf 2014] Slide 18 Falling in Love with Forms [BlendConf 2014] Slide 19 Falling in Love with Forms [BlendConf 2014] Slide 20 Falling in Love with Forms [BlendConf 2014] Slide 21 Falling in Love with Forms [BlendConf 2014] Slide 22 Falling in Love with Forms [BlendConf 2014] Slide 23 Falling in Love with Forms [BlendConf 2014] Slide 24 Falling in Love with Forms [BlendConf 2014] Slide 25 Falling in Love with Forms [BlendConf 2014] Slide 26 Falling in Love with Forms [BlendConf 2014] Slide 27 Falling in Love with Forms [BlendConf 2014] Slide 28 Falling in Love with Forms [BlendConf 2014] Slide 29 Falling in Love with Forms [BlendConf 2014] Slide 30 Falling in Love with Forms [BlendConf 2014] Slide 31 Falling in Love with Forms [BlendConf 2014] Slide 32 Falling in Love with Forms [BlendConf 2014] Slide 33

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 35 Falling in Love with Forms [BlendConf 2014] Slide 36 Falling in Love with Forms [BlendConf 2014] Slide 37 Falling in Love with Forms [BlendConf 2014] Slide 38 Falling in Love with Forms [BlendConf 2014] Slide 39 Falling in Love with Forms [BlendConf 2014] Slide 40 Falling in Love with Forms [BlendConf 2014] Slide 41 Falling in Love with Forms [BlendConf 2014] Slide 42 Falling in Love with Forms [BlendConf 2014] Slide 43 Falling in Love with Forms [BlendConf 2014] Slide 44 Falling in Love with Forms [BlendConf 2014] Slide 45 Falling in Love with Forms [BlendConf 2014] Slide 46

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 48 Falling in Love with Forms [BlendConf 2014] Slide 49 Falling in Love with Forms [BlendConf 2014] Slide 50

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 52 Falling in Love with Forms [BlendConf 2014] Slide 53 Falling in Love with Forms [BlendConf 2014] Slide 54 Falling in Love with Forms [BlendConf 2014] Slide 55 Falling in Love with Forms [BlendConf 2014] Slide 56 Falling in Love with Forms [BlendConf 2014] Slide 57 Falling in Love with Forms [BlendConf 2014] Slide 58 Falling in Love with Forms [BlendConf 2014] Slide 59 Falling in Love with Forms [BlendConf 2014] Slide 60 Falling in Love with Forms [BlendConf 2014] Slide 61 Falling in Love with Forms [BlendConf 2014] Slide 62

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 64 Falling in Love with Forms [BlendConf 2014] Slide 65 Falling in Love with Forms [BlendConf 2014] Slide 66 Falling in Love with Forms [BlendConf 2014] Slide 67 Falling in Love with Forms [BlendConf 2014] Slide 68 Falling in Love with Forms [BlendConf 2014] Slide 69 Falling in Love with Forms [BlendConf 2014] Slide 70 Falling in Love with Forms [BlendConf 2014] Slide 71 Falling in Love with Forms [BlendConf 2014] Slide 72 Falling in Love with Forms [BlendConf 2014] Slide 73 Falling in Love with Forms [BlendConf 2014] Slide 74 Falling in Love with Forms [BlendConf 2014] Slide 75 Falling in Love with Forms [BlendConf 2014] Slide 76 Falling in Love with Forms [BlendConf 2014] Slide 77 Falling in Love with Forms [BlendConf 2014] Slide 78 Falling in Love with Forms [BlendConf 2014] Slide 79 Falling in Love with Forms [BlendConf 2014] Slide 80 Falling in Love with Forms [BlendConf 2014] Slide 81 Falling in Love with Forms [BlendConf 2014] Slide 82 Falling in Love with Forms [BlendConf 2014] Slide 83 Falling in Love with Forms [BlendConf 2014] Slide 84 Falling in Love with Forms [BlendConf 2014] Slide 85 Falling in Love with Forms [BlendConf 2014] Slide 86 Falling in Love with Forms [BlendConf 2014] Slide 87 Falling in Love with Forms [BlendConf 2014] Slide 88 Falling in Love with Forms [BlendConf 2014] Slide 89 Falling in Love with Forms [BlendConf 2014] Slide 90 Falling in Love with Forms [BlendConf 2014] Slide 91 Falling in Love with Forms [BlendConf 2014] Slide 92

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 94 Falling in Love with Forms [BlendConf 2014] Slide 95 Falling in Love with Forms [BlendConf 2014] Slide 96 Falling in Love with Forms [BlendConf 2014] Slide 97 Falling in Love with Forms [BlendConf 2014] Slide 98 Falling in Love with Forms [BlendConf 2014] Slide 99 Falling in Love with Forms [BlendConf 2014] Slide 100

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 102

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 104 Falling in Love with Forms [BlendConf 2014] Slide 105 Falling in Love with Forms [BlendConf 2014] Slide 106 Falling in Love with Forms [BlendConf 2014] Slide 107 Falling in Love with Forms [BlendConf 2014] Slide 108 Falling in Love with Forms [BlendConf 2014] Slide 109 Falling in Love with Forms [BlendConf 2014] Slide 110

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 112 Falling in Love with Forms [BlendConf 2014] Slide 113 Falling in Love with Forms [BlendConf 2014] Slide 114 Falling in Love with Forms [BlendConf 2014] Slide 115 Falling in Love with Forms [BlendConf 2014] Slide 116 Falling in Love with Forms [BlendConf 2014] Slide 117 Falling in Love with Forms [BlendConf 2014] Slide 118 Falling in Love with Forms [BlendConf 2014] Slide 119 Falling in Love with Forms [BlendConf 2014] Slide 120 Falling in Love with Forms [BlendConf 2014] Slide 121 Falling in Love with Forms [BlendConf 2014] Slide 122 Falling in Love with Forms [BlendConf 2014] Slide 123 Falling in Love with Forms [BlendConf 2014] Slide 124 Falling in Love with Forms [BlendConf 2014] Slide 125

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 127

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 129

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 131 Falling in Love with Forms [BlendConf 2014] Slide 132 Falling in Love with Forms [BlendConf 2014] Slide 133 Falling in Love with Forms [BlendConf 2014] Slide 134

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 136 Falling in Love with Forms [BlendConf 2014] Slide 137 Falling in Love with Forms [BlendConf 2014] Slide 138 Falling in Love with Forms [BlendConf 2014] Slide 139 Falling in Love with Forms [BlendConf 2014] Slide 140 Falling in Love with Forms [BlendConf 2014] Slide 141 Falling in Love with Forms [BlendConf 2014] Slide 142 Falling in Love with Forms [BlendConf 2014] Slide 143 Falling in Love with Forms [BlendConf 2014] Slide 144 Falling in Love with Forms [BlendConf 2014] Slide 145

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 147 Falling in Love with Forms [BlendConf 2014] Slide 148 Falling in Love with Forms [BlendConf 2014] Slide 149 Falling in Love with Forms [BlendConf 2014] Slide 150 Falling in Love with Forms [BlendConf 2014] Slide 151

YouTube videos are no longer supported on SlideShare

View original on YouTube

Falling in Love with Forms [BlendConf 2014] Slide 153 Falling in Love with Forms [BlendConf 2014] Slide 154 Falling in Love with Forms [BlendConf 2014] Slide 155 Falling in Love with Forms [BlendConf 2014] Slide 156 Falling in Love with Forms [BlendConf 2014] Slide 157 Falling in Love with Forms [BlendConf 2014] Slide 158 Falling in Love with Forms [BlendConf 2014] Slide 159 Falling in Love with Forms [BlendConf 2014] Slide 160 Falling in Love with Forms [BlendConf 2014] Slide 161 Falling in Love with Forms [BlendConf 2014] Slide 162 Falling in Love with Forms [BlendConf 2014] Slide 163 Falling in Love with Forms [BlendConf 2014] Slide 164 Falling in Love with Forms [BlendConf 2014] Slide 165 Falling in Love with Forms [BlendConf 2014] Slide 166 Falling in Love with Forms [BlendConf 2014] Slide 167 Falling in Love with Forms [BlendConf 2014] Slide 168 Falling in Love with Forms [BlendConf 2014] Slide 169

41

Share

Download to read offline

Falling in Love with Forms [BlendConf 2014]

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Falling in Love with Forms [BlendConf 2014]

  1. 1. FALLING IN LOVE WITH FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. Forms suck.
  3. 3. They are incredibly tedious to create.
  4. 4. They are undeniably annoying to fill in.
  5. 5. They can be frustrating to test.
  6. 6. They require logic.
  7. 7. can Forms suck.
  8. 8. don’t have to Forms suck.
  9. 9. can a lot less Forms suck.
  10. 10. Forms can be… easy to build predictable effortless to use and accessible
  11. 11. It’s all in how you look at them.
  12. 12. HELPFUL HINT Break large, complex forms into smaller, simpler, reusable patterns
  13. 13. How about a common example? Let’s look at a contact form.
  14. 14. webstandardssherpa.com/contact
  15. 15. webstandardssherpa.com/contact
  16. 16. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input type=“text” name=“full_name”>
  17. 17. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>
  18. 18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”/>
  19. 19. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>
  20. 20. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label>Your Name</label> <input name=“full_name”>
  21. 21. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
  22. 22. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
  23. 23. 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.
  24. 24. 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. !
  25. 25. 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. !
  26. 26. 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. !
  27. 27. 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. !
  28. 28. Browsers ignore what they don’t understand
  29. 29. Progressive Enhancement
  30. 30. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em> We will only use your email address to respond to your message. </em>
  31. 31. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em class=“note”> We will only use your email address to respond to your message. </em>
  32. 32. 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>
  33. 33. 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
  34. 34. 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>
  35. 35. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
  36. 36. FALLING IN LOVE WITH FORMS Buttons <input type=“submit” value=“Send My Message”>
  37. 37. FALLING IN LOVE WITH FORMS Buttons <button type=“submit”>Send My Message</button>
  38. 38. HELPFUL HINT A button element can contain pretty much anything ! (within reason)
  39. 39. 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>
  40. 40. That new email field looks cool, can we see more of that fancy HTML5 stuff?
  41. 41. 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>
  42. 42. 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>
  43. 43. 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>
  44. 44. 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>
  45. 45. HELPFUL HINT Placeholders are just that: placeholders for actual content. They are not labels!
  46. 46. 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>
  47. 47. 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” >
  48. 48. 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” >
  49. 49. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  50. 50. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  51. 51. 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 -->
  52. 52. 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” >
  53. 53. 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” >
  54. 54. 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 >
  55. 55. 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 >
  56. 56. 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 >
  57. 57. 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” >
  58. 58. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required min=“2014-09-10” max=“2014-12-19” >
  59. 59. 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">
  60. 60. 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">
  61. 61. 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>
  62. 62. 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>
  63. 63. 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>
  64. 64. 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>
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. Ok, I get it: forms in HTML5 are awesome. But how should we organize our forms?
  70. 70. 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>
  71. 71. 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>
  72. 72. 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>
  73. 73. FALLING IN LOVE WITH FORMS Is it a list of questions? form ol, form ul { list-style: none; margin: 0; padding: 0; }
  74. 74. 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>
  75. 75. 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>
  76. 76. 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>
  77. 77. 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>
  78. 78. 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>
  79. 79. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
  80. 80. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
  81. 81. Makes sense. What about more complex form constructs?
  82. 82. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
  83. 83. 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>
  84. 84. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
  85. 85. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations input { /* Styles for most normal input types */ } ! label input { /* Styles for checkbox and radio controls */ }
  86. 86. 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>
  87. 87. 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>
  88. 88. 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 -->
  89. 89. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (8 available) ! <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>
  90. 90. 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>
  91. 91. 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>
  92. 92. 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
  93. 93. 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>
  94. 94. 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>
  95. 95. 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>
  96. 96. 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>
  97. 97. 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); }
  98. 98. 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>
  99. 99. 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>
  100. 100. 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
  101. 101. 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>
  102. 102. 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
  103. 103. FALLING IN LOVE WITH FORMS Pattern 7: The dreaded table
  104. 104. 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>
  105. 105. 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>
  106. 106. 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>
  107. 107. 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>
  108. 108. 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>
  109. 109. 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>
  110. 110. 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
  111. 111. HELPFUL HINT Focus on making the form read naturally and easily.
  112. 112. HELPFUL HINT You can’t always make an interface perfect, but you can make it usable.
  113. 113. Ok, I think I’m getting it, but small screens still scare me a little.
  114. 114. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  115. 115. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  116. 116. 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%; }
  117. 117. FALLING IN LOVE WITH FORMS No layout before its time .form-control label, .form-control input { display: block; margin-bottom: .328em; }
  118. 118. 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 */ }
  119. 119. 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
  120. 120. 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%; } ! }
  121. 121. 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 } ! }
  122. 122. Makes sense. Could we talk a bit about validation?
  123. 123. 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>
  124. 124. 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>
  125. 125. 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
  126. 126. 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>
  127. 127. 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
  128. 128. 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>
  129. 129. 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
  130. 130. HELPFUL HINT Focus on making the form read naturally and easily.
  131. 131. 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. !
  132. 132. 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]*” >
  133. 133. 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}” >
  134. 134. 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}” >
  135. 135. FALLING IN LOVE WITH FORMS Custom error messages
  136. 136. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  137. 137. FALLING IN LOVE WITH FORMS Custom error messages var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
  138. 138. github.com/easy-designs/jquery.easy-validation.js
  139. 139. A dead simple polyfill for HTML5 forms & custom validation messages.
  140. 140. 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” >
  141. 141. 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>
  142. 142. HELPFUL HINT Don’t forget about server-side validation either.
  143. 143. FALLING IN LOVE WITH FORMS Provide a list of errors retreats4geeks.com/contact
  144. 144. 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>
  145. 145. 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
  146. 146. 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>
  147. 147. 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>
  148. 148. 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>
  149. 149. 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; }
  150. 150. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
  151. 151. 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
  152. 152. Forms suck.
  153. 153. can a lot less Forms suck.
  154. 154. Forms can be… easy to build predictable effortless to use and accessible
  155. 155. Thank you! ! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
  • AngeloCosta5

    Apr. 10, 2016
  • bhaven

    Dec. 27, 2014
  • toivo

    Dec. 12, 2014
  • mr-m

    Dec. 10, 2014
  • leraa

    Dec. 9, 2014
  • deexia

    Nov. 20, 2014
  • chingul

    Nov. 20, 2014
  • lexshkurko

    Nov. 19, 2014
  • shurshilin

    Nov. 18, 2014
  • annayatel

    Nov. 17, 2014
  • sibsfinx

    Nov. 17, 2014
  • alltimelowe

    Nov. 8, 2014
  • andrewryzhankov

    Oct. 24, 2014
  • logicaroma

    Oct. 16, 2014
  • chatruc

    Sep. 28, 2014
  • teravakyan

    Sep. 26, 2014
  • PomichalPatrik

    Sep. 25, 2014
  • giuseppe.pizzimenti

    Sep. 22, 2014
  • pips1

    Sep. 19, 2014
  • retolist

    Sep. 18, 2014

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.

Views

Total views

22,732

On Slideshare

0

From embeds

0

Number of embeds

13,803

Actions

Downloads

81

Shares

0

Comments

0

Likes

41

×