Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.
In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including
* new HTML5 field types;
* validation, error messages & formatting hints;
* how to mark up and style forms for the greatest flexibility in responsive designs; and
* best practices for enhancing forms with JavaScript.
17. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name
<input type=“text” name=“full_name”>
18. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name
<input name=“full_name”>
19. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name
<input name=“full_name”/>
20. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name
<input name=“full_name”>
21. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label>Your Name</label>
<input name=“full_name”>
22. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name”>
23. FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
24. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“email” required>
We will only use your email address to respond to your message.
25. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“email” required>
We will only use your email address to respond to your message.
!
26. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input id=“email” name=“email” required>
We will only use your email address to respond to your message.
!
27. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required>
We will only use your email address to respond to your message.
!
28. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required>
We will only use your email address to respond to your message.
!
38. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required>
<em>
We will only use your email address to respond to your message.
</em>
39. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required>
<em class=“note”>
We will only use your email address to respond to your message.
</em>
40. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required
aria-describedby=“email-note”>
<em class=“note” id=“email-note”>
We will only use your email address to respond to your message.
</em>
41. FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required
aria-describedby=“email-note”>
<em class=“note” id=“email-note”>
We will only use your email address to respond to your message.
</em>
Screen Reader: Chrome Vox
42. FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“subject”>Purpose of Your Message</label>
<select id="subject" name="subject">
<option>Question/Comment</option>
<option>Article Error</option>
<option>Website Bug Report</option>
<option>Ask the Sherpas a question</option>
</select>
43. FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“message”>Your Message</label>
<textarea id="message" name="message"></textarea>
44. FALLING IN LOVE WITH FORMS
Buttons
<input type=“submit” value=“Send My Message”>
45. FALLING IN LOVE WITH FORMS
Buttons
<button type=“submit”>Send My Message</button>
46. HELPFUL HINT
A button element
can contain pretty
much anything
! (within reason)
47. FALLING IN LOVE WITH FORMS
Buttons
<button type="submit" value=“basic">
<h3>Basic Plan</h3>
<p>You get 20 <abbr title="gigabytes">GB</abbr> of storage
and a single domain name for <strong>$2.99
<abbr title=“per month”>/mo</abbr></strong></p>
</button>
48. That new email field
looks cool, can we
see more of that
fancy HTML5 stuff?
49. FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
50. FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
51. FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
52. FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
placeholder=“http://www.yoursite.com/specific-page#anchored-section”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
54. FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
placeholder=“http://www.yoursite.com/specific-page#anchored-section”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
55. FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label>
<input type=“url” id=“url” name=“url” required
aria-describedby=“url-note”
placeholder=“http://www.yoursite.com/specific-page#anchored-section”
>
<em class=“note” id=“url-note”>
Please provide the URL for the specific page that includes the area
you want reviewed.
</em>
56. FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label>
<input type="tel" id="preferred_phone" name=“preferred_phone”
placeholder="ex. 123-456-7890”
>
57. FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label>
<input type="tel" id="preferred_phone" name=“preferred_phone”
placeholder="ex. 123-456-7890”
>
58. FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name="test">
59. FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name="test">
60. FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name=“test”
pattern=“[0-9]*”
>
<!-- Note: pattern ensures Safari Mobile gives a keypad -->
61. FALLING IN LOVE WITH FORMS
Requesting numbers
<label for=“volume">How Loud is Spinal Tap?</label>
<input id="volume" type=“range" name=“volume”
min=“0” max=“11” step=“1”
>
62. FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name=“test”
pattern=“[0-9]*”
min=“0” max=“9”
>
63. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
>
64. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
>
65. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
>
66. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
min=“2014-09-10” max=“2014-12-19”
>
67. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label>
<input id="preferred_dates" type="date" name=“preferred_dates"
required
min=“2014-09-10” max=“2014-12-19”
>
68. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label>
<input id="preferred_dates" type="time" name=“preferred_dates">
69. FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label>
<input id="preferred_dates" type="time" name=“preferred_dates">
70. FALLING IN LOVE WITH FORMS
Other fun date-related types
๏ month
๏ week
๏ datetime
๏ datetime-local
71
71. FALLING IN LOVE WITH FORMS
Facilitating search
<label for="query">Looking for something?</label>
<input type="search" name="keywords" id="query" value="test">
<button type="submit">Search</button>
72. FALLING IN LOVE WITH FORMS
Facilitating search
<label for="query">Looking for something?</label>
<input type="search" name="keywords" id="query" value="test">
<button type="submit">Search</button>
73. FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datalist id="states">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</datalist>
74. FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datalist id="states">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</datalist>
75. FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<!-- options continue -->
</datalist>
76. FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label>
<input id="state" name="state" list="states">
<datalist id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<!-- options continue -->
</datalist>
77. FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“states”>
!
<select name=“state” aria-labelledby=“state_label”>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</select>
!
If other, please specify
!
</datalist>
<input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
78. FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“states”>
!
<select name=“state” aria-labelledby=“state_label”>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</select>
!
If other, please specify
!
</datalist>
<input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
79. FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“states”>
!
<select name=“state” aria-labelledby=“state_label”>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</select>
!
If other, please specify
!
</datalist>
<input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
80. FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks
<label for=“state" id=“state_label”>State</label>
<datalist id=“states”>
!
<select name=“state” aria-labelledby=“state_label”>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<!-- options continue -->
</select>
!
If other, please specify
!
</datalist>
<input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
81. Ok, I get it: forms in
HTML5 are awesome.
But how should we
organize our forms?
82. FALLING IN LOVE WITH FORMS
Do we divide it up?
<div>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</div>
83. FALLING IN LOVE WITH FORMS
Do paragraphs make sense?
<p>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</p>
84. FALLING IN LOVE WITH FORMS
Is it a list of questions?
<ol>
<li>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</li>
</ol>
85. FALLING IN LOVE WITH FORMS
Is it a list of questions?
form ol,
form ul {
list-style: none;
margin: 0;
padding: 0;
}
86. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“text”>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</li>
87. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“form-control form-control--text”>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</li>
88. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“text”>
<label for=“full_name”>Your Name</label>
<input id=“full_name” name=“full_name” required>
</li>
89. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“email”>
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required
aria-describedby=“email-note”>
<em class=“note” id=“email-note”>
We will only use your email address to respond
to your message.
</em>
</li>
90. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“select”>
<label for=“subject”>Purpose of Your Message</label>
<select id="subject" name="subject">
<option>Question/Comment</option>
<option>Article Error</option>
<option>Website Bug Report</option>
<option>Ask the Sherpas a question</option>
</select>
</li>
91. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“textarea”>
<label for=“message”>Your Message</label>
<textarea id="message" name=“message"></textarea>
</li>
92. FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“buttons”>
<button type=“submit”>Send My Message</button>
</li>
94. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“accept_terms” value=“yes”>
I agree to the <a href=“/terms”>Terms of Use</a>
95. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“accept_terms” value=“yes”
id=“terms”>
<label for=“terms”>
I agree to the <a href=“/terms”>Terms of Use</a>
</label>
96. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label>
<input type=“checkbox” name=“accept_terms” value=“yes”>
I agree to the <a href=“/terms”>Terms of Use</a>
</label>
97. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
input {
/* Styles for most normal input types */
}
!
label input {
/* Styles for checkbox and radio controls */
}
98. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label for=“terms”>
<input type=“checkbox” name=“accept_terms” value=“yes”
id=“terms”>
I agree to the <a href=“/terms”>Terms of Use</a>
</label>
99. FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<li class=“confirm”>
<label for=“terms”>
<input type=“checkbox” name=“accept_terms” value=“yes”
id=“terms”>
I agree to the <a href=“/terms”>Terms of Use</a>
</label>
</li>
100. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available)
!
<label for="asus-nexus-7">
<input type="checkbox" name="device[]" id=“asus-nexus-7">
Asus Nexus 7
</label>
!
<!-- more options -->
101. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available)
!
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
102. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets (8 available)</legend>
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
</fieldset>
103. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets <em>(8 available)</em></legend>
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
</fieldset>
104. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset>
<legend>Tablets <em>(8 available)</em></legend>
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
</fieldset>
Screen Reader: Chrome Vox
105. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”>
<fieldset>
<legend>Tablets <em>(8 available)</em></legend>
<ul>
<li><!-- Asus Nexus 7 --></li>
<!-- more options -->
</ul>
</fieldset>
</li>
106. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
form .grouped ul li {
float: left;
width: 50%;
}
107. FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
@media only screen and (min-width:30em) {
!
form .grouped ul li {
float: left;
width: 50%;
YMQMV
}
!
}
108. FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
Requested Day and Time
!
<label for="requested_date">Requested Day</label>
<select id=“requested_date" name=“requested_date" required=“”>
<!-- options —>
</select>
<label for="requested_time">Requested Time</label>
<select id="requested_time" name=“requested_time" required="">
<!-- options —>
</select>
109. FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<fieldset>
<legend>Requested Day and Time</legend>
!
<label for="requested_date">Requested Day</label>
<select id=“requested_date" name="requested_date"
required=“”><!-- options --></select>
<label for="requested_time">Requested Time</label>
<select id="requested_time" name=“requested_time" required="">
<!-- options --></select>
!
</fieldset>
110. FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<li class=“grouped date-time-selects”>
<fieldset>
<legend>Requested Day and Time</legend>
!
<label for="requested_date">Requested Day</label>
<select id=“requested_date" name="requested_date"
required=“”><!-- options --></select>
<!-- continued… -->
!
</fieldset>
</li>
111. FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
/* Hide the labels in an accessible way */
form .date-time-selects label {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
112. FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend>Select a date</legend>
!
<label for="month">Month</label>
<select name="month" id=“month”><!-- options --> </select>
!
<!-- continued… -->
!
</fieldset>
</li>
113. FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend>Select a date</legend>
!
<label for="month">Month</label>
<select name="month" id=“month”><!-- options --> </select>
!
<!-- continued… -->
!
</fieldset>
</li>
114. FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend>Select a date</legend>
!
<label for="month">Month</label>
<select name="month" id=“month”><!-- options --> </select>
!
<!-- continued… -->
!
</fieldset>
</li>
Screen Reader: Chrome Vox
115. FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend id=“select_date”>Select a date</legend>
!
<label for=“month" id=“month_label”>Month</label>
<select name="month" id=“month”
aria-labelledby=“select_date month_label”
><!-- options --> </select>
!
<!-- continued… -->
</fieldset>
</li>
116. FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”>
<fieldset>
<legend id=“select_date”>Select a date</legend>
!
<label for=“month" id=“month_label”>Month</label>
<select name="month" id=“month”
aria-labelledby=“select_date month_label”
><!-- options --> </select>
!
<!-- continued… -->
</fieldset>
</li>
Screen Reader: Chrome Vox
118. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<td></td>
<th>Poor</th>
<!-- Headings continue -->
</tr>
</thead>
<tbody>
<tr>
<th>How would you rate your experience with Foo Bar Title
from initial contact to closing?</th>
<td>
<input type="radio" name="experience" value=“1">
</td>
<!-- etc. -->
</tr>
</tbody>
</table>
119. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<td></td>
<th>Poor</th>
<!-- Headings continue -->
</tr>
</thead>
<tbody>
<tr>
<th>How would you rate your experience with Foo Bar Title
from initial contact to closing?</th>
<td>
<input type="radio" name="experience" value=“1">
</td>
<!-- etc. -->
</tr>
</tbody>
</table>
120. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<td></td>
<th>Poor</th>
<!-- Headings continue -->
</tr>
</thead>
<tbody>
<tr>
<th>How would you rate your experience with Foo Bar Title
from initial contact to closing?</th>
<td>
<input type="radio" name="experience" value=“1">
</td>
<!-- etc. -->
</tr>
</tbody>
</table>
121. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<td></td>
<th id=“value-1”>Poor</th>
<!-- Headings continue -->
</tr>
</thead>
<tbody>
<tr>
<th>How would you rate your experience with Foo Bar Title
from initial contact to closing?</th>
<td>
<input … aria-labelledby=“value-1”>
</td>
<!-- etc. -->
</tr>
</tbody>
</table>
122. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<td></td>
<th id=“value-1”>Poor</th>
<!-- Headings continue -->
</tr>
</thead>
<tbody>
<tr>
<th id=“experience”>How would you rate your experience
with Foo Bar Title from initial contact to closing?</th>
<td>
<input … aria-labelledby=“experience value-1”>
</td>
<!-- etc. -->
</tr>
</tbody>
</table>
123. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<!-- Headings before -->
<th id=“value-3”>Good</th>
<!-- Headings after -->
</tr>
</thead>
<tbody>
<tr>
<th id=“experience”>How would you rate your experience
with Foo Bar Title from initial contact to closing?</th>
<!-- values 1 & 2 -->
<td><input … aria-labelledby=“experience value-3”></td>
<!-- values 4 & 5 -->
</tr>
</tbody>
</table>
124. FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table
<table>
<thead>
<tr>
<!-- Headings before -->
<th id=“value-3”>Good</th>
<!-- Headings after -->
</tr>
</thead>
<tbody>
<tr>
<th id=“experience”>How would you rate your experience
with Foo Bar Title from initial contact to closing?</th>
<!-- values 1 & 2 -->
<td><input … aria-labelledby=“experience value-3”></td>
<!-- values 4 & 5 -->
</tr>
</tbody>
</table>
Screen Reader: Chrome Vox
129. FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
130. FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label {
margin: -1em 0;
padding: 1em 0;
}
131. FALLING IN LOVE WITH FORMS
Making old Safari play nice
label {
cursor: pointer;
}
132. FALLING IN LOVE WITH FORMS
No layout before its time
.form-control {
clear: both;
}
.form-control label,
.form-control input {
float: left;
width: 34%;
}
.form-control input {
width: 63%;
}
133. FALLING IN LOVE WITH FORMS
No layout before its time
.form-control label,
.form-control input {
display: block;
margin-bottom: .328em;
}
134. FALLING IN LOVE WITH FORMS
No layout before its time
.form-control label,
.form-control input {
display: block;
margin-bottom: .328em;
}
!
@media only screen and (min-width: 60em) {
/* Side by Side layout */
}
YMQMV
135. FALLING IN LOVE WITH FORMS
No layout before its time
@media only screen and (min-width:30em) {
!
form .grouped ul li {
float: left;
width: 50%;
YMQMV
}
!
}
137. FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p>
<p>
<label for=“first_name">
First Name <abbr title=“required">*</abbr>
</label>
<input id="first_name" name="first_name" required>
</p>
138. FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p>
<p>
<label for=“first_name">
First Name <abbr title=“required">*</abbr>
</label>
<input id="first_name" name="first_name" required>
</p>
139. FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p>
<p>
<label for=“first_name">
First Name <abbr title=“required">*</abbr>
</label>
<input id="first_name" name="first_name" required>
</p>
Screen Reader: Chrome Vox
140. FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are
<strong id="required">required</strong>.</p>
<p>
<label for=“first_name">
First Name
<abbr title=“required” aria-labelledby=“required”>*</abbr>
</label>
<input id="first_name" name="first_name" required>
</p>
141. FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are
<strong id="required">required</strong>.</p>
<p>
<label for=“first_name">
First Name
<abbr title=“required” aria-labelledby=“required”>*</abbr>
</label>
<input id="first_name" name="first_name" required>
</p>
Screen Reader: Chrome Vox
142. FALLING IN LOVE WITH FORMS
Requiring a field
<p tabindex="0">Fields marked with a * are required.</p>
<p>
<label for=“first_name">
First Name <abbr title=“required">*</abbr>
</label>
<input id="first_name" name="first_name" required
aria-required="true">
</p>
143. FALLING IN LOVE WITH FORMS
Requiring a field
<p tabindex="0">Fields marked with a * are required.</p>
<p>
<label for=“first_name">
First Name <abbr title=“required">*</abbr>
</label>
<input id="first_name" name="first_name" required
aria-required="true">
</p>
Screen Reader: Chrome Vox
145. FALLING IN LOVE WITH FORMS
Native validation
<label for=“email”>Your Email</label>
<input type=“email” id=“email” name=“email” required>
We will only use your email address to respond to your message.
!
146. FALLING IN LOVE WITH FORMS
Non-native format validation
<label for="test">What is 1 + 1?</label>
<input id="test" type=“number" name=“test”
pattern=“[0-9]*”
>
147. FALLING IN LOVE WITH FORMS
Non-native format validation
<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
>
148. FALLING IN LOVE WITH FORMS
Non-native format validation
<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
>
150. FALLING IN LOVE WITH FORMS
Custom error messages
<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
title=“Whoops, that’s not right”
>
151. FALLING IN LOVE WITH FORMS
Custom error messages
<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
title=“Whoops, that’s not right”
>
152. FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’);
field.setCustomValidity( ‘My custom error message’ );
153. FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’);
field.setCustomValidity( ‘My custom error message’ );
155. A dead simple
polyfill for HTML5
forms & custom
validation messages.
156. FALLING IN LOVE WITH FORMS
Custom error messages
<label for=“test">Enter three numbers
followed by two letters</label>
<input id="test" name=“test”
placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
data-validation-error-empty=“You forgot to enter text here”
data-validation-error-invalid=“Whoops, that’s not right”
>
157. FALLING IN LOVE WITH FORMS
Custom error messages
<form …
data-validation-error-empty=“You forgot to enter text here”
data-validation-error-invalid=“Whoops, that’s not right”
>
!
<label for=“test">Enter three numbers followed by two letters
</label>
<input id="test" name=“test” placeholder=“e.g. 123ab”
pattern=“d{3}[a-zA-Z]{2}”
data-validation-error-invalid=“Why not try 111aa?”
>
!
</form>
159. FALLING IN LOVE WITH FORMS
Provide a list of errors
retreats4geeks.com/contact
160. FALLING IN LOVE WITH FORMS
Provide a list of errors
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a required field</li>
<li><a href="#name">Name</a> is a required field</li>
<li><a href="#email">Email</a> is a required field</li>
</ol>
</div>
161. FALLING IN LOVE WITH FORMS
Provide a list of errors
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a required field</li>
<li><a href="#name">Name</a> is a required field</li>
<li><a href="#email">Email</a> is a required field</li>
</ol>
</div>
Screen Reader: Chrome Vox
162. FALLING IN LOVE WITH FORMS
Provide easy access to them
<div role=“alert”>
<p>There were errors with your form submission:</p>
<ol>
<li><a href="#message">Message</a> is a required field</li>
<li><a href="#name">Name</a> is a required field</li>
<li><a href="#email">Email</a> is a required field</li>
</ol>
</div>
163. FALLING IN LOVE WITH FORMS
Provide easy access to them
<label for=“message”>
Message <abbr title=“required">*</abbr>
</label>
<textarea id="message" name="message" required></textarea>
164. FALLING IN LOVE WITH FORMS
Provide field-level help
<li class="text validation-error">
<label for=“email">Email <abbr title=“required">*</abbr>
</label>
<input id="email" type="email" name="email"
required=“" aria-required=“true”
aria-invalid="true"
aria-describedby=“email-error"
>
<strong id="email-error" class=“validation-error-message">
Your email address is required</strong>
</li>
165. FALLING IN LOVE WITH FORMS
Provide field-level help
li.validation-error {
color: #922026;
}
!
li.validation-error input,
li.validation-error textarea,
li.validation-error select {
border-color: #922026;
}
166. FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before {
content: "x ";
font-family: Verdana, sans-serif;
speak: none; /* The future! */
}
167. FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before {
content: "x ";
font-family: Verdana, sans-serif;
speak: none; /* The future! */
}
Screen Reader: Chrome Vox