Bad Form @ JSConf Asia 2014

  • Published on
    02-Jul-2015

  • View
    746

  • Download
    2

Embed Size (px)

DESCRIPTION

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.

Transcript

  • 1. BAD FORM@cliener

2. wufoo.com/html5/ 3. 4. 5. 6. 7. 8. 9. 10. webaxe.org/floated-labels-still-suck/ 11. 12. 13. 14. 15. FIXED! 16. Form 17. FormFieldset 18. FormFieldset[no legend] 19. FormFieldset[no legend]Block element (p, li, th, td) 20. FormFieldset[no legend]Block element (p, li, th, td)Label (id) 21. FormFieldset[no legend]Block element (p, li, th, td)Label (id)Field 22.

Name

23. Vertical label/field 24. Vertical label/fieldHorizontal (search) 25. Vertical label/fieldHorizontal (search)Clear path to completion 26. Vertical label/fieldHorizontal (search)Clear path to completionMark optional fields 27. Allow people to make mistakes 28. The real danger is not thatcomputers will begin to think likemen, but that men will begin tothink like computers.Sydney J Harris 29. Allow people to make mistakesClearly mark invalid fields 30.

BirthDate

31.

BirthDatePleaseenteravalue

32. Allow people to make mistakesClearly mark invalid fieldsPattern validate on entry 33. Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum 34. "4123567890123456".replace(/(s)/g,"");>>>"4123567890123456" 35. Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximumGet it right 36. Embrace & extend HTML, DOM 37. Embrace & extend HTML, DOMPolyfill older browsers 38. Lots of coding 39. QUAID JSgithub.com/cliener/Quaid-JS 40. http://www.netmagazine.com/shop/magazines/april-2013-239 41. creativebloq.com/javascript/build-better-web-forms-javascript-10135045 42. Unless someone like you cares awhole awful lot nothing is going toget better. Its not.Dr Seuss 43. @clienerslideshare.net/cliener