Downloaded 14 times
![Form
Fieldset
[no legend]](https://image.slidesharecdn.com/jsconfx-141119202254-conversion-gate01/75/Bad-Form-JSConf-Asia-2014-26-2048.jpg)
![Form
Fieldset
[no legend]
Block element (p, li, th, td)](https://image.slidesharecdn.com/jsconfx-141119202254-conversion-gate01/75/Bad-Form-JSConf-Asia-2014-27-2048.jpg)
![Form
Fieldset
[no legend]
Block element (p, li, th, td)
Label (id)](https://image.slidesharecdn.com/jsconfx-141119202254-conversion-gate01/75/Bad-Form-JSConf-Asia-2014-28-2048.jpg)
![Form
Fieldset
[no legend]
Block element (p, li, th, td)
Label (id)
Field](https://image.slidesharecdn.com/jsconfx-141119202254-conversion-gate01/75/Bad-Form-JSConf-Asia-2014-29-2048.jpg)
Uploaded bycliener
Bad Form @ JSConf Asia 2014
The document discusses best practices for web form design, emphasizing the importance of user-friendly features such as marking required fields, validating input, and allowing users to make mistakes. It advocates for clear labeling and error indication as well as compatibility with older browsers through polyfills. Additionally, it includes references to external resources for further learning about form improvement techniques.
More Related Content
![Django Girls Mbale [victor's sessions]](https://cdn.slidesharecdn.com/ss_thumbnails/djangogirlsvictorssessions-141111012524-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Falling in Love with Forms [Microsoft Edge Web Summit 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/fallinginlovewithformsmicrosoftedgewebsummit2015-150505184159-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![The Features of Highly Effective Forms [An Event Apart Nashville 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/thefeaturesofhighlyeffectiveformsaeanashville2016-160316145137-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Bad Form @ JSConf Asia 2014
Bad Form @ JSConf Asia 2014
- 1.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 22.
- 24.
- 25.
- 26. Form Fieldset [nolegend]
- 27. Form Fieldset [nolegend] Block element (p, li, th, td)
- 28. Form Fieldset [nolegend] Block element (p, li, th, td) Label (id)
- 29. Form Fieldset [nolegend] Block element (p, li, th, td) Label (id) Field
- 30. <form method="post" action="wds.aspx"> <fieldset> <p><label for="name">Name</label> <input type="text" name="name" id="name"></p> </fieldset> </form>
- 31.
- 34. Vertical label/field Horizontal(search)
- 36. Vertical label/field Horizontal(search) Clear path to completion
- 39. Vertical label/field Horizontal(search) Clear path to completion Mark optional fields
- 44. Allow people tomake mistakes
- 47. “The real dangeris not that computers will begin to think like men, but that men will begin to think like computers.” Sydney J Harris
- 49. Allow people tomake mistakes Clearly mark invalid fields
- 51. <p><label for="birth-‐date">Birth Date</ label> <input type="text" class="date" name="birth-‐date" id="birth-‐date" required></p>
- 52. <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>
- 53. Allow people tomake mistakes Clearly mark invalid fields Pattern validate on entry
- 54. Allow people tomake mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum
- 56. "4123 5678 9012 3456" .replace(/(s)/g, ""); >>> "4123567890123456"
- 61. Allow people tomake mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum Get it right
- 64. Embrace & extendHTML, DOM
- 65. Embrace & extendHTML, DOM Polyfill older browsers
- 70.
- 71.
- 72.
- 73.
- 74. “Unless someone likeyou cares a whole awful lot nothing is going to get better. It’s not.” Dr Seuss
- 75.