Clarissa Peterson: Creating beautiful, accessible, and user-friendly forms

Video: https://www.youtube.com/watch?v=56B8DR6lyWs

Speaker: Clarissa Peterson is a UX designer and web developer based in Calgary, Alberta. She frequently speaks and gives workshops on responsive design and user experience, and also teaches in the web developer fast track program at the Southern Alberta Institute of Technology (SAIT). Clarissa is the author of Learning Responsive Web Design: A Beginner's Guide (O'Reilly Media).

Abstract: 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.

Twitter Link: https://twitter.com/clarissa

Transcript

1. @clarissa Creating Beautiful, Accessible, and User-Friendly Forms
15. <input  type="text"  name="fullname"> Text
16. <input  type="date"  name="birthday"> Date
17. <input  type="date"  name="birthday"> Date
18. <input  type="date"  name="birthday"> Date
19. <input  type="date"  name="birthday"> Date
22. Month <input  type="month"  name="month">
23. Month <input  type="month"  name="month">
24. Month <input  type="month"  name="month">
25. <input  type="time"  name="start-­‐ time"> Time
26. <input  type="time"  name="start-­‐ time"> Time
27. <input  type="time"  name="start-­‐ time"> Time
28. <input  type="time"  name="start-­‐ time"> Time
29. <input  type="email"  name="email"> Email
30. <input  type="email"  name="email"> Email
31. <input  type="email"  name="email"> Email
32. <input  type="email"  name="email"> Email
33. <input  type="url"  name="website"> URL
34. <input  type="url"  name="website"> URL
35. <input  type="tel"  name="phone"> Telephone
36. <input  type="tel"  name="phone"> Telephone
38. <input  type="number"  name="amount"> Number
39. <input  type="number"  name="amount"> Number
45. <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>
46. label  {          background-­‐color:  #ffa;        padding:  3px  6px;        border-­‐radius:  4px;   }
47. input[type="radio"]  {        opacity:0;        z-­‐index:100; }
48. label  {        margin-­‐left:  -­‐17px; }
49. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
50. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
51. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
54. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
55. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
58. <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>
60. <label  for="firstname">        First  name </label> <input  type="text"  name="fname"   id="firstname">
61. <label>        First  name:        <input  type="text"  name="fname"> </label>
62. <label  for="firstname">        First  name:        <input  type="text"          name="fname"  id="firstname"> </label>
63. <input  type="search"  name="search"   aria-­‐label="Search">
65. <input  type="email"  name="email" placeholder="name@domain.com">
76. ::-­‐webkit-­‐input-­‐placeholder  {  color:   blue;  } ::-­‐moz-­‐placeholder  {  color:  blue;  } :-­‐ms-­‐input-­‐placeholder  {  color:  blue;  } :-­‐moz-­‐placeholder  {  color:  blue;  }
77. <input  type="text"  name="city"   required>                    
78. <input  type="text"  name="city"   required  aria-­‐required="true">
91. input[required]  {  ...  }   or input:required  {  ...  }
92. input:optional  {  ...  }
122. aria-­‐live="polite" aria-­‐live="assertive"
125. <input  type="number"  name="number"   min="1"  max="100"> input:valid  {  border:  3px  solid  green;  } input:invalid  {  border:  3px  dotted  red;  }
126. <input  type="text"  name="fieldname"   autocorrect="off">
127. <input  type="text"  name="fieldname"   autocapitalize="off">
128. <input  type="text"  name="fieldname"   autocapitalize="off"> autocapitalize="characters" autocapitalize="words" autocapitalize="sentences"
172. Clarissa Peterson www.clarissapeterson.com @clarissa