Pro Yearly is on sale from $80 to $50! »

Creating Beautiful, Accessible, and User-Friendly Forms

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.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

December 04, 2017
Tweet

Transcript

  1. @clarissa Creating Forms That Users Won't Hate

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  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

  18. None
  19. <input'type="date"'name="birthday"> Date Input Type

  20. None
  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

  30. None
  31. <input'type="number"'name="amount"> Number Input Type

  32. <input'type="number"'name="amount"> Number Input Type

  33. None
  34. Dropdowns (Select)

  35. None
  36. None
  37. None
  38. None
  39. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/

  40. Categories (optgroup)

  41. None
  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

  52. None
  53. None
  54. None
  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

  62. None
  63. None
  64. None
  65. None
  66. None
  67. Required Fields

  68. None
  69. None
  70. None
  71. input[required]'{'...'}' or input:required'{'...'} Required

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

  73. Instructions

  74. None
  75. Instructions

  76. Instructions

  77. None
  78. Creating a Password

  79. Creating a Password

  80. Creating a Password

  81. None
  82. None
  83. Validation

  84. None
  85. None
  86. None
  87. Confirmation

  88. Confirmation

  89. Confirmation

  90. Layout

  91. None
  92. None
  93. None
  94. None
  95. Label Placement

  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. Label Placement

  107. None
  108. None
  109. None
  110. Layout

  111. None
  112. None
  113. None
  114. None
  115. https://www.lynda.com/HTML-tutorials/HTML-CSS-Creating-Forms/612196-2.html

  116. Clarissa Peterson clarissapeterson.com @clarissa