Successfully reported this slideshow.

Creating Beautiful, Accessible, and User-Friendly Forms

4

Share

Upcoming SlideShare
The Secret Life of Forms
The Secret Life of Forms
Loading in …3
×
1 of 172
1 of 172

Creating Beautiful, Accessible, and User-Friendly Forms

4

Share

Download to read offline

Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.

Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.

Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.

Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Creating Beautiful, Accessible, and User-Friendly Forms

  1. 1. @clarissa Creating Beautiful,Accessible, and User-Friendly Forms
  2. 2. <input  type="text"  name="fullname"> Text
  3. 3. <input  type="date"  name="birthday"> Date
  4. 4. <input  type="date"  name="birthday"> Date
  5. 5. <input  type="date"  name="birthday"> Date
  6. 6. <input  type="date"  name="birthday"> Date
  7. 7. Month <input  type="month"  name="month">
  8. 8. Month <input  type="month"  name="month">
  9. 9. Month <input  type="month"  name="month">
  10. 10. <input  type="time"  name="start-­‐ time"> Time
  11. 11. <input  type="time"  name="start-­‐ time"> Time
  12. 12. <input  type="time"  name="start-­‐ time"> Time
  13. 13. <input  type="time"  name="start-­‐ time"> Time
  14. 14. <input  type="email"  name="email"> Email
  15. 15. <input  type="email"  name="email"> Email
  16. 16. <input  type="email"  name="email"> Email
  17. 17. <input  type="email"  name="email"> Email
  18. 18. <input  type="url"  name="website"> URL
  19. 19. <input  type="url"  name="website"> URL
  20. 20. <input  type="tel"  name="phone"> Telephone
  21. 21. <input  type="tel"  name="phone"> Telephone
  22. 22. <input  type="number"  name="amount"> Number
  23. 23. <input  type="number"  name="amount"> Number
  24. 24. <input  type="radio"  value="red"   name="color"  id="red"><label   for="red">red</label> <input  type="radio"  value="orange"   name="color"  id="orange"><label   for="orange">orange</label> <input  type="radio"  value="blue"   name="color"  id="blue"><label   for="blue">blue</label>
  25. 25. label  {          background-­‐color:  #ffa;        padding:  3px  6px;        border-­‐radius:  4px;   }
  26. 26. input[type="radio"]  {        opacity:0;        z-­‐index:100; }
  27. 27. label  {        margin-­‐left:  -­‐17px; }
  28. 28. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  29. 29. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  30. 30. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  31. 31. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
  32. 32. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
  33. 33. <select>    <optgroup  label="Meat">        <option  value="bacon">Bacon</option>        <option  value="chicken">Chicken</option>        <option  value="ham">Ham</option>    </optgroup>      <optgroup  label="Veggies">        <option  value="peppers">Green  Peppers</ option>        <option  value="mushrooms">Mushrooms</ option>    </optgroup>   </select>
  34. 34. <label  for="firstname">        First  name </label> <input  type="text"  name="fname"   id="firstname">
  35. 35. <label>        First  name:        <input  type="text"  name="fname"> </label>
  36. 36. <label  for="firstname">        First  name:        <input  type="text"          name="fname"  id="firstname"> </label>
  37. 37. <input  type="search"  name="search"   aria-­‐label="Search">
  38. 38. <input  type="email"  name="email" placeholder="name@domain.com">
  39. 39. ::-­‐webkit-­‐input-­‐placeholder  {  color:   blue;  } ::-­‐moz-­‐placeholder  {  color:  blue;  } :-­‐ms-­‐input-­‐placeholder  {  color:  blue;  } :-­‐moz-­‐placeholder  {  color:  blue;  }
  40. 40. <input  type="text"  name="city"   required>                    
  41. 41. <input  type="text"  name="city"   required  aria-­‐required="true">
  42. 42. input[required]  {  ...  }   or input:required  {  ...  }
  43. 43. input:optional  {  ...  }
  44. 44. aria-­‐live="polite" aria-­‐live="assertive"
  45. 45. <input  type="number"  name="number"   min="1"  max="100"> input:valid  {  border:  3px  solid  green;  } input:invalid  {  border:  3px  dotted  red;  }
  46. 46. <input  type="text"  name="fieldname"   autocorrect="off">
  47. 47. <input  type="text"  name="fieldname"   autocapitalize="off">
  48. 48. <input  type="text"  name="fieldname"   autocapitalize="off"> autocapitalize="characters" autocapitalize="words" autocapitalize="sentences"
  49. 49. Clarissa Peterson www.clarissapeterson.com @clarissa

×