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.

Bad Form @ JSConf Asia 2014

1,454 views

Published on

At any given time and place, if you listen carefully, you can hear the screams of frustration from people trying to fill out a form on the web. We web developers are the ones who can fix it and I'll show you how.

Published in: Technology
  • Be the first to comment

Bad Form @ JSConf Asia 2014

  1. 1. BAD FORM @cliener
  2. 2. wufoo.com/html5/
  3. 3. <input type="email">
  4. 4. <input type="tel">
  5. 5. <input type="url">
  6. 6. <input type="number">
  7. 7. <input type="datetime">
  8. 8. <input required>
  9. 9. <input placeholder= "dd/mm/yyyy">
  10. 10. webaxe.org/floated-labels-still-suck/
  11. 11. <input pattern="/d*">
  12. 12. <input autocorrect="off">
  13. 13. <input autocapitalize="off">
  14. 14. <input autofocus>
  15. 15. FIXED!
  16. 16. Form
  17. 17. Form Fieldset
  18. 18. Form Fieldset [no legend]
  19. 19. Form Fieldset [no legend] Block element (p, li, th, td)
  20. 20. Form Fieldset [no legend] Block element (p, li, th, td) Label (id)
  21. 21. Form Fieldset [no legend] Block element (p, li, th, td) Label (id) Field
  22. 22. <form method="post" action="wds.aspx"> <fieldset> <p><label for="name">Name</label> <input type="text" name="name" id="name"></p> </fieldset> </form>
  23. 23. Vertical label/field
  24. 24. Vertical label/field Horizontal (search)
  25. 25. Vertical label/field Horizontal (search) Clear path to completion
  26. 26. Vertical label/field Horizontal (search) Clear path to completion Mark optional fields
  27. 27. Allow people to make mistakes
  28. 28. “The real danger is not that computers will begin to think like men, but that men will begin to think like computers.” Sydney J Harris
  29. 29. Allow people to make mistakes Clearly mark invalid fields
  30. 30. <p><label for="birth-­‐date">Birth Date</ label> <input type="text" class="date" name="birth-­‐date" id="birth-­‐date" required></p>
  31. 31. <p><label for="birth-­‐date">Birth Date</ label> <input type="text" class="date" name="birth-­‐date" id="birth-­‐date" required aria-­‐invalid="true"> <label for="birth_date" class="errata" role="alert">Please enter a value</ label></p>
  32. 32. Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry
  33. 33. Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum
  34. 34. "4123 5678 9012 3456" .replace(/(s)/g, ""); >>> "4123567890123456"
  35. 35. Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum Get it right
  36. 36. Embrace & extend HTML, DOM
  37. 37. Embrace & extend HTML, DOM Polyfill older browsers
  38. 38. Lots of coding
  39. 39. QUAID JS github.com/cliener/Quaid-JS
  40. 40. http://www.netmagazine.com/shop/magazines/april-2013-239
  41. 41. creativebloq.com/javascript/build-better-web-forms-javascript- 10135045
  42. 42. “Unless someone like you cares a whole awful lot nothing is going to get better. It’s not.” Dr Seuss
  43. 43. @cliener slideshare.net/cliener

×