Falling in Love with Forms [Øredev 2015]

2,327 views
1,773 views

Published on

Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.

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.

Published in: Technology

Falling in Love with Forms [Øredev 2015]

  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. Forms suck.
  8. 8. Forms suck. can
  9. 9. Forms suck. don’t have to
  10. 10. Forms suck. can a lot less
  11. 11. Forms can be… easy to build predictable effortless to use and accessible
  12. 12. It’s all in how you look at them.
  13. 13. HELPFUL HINT Break large,
 complex forms into smaller, simpler, reusable patterns
  14. 14. Code Examples http://is.gd/ag_forms
  15. 15. How about a
 common example? Let’s look
 at a contact form.
  16. 16. webstandardssherpa.com/contact
  17. 17. webstandardssherpa.com/contact
  18. 18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input type=“text” 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 Your Name <input name=“full_name”/>
  21. 21. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>
  22. 22. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label>Your Name</label> <input name=“full_name”>
  23. 23. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
  24. 24. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
  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 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 id=“email” name=“email” required> We will only use your email address to respond to your message.
  28. 28. 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.
  29. 29. 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.
  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> We will only use your email address to respond to your message.
  31. 31. Browsers ignore what they don’t understand
  32. 32. Progressive Enhancement
  33. 33. SHAMELESS PLUG! Crafting Rich Experienceswith Progressive Enhancement SECOND EDITION ADAPTIVEWEBDESIGN by Aaron GustafsonForeword by Jeremy Keith Read Free at http://is.gd/awd1st Available
 Dec 6th
  34. 34. 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>
  35. 35. 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>
  36. 36. 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>
  37. 37. 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>
  38. 38. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
  39. 39. FALLING IN LOVE WITH FORMS Buttons <input type=“submit” value=“Send My Message”>
  40. 40. FALLING IN LOVE WITH FORMS Buttons <button type=“submit”>Send My Message</button>
  41. 41. HELPFUL HINT A button element can contain pretty much anything (within reason)
  42. 42. That new email field looks cool, can we see more of that fancy HTML5 stuff?
  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 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>
  45. 45. 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>
  46. 46. 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>
  47. 47. 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>
  48. 48. HELPFUL HINT Placeholders are just that: placeholders for actual content. They are not labels!
  49. 49. 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>
  50. 50. 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” >
  51. 51. 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” >
  52. 52. 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” >
  53. 53. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
  54. 54. 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” >
  55. 55. 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” >
  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 >
  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 >
  59. 59. 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” >
  60. 60. 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” >
  61. 61. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
  62. 62. FALLING IN LOVE WITH FORMS Requesting dates & times <label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
  63. 63. 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>
  64. 64. 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>
  65. 65. 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>
  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 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">
  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. 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
  70. 70. Ok, I get it: forms in HTML5 are awesome. But how should we organize our forms?
  71. 71. 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>
  72. 72. 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>
  73. 73. 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>
  74. 74. FALLING IN LOVE WITH FORMS Is it a list of questions? form ol, form ul { list-style: none; margin: 0; padding: 0; }
  75. 75. 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>
  76. 76. 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>
  77. 77. 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>
  78. 78. 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>
  79. 79. 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>
  80. 80. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
  81. 81. FALLING IN LOVE WITH FORMS Control Group Classification <li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
  82. 82. Makes sense. What about more complex form constructs?
  83. 83. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
  84. 84. 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>
  85. 85. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations <label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
  86. 86. FALLING IN LOVE WITH FORMS Pattern 3: Confirmations input { /* Styles for most normal input types */ } label input { /* Styles for checkbox and radio controls */ }
  87. 87. 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>
  88. 88. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice Tablets (9 available) <label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label> <!-- more options -->
  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 (9 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>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
  92. 92. FALLING IN LOVE WITH FORMS Pattern 4: Multiple Choice <li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
  93. 93. 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>
  94. 94. 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>
  95. 95. 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>
  96. 96. 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); }
  97. 97. HELPFUL HINT Focus on
 making the form read naturally and easily.
  98. 98. HELPFUL HINT You can’t always make an interface perfect, but you can make it usable.
  99. 99. Ok, I think I’m getting it, but
 small screens still
 scare me a little.
  100. 100. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  101. 101. FALLING IN LOVE WITH FORMS Tap-friendly hit targets .confirm label, .radios label, .checkboxes label { margin: -1em 0; padding: 1em 0; }
  102. 102. 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%; }
  103. 103. FALLING IN LOVE WITH FORMS No layout before its time .form-control label, .form-control input { display: block; margin-bottom: .328em; }
  104. 104. 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
  105. 105. 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
  106. 106. Makes sense. Could we talk a bit
 about validation?
  107. 107. 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>
  108. 108. 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>
  109. 109. 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>
  110. 110. 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>
  111. 111. HELPFUL HINT Focus on
 making the form read naturally and easily.
  112. 112. 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.
  113. 113. 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]*” >
  114. 114. 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}” >
  115. 115. HELPFUL HINT Don’t forget about server-side validation either.
  116. 116. FALLING IN LOVE WITH FORMS Provide a list of errors retreats4geeks.com/contact
  117. 117. 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>
  118. 118. 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>
  119. 119. 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>
  120. 120. FALLING IN LOVE WITH FORMS Provide field-level help <li class="text validation-error"> <label for=“email”>Your Email <abbr title=“required">*</abbr> </label> <input id="email" type="email" name="email" required=“" aria-required=“true” aria-invalid="true" aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> </li>
  121. 121. 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; }
  122. 122. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: “x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
  123. 123. FALLING IN LOVE WITH FORMS Provide field-level help .validation-error label::before { content: “Please Enter "; font-family: Verdana, sans-serif; }
  124. 124. One More Thing…
  125. 125. Forms suck.
  126. 126. Forms suck. can a lot less
  127. 127. Forms can be… easy to build predictable effortless to use and accessible
  128. 128. Questions? Tweet me at
 @AaronGustafson
  129. 129. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×