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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. 
    Text Input Type
    

    View Slide

15. 
    Date Input Type
    

    View Slide

16. 
    Date Input Type
    

    View Slide

17. 
    Date Input Type
    

    View Slide

18. View Slide

19. 
    Date Input Type
    

    View Slide

20. View Slide

21. Month Input Type
    
    

    View Slide

22. Month Input Type
    
    

    View Slide

23. 
    Time Input Type
    

    View Slide

24. 
    Time Input Type
    

    View Slide

25. 
    Email Input Type
    

    View Slide

26. 
    Email Input Type
    

    View Slide

27. 
    URL Input Type
    

    View Slide

28. 
    Telephone Input Type
    

    View Slide

29. 
    Telephone Input Type
    

    View Slide

30. View Slide

31. 
    Number Input Type
    

    View Slide

32. 
    Number Input Type
    

    View Slide

33. View Slide

34. Dropdowns (Select)
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
    

    View Slide

40. Categories (optgroup)
    

    View Slide

41. View Slide

42. 
    ''
    ''''Bacon
    ''''Chicken
    ''''Ham
    '''
    ''
    ''''Green'Peppers
    option>
    ''''Mushrooms
    option>
    '''
    
    

    View Slide

43. 
    ''''First'name
    
    id="firstname">
    Labels
    

    View Slide

44. 
    ''''First'name:
    ''''
    
    Labels
    

    View Slide

45. 
    ''''First'name:
    ''''''''name="fname"'id="firstname">
    
    Labels
    

    View Slide

46. aria-label
    aria8label="Search">
    

    View Slide

47. Placeholder
    

    View Slide

48. placeholder="name@domain.com">
    Placeholder
    

    View Slide

49. Placeholder
    

    View Slide

50. Placeholder
    

    View Slide

51. Placeholder
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. Placeholder
    

    View Slide

56. Placeholder
    

    View Slide

57. ::8webkit8input8placeholder'{'color:'
    blue;'}
    ::8moz8placeholder'{'color:'blue;'}
    :8ms8input8placeholder'{'color:'blue;'}
    :8moz8placeholder'{'color:'blue;'}
    Placeholder
    

    View Slide

58. required>''''''''
    ''
    Required Fields
    

    View Slide

59. required'aria8required="true">
    Required Fields
    

    View Slide

60. Required Fields
    

    View Slide

61. Required Fields
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Required Fields
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. input[required]'{'...'}'
    or
    input:required'{'...'}
    Required
    

    View Slide

72. input:optional'{'...'}
    Optional
    

    View Slide

73. Instructions
    

    View Slide

74. View Slide

75. Instructions
    

    View Slide

76. Instructions
    

    View Slide

77. View Slide

78. Creating a Password
    

    View Slide

79. Creating a Password
    

    View Slide

80. Creating a Password
    

    View Slide

81. View Slide

82. View Slide

83. Validation
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. Confirmation
    

    View Slide

88. Confirmation
    

    View Slide

89. Confirmation
    

    View Slide

90. Layout
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. Label Placement
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. Label Placement
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. Layout
     

     View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. https://www.lynda.com/HTML-tutorials/HTML-CSS-Creating-Forms/612196-2.html
     

     View Slide

116. Clarissa Peterson
     clarissapeterson.com
     @clarissa
     

     View Slide