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.

1. BAD FORM
@cliener

5. wufoo.com/html5/

6. <input
type="email">

7. <input
type="tel">

8. <input
type="url">

9. <input
type="number">

10. <input
type="datetime">

12. <input
required>

13. <input
placeholder=
"dd/mm/yyyy">

14. webaxe.org/floated-labels-still-suck/

15. <input
pattern="/d*">

16. <input
autocorrect="off">

17. <input
autocapitalize="off">

18. <input
autofocus>

22. FIXED!

24. Form

25. Form
Fieldset

26. Form
Fieldset
[no legend]

27. Form
Fieldset
[no legend]
Block element (p, li, th, td)

28. Form
Fieldset
[no legend]
Block element (p, li, th, td)
Label (id)

29. Form
Fieldset
[no legend]
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. Vertical label/field

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 to make mistakes

47. “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

49. Allow people to make 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 to make mistakes
Clearly mark invalid fields
Pattern validate on entry

54. Allow people to make 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 to make mistakes
Clearly mark invalid fields
Pattern validate on entry
Enforce minimum not maximum
Get it right

64. Embrace & extend HTML, DOM

65. Embrace & extend HTML, DOM
Polyfill older browsers

70. Lots of coding

71. QUAID JS
github.com/cliener/Quaid-JS

72. http://www.netmagazine.com/shop/magazines/april-2013-239

73. creativebloq.com/javascript/build-better-web-forms-javascript-
10135045

74. “Unless someone like you cares a
whole awful lot nothing is going to
get better. It’s not.”
Dr Seuss

75. @cliener
slideshare.net/cliener