The document discusses web forms and form design patterns. It provides examples of building forms using HTML and HTML5 attributes. It also discusses validating forms early and allowing users to make mistakes. Custom validation using JavaScript and server calls is described. The document promotes embracing and extending HTML to create custom form field types and validation.

1. Web Forms
People
Don’t Hate
Chris Lienert
@cliener

2. Ooh!
Double Negative!

3. Love

4. Ooh!
EotW
Double Negative!

5. End of the World

6. I work for Jardine Lloyd Thompson

7. Who used to smuggle opium

8. Insurance means forms

9. And forms

10. And more forms

11. Imagine filling that out online

12. Or on your mobile

13. Design Patterns
http://www.lukew.com/resources/web_form_design.asp

14. Design Patterns
Vertical label/field

15. Vertical Label/Field

16. Design Patterns
Vertical label/field
Horizontal (search)

17. Horizontal (Search)

18. Design Patterns
Vertical label/field
Horizontal (search)
Clear path to completion

19. Clear Path to Completion

20. Design Patterns
Vertical label/field
Horizontal (search)
Clear path to completion
Mark optional fields

21. Mark Optional Fields

22. Don’t do this

23. Build
Form

24. Build
Form
Fieldset

25. Build
Form
Fieldset
[no caption]

26. Build
Form
Fieldset
[no caption]
Block element (p, li, th, td)

27. Build
Form
Fieldset
[no caption]
Block element (p, li, th, td)
Label (id)

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

29. Build
<form
method="post"
action="wds.aspx">
<fieldset>
<p><label
for="name">Name</label>
<input
type="text"
name="name"
id="name"></p>
</fieldset>
</form>

30. HTML5 Forms
http://wufoo.com/html5

31. HTML5 Attributes
maxlength for TextArea

32. HTML5 Attributes
maxlength for TextArea
required

33. HTML5 Attributes
maxlength for TextArea
required
placeholder

34. HTML5 Attributes
maxlength for TextArea
required
placeholder
autocorrect="off "

35. HTML5 Attributes
maxlength for TextArea
required
placeholder
autocorrect="off "
autocapitalize="off "

36. HTML5 Attributes
maxlength for TextArea
required
placeholder
autocorrect="off "
autocapitalize="off "
autofocus

37. Autofocus in Practice – Type…

38. Autofocus in Practice – Type…

39. Autofocus in Practice – Argh!

40. Autofocus in Practice – Argh!
F IX E D !

41. HTML5 Attributes
Pattern
• default error messages
are awful
• doesn't scale well
• does a fine robot dance

42. HTML5 Attributes
Pattern
• pattern="/d*"

43. HTML5 Input Types
Email
• instant win
• iOS keyboard love

44. HTML5 Input Types
Date, Month, Week, Time
• don’t

45. HTML5 Input Types

46. HTML5 Input Types
Tel
• fairly useless
• iOS keyboard love

47. People get things wrong

48. Validation to the rescue!

49. You Wouldn’t Like Me When I’m Angry

51. Validate Early,Validate Often
Allow people to make mistakes

52. Allow People to Make Mistakes

53. Allow People to Make Mistakes

54. Allow People to Make Mistakes
“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

55. Allow People to Make Mistakes

56. Validate Early,Validate Often
Allow people to make mistakes
Clearly mark invalid fields

57. Clearly Mark Invalid Fields

58. Clearly Mark Invalid Fields
<p><label
for="birth-­‐date">Birth
Date</
label>
<input
type="text"
class="date"
name="birth-­‐date"
id="birth-­‐date"
required></p>

59. Clearly Mark Invalid Fields
<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>

60. Validate Early,Validate Often
Allow people to make mistakes
Clearly mark invalid fields
Pattern validate on entry

61. Pattern Validate on Entry

62. Validate Early,Validate Often
Allow people to make mistakes
Clearly mark invalid fields
Pattern validate on entry
Enforce minimum not maximum

63. Enforce Minimum not Maximum

64. Enforce Minimum not Maximum

65. Distraction
http://bit.ly/Oaqlre

66. Validate Early,Validate Often
Allow people to make mistakes
Clearly mark invalid fields
Pattern validate on entry
Enforce minimum not maximum
Get it right

67. Get it Right

68. A Bunch of Malarkey

69. Special Exhibit

70. Special Exhibit

71. Special Exhibit

74. Build

75. Build

76. Build

77. Build
Lots of coding

78. Build

79. Quaid JS
Embrace & extend HTML, DOM

80. Quaid JS
Embrace & extend HTML, DOM
Polyfill older browsers

81. Embrace and Extend
Tel
• phone
<input
type="tel"
class="phone">
• mobile
<input
type="tel"
class="mobile">

82. Embrace and Extend
Postcode
• data-­‐state-­‐field
<input
type="text"
class="postcode"
data-­‐
state-­‐field="state">
<select
id="state"
name="state">…</
select>

83. Embrace and Extend
Time
<input
type="text"
class="time">
Date
<input
type="text"
class="date">
Year
<input
type="text"
class="year">

84. Embrace and Extend
Numeric
<input
type="text"
class="numeric">
Integer
<input
type="text"
class="integer">
Currency
<input
type="text"
class="currency">

85. Embrace and Extend
Positive Numeric
<input
type="text"
class="positive_numeric">
Positive Integer
<input
type="text"
class="positive_integer">
Positive Currency
<input
type="text"
class="positive_currency">

86. Embrace and Extend
Credit Card
<input
type="text"
class="credit_card">
CSC
<input
type="text"
class="csc">

87. Data Attributes
Required if
<input
type="checkbox"
name="variable-­‐
field"
id="variable-­‐field">
…
<input
type="text"
name="target-­‐field"
id="target-­‐field"
data-­‐required-­‐
field="variable-­‐field">

88. Data Attributes
Visible if
<input
type="checkbox"
name="variable-­‐
field"
id="variable-­‐field">
…
<p
data-­‐visible-­‐field="variable-­‐field">…
</p>

89. Custom Validation
Inline
$("#field").addValidation(function
(el)
{
if
(!(el.isValid
=
!el.checked))
{
el.errorMessage
=
"Check
the
box
or
else.";
}
});

90. Custom Validation
On Submit
$("#field").addSubmitValidation(function
(el)
{
if
(!(el.isValid
=
!el.checked))
{
el.errorMessage
=
"Check
the
box
or
else.
Really.";
}
});

91. Custom Validation
Ajax Server Call
$("#postcode").addServerValidation({
path:
"validation.svc/IsValidPostcode?
postcode="
})

92. Custom Validation
Ajax Service
public
ValidationResponse
IsValidPostcode(string
postcode,
string
caller)
{
using
(var
p
=
new
PostalAddressClient())
{
if
(!string.IsNullOrEmpty(postcode)
&&
!
p.IsValidPostcode(postcode))
{
…
}

93. Custom Validation
Ajax Service
public
ValidationResponse
IsValidPostcode(…)
{
…
return
new
ValidationResponse(…,
caller);
}
}
return
new
ValidationResponse(string.Empty,
caller);
}

94. Custom Validation
Ajax Response
>
validationResponse
{
message:
"",
caller:
"postcode"
}

95. Plug-in Internationalisation
Custom methods and errors
quaid.forms-au-4.0.js
message:
{
required:
"Value
not
entered"
}
quaid.forms-ca-4.0.js
message:
{
required:
"Value
not
entered,
eh.
Go
Leafs!"
}

96. Elephant in the Room

97. Elephant in the Room
6+

98. And the Rest
6+ 3.6+

99. When the Lights Go Down
JavaScript
HTML5
Server
<label
class="server-­‐error">

100. Ready for the Taking
https://github.com/cliener/Quaid-JS

101. On a Web Site Near You
http://physical.jltsport.com.au

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

103. Standing on the Shoulders of Giants
Wufoo
The Current State of HTML5 Forms
http://wufoo.com/html5/
Luke W
Web Form Design: Filling in the Blanks
http://www.lukew.com/resources/web_form_design.asp
Evolving E-commerce Checkout
http://www.lukew.com/ff/entry.asp?1579

104. Standing on the Shoulders of Giants
Steve Krug
Don't Make Me Think
http://www.sensible.com/dmmt.html
Punkchip
WAI-ARIA to enhance form validation
http://www.punkchip.com/2010/12/aria-enhance-
form-validation/