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.

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