Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@clarissa
Creating Beautiful,Accessible,
and User-Friendly
Forms
<input	
  type="text"	
  name="fullname">
Text
<input	
  type="date"	
  name="birthday">
Date
<input	
  type="date"	
  name="birthday">
Date
<input	
  type="date"	
  name="birthday">
Date
<input	
  type="date"	
  name="birthday">
Date
Month
<input	
  type="month"	
  name="month">
Month
<input	
  type="month"	
  name="month">
Month
<input	
  type="month"	
  name="month">
<input	
  type="time"	
  name="start-­‐
time">
Time
<input	
  type="time"	
  name="start-­‐
time">
Time
<input	
  type="time"	
  name="start-­‐
time">
Time
<input	
  type="time"	
  name="start-­‐
time">
Time
<input	
  type="email"	
  name="email">
Email
<input	
  type="email"	
  name="email">
Email
<input	
  type="email"	
  name="email">
Email
<input	
  type="email"	
  name="email">
Email
<input	
  type="url"	
  name="website">
URL
<input	
  type="url"	
  name="website">
URL
<input	
  type="tel"	
  name="phone">
Telephone
<input	
  type="tel"	
  name="phone">
Telephone
<input	
  type="number"	
  name="amount">
Number
<input	
  type="number"	
  name="amount">
Number
<input	
  type="radio"	
  value="red"	
  
name="color"	
  id="red"><label	
  
for="red">red</label>
<input	
  type="radio"...
label	
  {	
  
	
  	
  	
  	
  background-­‐color:	
  #ffa;
	
  	
  	
  	
  padding:	
  3px	
  6px;
	
  	
  	
  	
  border...
input[type="radio"]	
  {
	
  	
  	
  	
  opacity:0;
	
  	
  	
  	
  z-­‐index:100;
}
label	
  {
	
  	
  	
  	
  margin-­‐left:	
  -­‐17px;
}
input[type="radio"]:checked	
  +	
  label	
  
{	
  
	
  	
  	
  	
  color:	
  #fff;
	
  	
  	
  	
  background-­‐color:	
 ...
input[type="radio"]:checked	
  +	
  label	
  
{	
  
	
  	
  	
  	
  color:	
  #fff;
	
  	
  	
  	
  background-­‐color:	
 ...
input[type="radio"]:checked	
  +	
  label	
  
{	
  
	
  	
  	
  	
  color:	
  #fff;
	
  	
  	
  	
  background-­‐color:	
 ...
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
<select>
	
  	
  <optgroup	
  label="Meat">
	
  	
  	
  	
  <option	
  value="bacon">Bacon</option>
	
  	
  	
  	
  <optio...
<label	
  for="firstname">
	
  	
  	
  	
  First	
  name
</label>
<input	
  type="text"	
  name="fname"	
  
id="firstname">
<label>
	
  	
  	
  	
  First	
  name:
	
  	
  	
  	
  <input	
  type="text"	
  name="fname">
</label>
<label	
  for="firstname">
	
  	
  	
  	
  First	
  name:
	
  	
  	
  	
  <input	
  type="text"	
  
	
  	
  	
  	
  name="...
<input	
  type="search"	
  name="search"	
  
aria-­‐label="Search">
<input	
  type="email"	
  name="email"
placeholder="name@domain.com">
::-­‐webkit-­‐input-­‐placeholder	
  {	
  color:	
  
blue;	
  }
::-­‐moz-­‐placeholder	
  {	
  color:	
  blue;	
  }
:-­‐ms...
<input	
  type="text"	
  name="city"	
  
required>	
  	
  	
  	
  	
  	
  	
  	
  
	
  	
  
<input	
  type="text"	
  name="city"	
  
required	
  aria-­‐required="true">
input[required]	
  {	
  ...	
  }	
  
or
input:required	
  {	
  ...	
  }
input:optional	
  {	
  ...	
  }
aria-­‐live="polite"
aria-­‐live="assertive"
<input	
  type="number"	
  name="number"	
  
min="1"	
  max="100">
input:valid	
  {	
  border:	
  3px	
  solid	
  green;	
...
<input	
  type="text"	
  name="fieldname"	
  
autocorrect="off">
<input	
  type="text"	
  name="fieldname"	
  
autocapitalize="off">
<input	
  type="text"	
  name="fieldname"	
  
autocapitalize="off">
autocapitalize="characters"
autocapitalize="words"
aut...
Clarissa Peterson
www.clarissapeterson.com
@clarissa
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Upcoming SlideShare
Loading in …5
×

Creating Beautiful, Accessible, and User-Friendly Forms

24,810 views

Published on

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.

Published in: Design
  • Be the first to comment

Creating Beautiful, Accessible, and User-Friendly Forms

  1. 1. @clarissa Creating Beautiful,Accessible, and User-Friendly Forms
  2. 2. <input  type="text"  name="fullname"> Text
  3. 3. <input  type="date"  name="birthday"> Date
  4. 4. <input  type="date"  name="birthday"> Date
  5. 5. <input  type="date"  name="birthday"> Date
  6. 6. <input  type="date"  name="birthday"> Date
  7. 7. Month <input  type="month"  name="month">
  8. 8. Month <input  type="month"  name="month">
  9. 9. Month <input  type="month"  name="month">
  10. 10. <input  type="time"  name="start-­‐ time"> Time
  11. 11. <input  type="time"  name="start-­‐ time"> Time
  12. 12. <input  type="time"  name="start-­‐ time"> Time
  13. 13. <input  type="time"  name="start-­‐ time"> Time
  14. 14. <input  type="email"  name="email"> Email
  15. 15. <input  type="email"  name="email"> Email
  16. 16. <input  type="email"  name="email"> Email
  17. 17. <input  type="email"  name="email"> Email
  18. 18. <input  type="url"  name="website"> URL
  19. 19. <input  type="url"  name="website"> URL
  20. 20. <input  type="tel"  name="phone"> Telephone
  21. 21. <input  type="tel"  name="phone"> Telephone
  22. 22. <input  type="number"  name="amount"> Number
  23. 23. <input  type="number"  name="amount"> Number
  24. 24. <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>
  25. 25. label  {          background-­‐color:  #ffa;        padding:  3px  6px;        border-­‐radius:  4px;   }
  26. 26. input[type="radio"]  {        opacity:0;        z-­‐index:100; }
  27. 27. label  {        margin-­‐left:  -­‐17px; }
  28. 28. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  29. 29. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  30. 30. input[type="radio"]:checked  +  label   {          color:  #fff;        background-­‐color:  orange; }
  31. 31. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
  32. 32. https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
  33. 33. <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>
  34. 34. <label  for="firstname">        First  name </label> <input  type="text"  name="fname"   id="firstname">
  35. 35. <label>        First  name:        <input  type="text"  name="fname"> </label>
  36. 36. <label  for="firstname">        First  name:        <input  type="text"          name="fname"  id="firstname"> </label>
  37. 37. <input  type="search"  name="search"   aria-­‐label="Search">
  38. 38. <input  type="email"  name="email" placeholder="name@domain.com">
  39. 39. ::-­‐webkit-­‐input-­‐placeholder  {  color:   blue;  } ::-­‐moz-­‐placeholder  {  color:  blue;  } :-­‐ms-­‐input-­‐placeholder  {  color:  blue;  } :-­‐moz-­‐placeholder  {  color:  blue;  }
  40. 40. <input  type="text"  name="city"   required>                    
  41. 41. <input  type="text"  name="city"   required  aria-­‐required="true">
  42. 42. input[required]  {  ...  }   or input:required  {  ...  }
  43. 43. input:optional  {  ...  }
  44. 44. aria-­‐live="polite" aria-­‐live="assertive"
  45. 45. <input  type="number"  name="number"   min="1"  max="100"> input:valid  {  border:  3px  solid  green;  } input:invalid  {  border:  3px  dotted  red;  }
  46. 46. <input  type="text"  name="fieldname"   autocorrect="off">
  47. 47. <input  type="text"  name="fieldname"   autocapitalize="off">
  48. 48. <input  type="text"  name="fieldname"   autocapitalize="off"> autocapitalize="characters" autocapitalize="words" autocapitalize="sentences"
  49. 49. Clarissa Peterson www.clarissapeterson.com @clarissa

×