Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Beautiful, Accessible, and User-Friendly Forms

Clarissa Peterson
December 04, 2017

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.

Clarissa Peterson

December 04, 2017
Tweet

More Decks by Clarissa Peterson

Other Decks in Design

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="[email protected]">
    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