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

Clarissa Peterson: Creating beautiful, accessible, and user-friendly forms

March 01, 2017

Clarissa Peterson: Creating beautiful, accessible, and user-friendly forms

Video: https://www.youtube.com/watch?v=56B8DR6lyWs

Speaker: Clarissa Peterson is a UX designer and web developer based in Calgary, Alberta. She frequently speaks and gives workshops on responsive design and user experience, and also teaches in the web developer fast track program at the Southern Alberta Institute of Technology (SAIT). Clarissa is the author of Learning Responsive Web Design: A Beginner's Guide (O'Reilly Media).

Abstract: 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.

Twitter Link: https://twitter.com/clarissa


March 01, 2017

More Decks by Realm

Other Decks in Technology


  1. <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>
  2. label  {          background-­‐color:  #ffa;    

       padding:  3px  6px;        border-­‐radius:  4px;   }
  3. input[type="radio"]:checked  +  label   {          color:

     #fff;        background-­‐color:  orange; }
  4. input[type="radio"]:checked  +  label   {          color:

     #fff;        background-­‐color:  orange; }
  5. input[type="radio"]:checked  +  label   {          color:

     #fff;        background-­‐color:  orange; }
  6. <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>
  7. <label>        First  name:        <input

     type="text"  name="fname"> </label>
  8. <label  for="firstname">        First  name:      

     <input  type="text"          name="fname"  id="firstname"> </label>
  9. ::-­‐webkit-­‐input-­‐placeholder  {  color:   blue;  } ::-­‐moz-­‐placeholder  {  color:  blue;

     } :-­‐ms-­‐input-­‐placeholder  {  color:  blue;  } :-­‐moz-­‐placeholder  {  color:  blue;  }
  10. <input  type="number"  name="number"   min="1"  max="100"> input:valid  {  border:  3px

     solid  green;  } input:invalid  {  border:  3px  dotted  red;  }