Creating Beautiful, Accessible, and User-Friendly Forms

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.

Transcript

1. @clarissa Creating Forms That Users Won't Hate
14. <input'type="text"'name="fullname"> Text Input Type
15. <input'type="date"'name="birthday"> Date Input Type
16. <input'type="date"'name="birthday"> Date Input Type
17. <input'type="date"'name="birthday"> Date Input Type
19. <input'type="date"'name="birthday"> Date Input Type
21. Month Input Type <input'type="month"'name="month">
22. Month Input Type <input'type="month"'name="month">
23. <input'type="time"'name="start8time"> Time Input Type
24. <input'type="time"'name="start8time"> Time Input Type
25. <input'type="email"'name="email"> Email Input Type
26. <input'type="email"'name="email"> Email Input Type
27. <input'type="url"'name="website"> URL Input Type
28. <input'type="tel"'name="phone"> Telephone Input Type
29. <input'type="tel"'name="phone"> Telephone Input Type
31. <input'type="number"'name="amount"> Number Input Type
32. <input'type="number"'name="amount"> Number Input Type
34. Dropdowns (Select)
39. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
40. Categories (optgroup)
42. <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>
43. <label'for="firstname"> ''''First'name </label> <input'type="text"'name="fname"' id="firstname"> Labels
44. <label> ''''First'name: ''''<input'type="text"'name="fname"> </label> Labels
45. <label'for="firstname"> ''''First'name: ''''<input'type="text"' ''''name="fname"'id="firstname"> </label> Labels
46. aria-label <input'type="search"'name="search"' aria8label="Search">
47. Placeholder
48. <input'type="email"'name="email" placeholder="name@domain.com"> Placeholder
49. Placeholder
50. Placeholder
51. Placeholder
55. Placeholder
56. Placeholder
57. ::8webkit8input8placeholder'{'color:' blue;'} ::8moz8placeholder'{'color:'blue;'} :8ms8input8placeholder'{'color:'blue;'} :8moz8placeholder'{'color:'blue;'} Placeholder
58. <input'type="text"'name="city"' required>'''''''' '' Required Fields
59. <input'type="text"'name="city"' required'aria8required="true"> Required Fields
60. Required Fields
61. Required Fields
67. Required Fields
71. input[required]'{'...'}' or input:required'{'...'} Required
72. input:optional'{'...'} Optional
73. Instructions
75. Instructions
76. Instructions
78. Creating a Password
79. Creating a Password
80. Creating a Password
83. Validation
87. Confirmation
88. Confirmation
89. Confirmation
90. Layout
95. Label Placement
106. Label Placement
110. Layout
115. https://www.lynda.com/HTML-tutorials/HTML-CSS-Creating-Forms/612196-2.html
116. Clarissa Peterson clarissapeterson.com @clarissa