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 full-size slide


  2. Text Input Type

    View full-size slide


  3. Date Input Type

    View full-size slide


  4. Date Input Type

    View full-size slide


  5. Date Input Type

    View full-size slide


  6. Date Input Type

    View full-size slide

  7. Month Input Type

    View full-size slide

  8. Month Input Type

    View full-size slide


  9. Time Input Type

    View full-size slide


  10. Time Input Type

    View full-size slide


  11. Email Input Type

    View full-size slide


  12. Email Input Type

    View full-size slide


  13. URL Input Type

    View full-size slide


  14. Telephone Input Type

    View full-size slide


  15. Telephone Input Type

    View full-size slide


  16. Number Input Type

    View full-size slide


  17. Number Input Type

    View full-size slide

  18. Dropdowns (Select)

    View full-size slide

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

    View full-size slide

  20. Categories (optgroup)

    View full-size slide


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

    View full-size slide


  22. ''''First'name

    id="firstname">
    Labels

    View full-size slide


  23. ''''First'name:
    ''''

    Labels

    View full-size slide


  24. ''''First'name:
    ''''''''name="fname"'id="firstname">

    Labels

    View full-size slide

  25. aria-label
    aria8label="Search">

    View full-size slide

  26. placeholder="[email protected]">
    Placeholder

    View full-size slide

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

    View full-size slide

  28. required>''''''''
    ''
    Required Fields

    View full-size slide

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

    View full-size slide

  30. Required Fields

    View full-size slide

  31. Required Fields

    View full-size slide

  32. Required Fields

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Instructions

    View full-size slide

  36. Instructions

    View full-size slide

  37. Instructions

    View full-size slide

  38. Creating a Password

    View full-size slide

  39. Creating a Password

    View full-size slide

  40. Creating a Password

    View full-size slide

  41. Confirmation

    View full-size slide

  42. Confirmation

    View full-size slide

  43. Confirmation

    View full-size slide

  44. Label Placement

    View full-size slide

  45. Label Placement

    View full-size slide

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

    View full-size slide

  47. Clarissa Peterson
    clarissapeterson.com
    @clarissa

    View full-size slide