Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores 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.

1. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
cc 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC

2. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
AARON GUSTAFSON
EASY! DESIGNS, LLC
cc 2007 A A RO N G U S TA F S O N 2/67 E A S Y ! D E S I G N S , LLC

3. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
FORMS ARE
A NECESSARY
EVIL
cc 2007 A A RO N G U S TA F S O N 3/67 E A S Y ! D E S I G N S , LLC

4. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 4/67 E A S Y ! D E S I G N S , LLC

5. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
FORM Element <form id=quot;contact-formquot;
action=quot;/action-page.phpquot;
establishes a form method=quot;postquot;>
ACTION is the only required <!-- the rest of our form will go here -->
attribute and should always </form>
be a URI
METHOD defaults to “get”
NAME is depreciated; use ID
instead
cc 2007 A A RO N G U S TA F S O N 5/67 E A S Y ! D E S I G N S , LLC

6. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
FIEDSET Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
used to group related fields <legend>Send us a message</legend>
<!-- the rest of our form will go here -->
LEGEND Element </fieldset>
</form>
used to provide a caption for
a FIELDSET
cc 2007 A A RO N G U S TA F S O N 6/67 E A S Y ! D E S I G N S , LLC

7. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Containing FORM
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
Controls <p><!-- form control --></p>
<p><!-- form control --></p>
<p><!-- form control --></p>
P or DIV
</fieldset>
</form>
sensible choices, but not
very accurate (except in
certain instances)
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
OL or UL
<legend>Send us a message</legend>
<ol>
most forms are lists of <li><!-- form control --></li>
<li><!-- form control --></li>
questions or form controls, <li><!-- form control --></li>
so these are better </ol>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 7/67 E A S Y ! D E S I G N S , LLC

8. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
INPUT Text Control <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
type=quot;namequot; is a basic text <ol>
<li>Name
input field <input type=quot;textquot; name=quot;namequot;
id=quot;contact-namequot; /></li>
(also type=quot;passwordquot; for <li>Email
<input type=quot;textquot; name=quot;emailquot;
content you want hidden)
id=quot;contact-emailquot; /></li>
<li><!-- form control --></li>
NAME vs. ID
</ol>
</fieldset>
</form>
NAME is for the back end
ID is for the front end
cc 2007 A A RO N G U S TA F S O N 8/67 E A S Y ! D E S I G N S , LLC

9. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
TEXTAREA <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
a multiline text form control <ol>
<li>Name
<input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li>
<li>Email
requires ROWS and COLS <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li>
<li>Message
attributes!!! <textarea name=quot;messagequot;
id=quot;contact-messagequot;
rows=quot;4quot; cols=quot;30quot;></textarea></li>
</ol>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 9/67 E A S Y ! D E S I G N S , LLC

10. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Working with LABEL
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
this element provides to <ol>
<li><label>Name
means of associating its <input ... /></label></li>
content with a form control: ...
</ol>
</fieldset>
</form>
implicit association
LABEL wraps the form
control and the text <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
explicit association <li><label for=quot;contact-namequot;>Name</label>
LABEL's FOR attribute is an ...
<input id=quot;contact-namequot; ... /></li>
ID reference to the form </ol>
</fieldset>
control </form>
cc 2007 A A RO N G U S TA F S O N 1 0/ 67 E A S Y ! D E S I G N S , LLC

11. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Buttons
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
trigger events in a form; use <ol>
...
either INPUT or BUTTON </ol>
<input type=quot;submitquot; value=quot;Goquot; />
element </fieldset>
</form>
Common TYPEs
submit – submits the form;
default button type <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
reset – resets all form
<ol>
...
</ol>
control values back to their <button type=quot;submitquot;>Go</button>
defaults when the page </fieldset>
</form>
loaded
cc 2007 A A RO N G U S TA F S O N 1 1/ 67 E A S Y ! D E S I G N S , LLC

12. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIDEBAR:
BUTTONS
WINDOWS XP OS X
INPUT
BUTTON
Mozilla IE 6/7 IE 6/7 Opera Safari Camino Firefox IE 5 Opera
(XP) (classic)
cc 2007 A A RO N G U S TA F S O N 1 2/ 67 E A S Y ! D E S I G N S , LLC

13. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot;
name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot;
name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot;
name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 3/ 67 E A S Y ! D E S I G N S , LLC

14. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
body {
font: 62.5%
quot;Lucida Sans Unicodequot;,
quot;Lucida Grandequot;,
sans-serif;
}
ol, ul, p {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
font-size: 1.2em; <fieldset>
line-height: 1.5; <legend>Send us a message</legend>
<ol>
} <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 4/ 67 E A S Y ! D E S I G N S , LLC

15. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form, fieldset, legend {
border: 0;
padding: 0;
margin: 0;
}
legend {
font-size: 2em;
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
} <fieldset>
form ol, form ul { <legend>Send us a message</legend>
<ol>
list-style: none; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
margin: 0; <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
padding: 0; <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
} </ol>
cols=quot;30quot;></textarea></li>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 5/ 67 E A S Y ! D E S I G N S , LLC

16. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
margin: 0 0 .75em;
}
label {
display: block;
}
input, textarea {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
width: 250px; <fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 6/ 67 E A S Y ! D E S I G N S , LLC

17. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
clear: both;
margin: 0 0 .75em;
padding: 0;
}
label {
display: block;
float: left; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
line-height: 1.6; <legend>Send us a message</legend>
<ol>
margin-right: 10px; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
text-align: right; <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
width: 120px; <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
} cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 7/ 67 E A S Y ! D E S I G N S , LLC

18. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
legend {
font-size: 2em;
line-height: 1.8;
padding-bottom: .5em;
}
button {
margin-left: 130px;
cursor: pointer; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 8/ 67 E A S Y ! D E S I G N S , LLC

19. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
label:after {
content: ':';
}
input, textarea {
background: #ddd;
width: 250px;
}
input:focus, <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
textarea:focus { <legend>Send us a message</legend>
<ol>
background: #fff; <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
} <li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
/* Some styles to get <li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
the baselines to </ol>
cols=quot;30quot;></textarea></li>
match & to unify the <button type=quot;submitquot;>Go</button>
</fieldset>
type used */ </form>
cc 2007 A A RO N G U S TA F S O N 1 9/ 67 E A S Y ! D E S I G N S , LLC

20. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
body { label:after {
font: 62.5% quot;Lucida Sans content: ':';
Unicodequot;, quot;Lucida Grandequot;, }
sans-serif; input, textarea {
SIMPLE FORM: }
ol, ul, p {
background: #ddd;
font: 1em Arial, Helvetica,
CONTACT US font-size: 1.2em;
line-height: 1.5;
sans-serif;
padding: 1px 3px;
} width: 250px;
form, fieldset, legend { }
border: 0; textarea {
margin: 0; line-height: 1.3em;
padding: 0; padding: 0 3px;
} }
legend { input:focus, textarea:focus {
font-size: 2em; background: #fff;
line-height: 1.8; }
padding-bottom: .5em; button {
} background: #ffd100;
form ol, form ul { border: 2px outset #333;
list-style: none; color: #333;
margin: 0; cursor: pointer;
padding: 0; font-size: .9em;
} font-weight: bold;
form li { letter-spacing: .3em;
clear: both; margin-left: 130px;
margin: 0 0 .75em; padding: .2em .5em;
padding: 0; text-transform: uppercase;
} }
label {
display: block;
float: left;
line-height: 1.6;
margin-right: 10px;
text-align: right;
width: 120px;
}
cc 2007 A A RO N G U S TA F S O N 2 0/ 67 E A S Y ! D E S I G N S , LLC

21. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 2 1/ 67 E A S Y ! D E S I G N S , LLC

22. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
SELECTion Lists <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
allows selection of one or <ol>
...
more OPTIONs <li><label
for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot;
On OPTION elements, the name=quot;subjectquot;>
VALUE attribute is optional <option value=quot;Errorquot;>I noticed a
(contents are submitted by website error</option>
<option value=quot;Questionquot;>I have a
default)
question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 2/ 67 E A S Y ! D E S I G N S , LLC

23. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIDEBAR:
SELECTS
WINDOWS XP
Mozilla IE 6/7 IE 7 IE 6 Opera
(XP) (classic) (classic)
OS X
Safari Camino Firefox IE 5 Opera
cc 2007 A A RO N G U S TA F S O N 2 3/ 67 E A S Y ! D E S I G N S , LLC

24. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li><label for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
<option value=quot;Questionquot;>I have a question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 4/ 67 E A S Y ! D E S I G N S , LLC

25. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
select {
background: #ddd;
width: 260px;
/* width is *usually*
the input width +
input padding +
4px */
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
} <fieldset>
input:focus, <legend>Send us a message</legend>
<ol>
textarea:focus, ...
<li><label for=quot;contact-subjectquot;>Subject</label>
select:focus { <select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
background: #fff; <option value=quot;Questionquot;>I have a question</option>
<option>Other</option>
} </select></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 2 5/ 67 E A S Y ! D E S I G N S , LLC

26. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
CUSTOM
SELECTS
FauxSelect
code.google.com/p/
easy-designs/wiki/FauxSelect
SELECT Something New
easy-designs.net/articles/replaceSelect/
SELECT Something New Pt. 2
easy-designs.net/articles/replaceSelect2/
cc 2007 A A RO N G U S TA F S O N 2 6/ 67 E A S Y ! D E S I G N S , LLC

27. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
cc 2007 A A RO N G U S TA F S O N 2 7/ 67 E A S Y ! D E S I G N S , LLC

28. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=quot;radioquot;>
or checkbox groups <legend>I would prefer to be
contacted by</legend>
<ul>
The LEGEND is the question <li><label><input type=quot;radioquot;
or statement name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot;
Lists organize the possible name=quot;methodquot; value=quot;phonequot; />
responses (OL or UL) phone</label></li>
</ul>
implicit LABELs provide an </fieldset>
</li>
easy way to style in IE6 ...
cc 2007 A A RO N G U S TA F S O N 2 8/ 67 E A S Y ! D E S I G N S , LLC

29. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
...
<li>
<fieldset class=quot;radioquot;>
<legend>I would prefer to be contacted by</legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 2 9/ 67 E A S Y ! D E S I G N S , LLC

30. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
}
.radio label {
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
display: inline; ...
width: auto; <li>
<fieldset class=quot;radioquot;>
margin: 0; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 3 0/ 67 E A S Y ! D E S I G N S , LLC

31. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio {
margin-left: 125px;
}
.radio ul {
font-size: 1em;
margin: .3em 0 0;
}
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
.radio label:after { ...
content: ''; <li>
<fieldset class=quot;radioquot;>
} <legend>I would prefer to be contacted by</legend>
<ul>
label input { <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
background: <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
transparent; </ul>
</fieldset>
width: auto; </li>
...
} </form>
cc 2007 A A RO N G U S TA F S O N 3 1/ 67 E A S Y ! D E S I G N S , LLC

32. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio li {
float: left;
margin: 0;
width: 48%;
clear: none;
}
label input {
width: auto; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
...
position: relative; <li>
<fieldset class=quot;radioquot;>
top: 2px; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>
cc 2007 A A RO N G U S TA F S O N 3 2/ 67 E A S Y ! D E S I G N S , LLC

33. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
max-width: 270px;
width: 270px;
} ...
<fieldset class=quot;radioquot;>
This is an exceedingly long
<legend>
<code>LEGEND</code> to demonstrate the odd
behavior of <code>LEGEND</code>s</legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
...
cc 2007 A A RO N G U S TA F S O N 3 3/ 67 E A S Y ! D E S I G N S , LLC

34. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend span {
display: block;
width: 270px;
}
...
<fieldset class=quot;radioquot;>
<span>
<legend> This is an exceedingly long
<code>LEGEND</code> to demonstrate the odd behavior of
<code>LEGEND</code>s</span> </legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
...
cc 2007 A A RO N G U S TA F S O N 3 4/ 67 E A S Y ! D E S I G N S , LLC

35. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
cc 2007 A A RO N G U S TA F S O N 3 5/ 67 E A S Y ! D E S I G N S , LLC

36. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Getting organized <fieldset class=quot;datequot;>
<!-- the rest will go here -->
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 6/ 67 E A S Y ! D E S I G N S , LLC

37. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Not really a LABEL <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<!-- the rest will go here -->
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 7/ 67 E A S Y ! D E S I G N S , LLC

38. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
Not just a SELECT <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
we need some LABELing <li>
<label for=quot;date-dayquot;>Date</label>
<select id=quot;date-dayquot; name=quot;dayquot;>
<option>01</option>
...
<option>31</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 8/ 67 E A S Y ! D E S I G N S , LLC

39. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
And so on <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li>
<label for=quot;date-dayquot;>Date</label>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
<select id=quot;date-monthquot; name=quot;monthquot;>
<option value=quot;01quot;>January</option>
...
<option value=quot;12quot;>December</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 3 9/ 67 E A S Y ! D E S I G N S , LLC

40. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
And so forth <fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li>
<label for=quot;date-dayquot;>Date</label>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
...
</li>
<li>
<label for=quot;date-yearquot;>Year</label>
<select id=quot;date-yearquot; name=quot;yearquot;>
<option>2007</option>
<option>2008</option>
</select>
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 0/ 67 E A S Y ! D E S I G N S , LLC

41. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
body {
background: #54af44;
font: 62.5% quot;Lucida
Sans Unicodequot;, quot;Lucida
Grandequot;, sans-serif;
}
ol, ul, p, legend {
font-size: 1.2em; <fieldset class=quot;datequot;>
<legend>Post Date</legend>
line-height: 1.5; <ol>
<li><label for=quot;date-dayquot;>Date</label>
} ...
</li>
legend { <li><label for=quot;date-monthquot;>Month</label>
...
color: #000; </li>
<li><label for=quot;date-yearquot;>Year</label>
} ...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 1/ 67 E A S Y ! D E S I G N S , LLC

42. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
}
.date ol {
list-style: none;
margin: 0 0 0 130px;
padding: 0; <fieldset class=quot;datequot;>
<legend>Post Date</legend>
} <ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 2/ 67 E A S Y ! D E S I G N S , LLC

43. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date li {
float: left;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 3/ 67 E A S Y ! D E S I G N S , LLC

44. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date select {
background: #e2efe0;
margin: 0 .25em 0 0;
}
.date select:focus {
background: #fff;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 4/ 67 E A S Y ! D E S I G N S , LLC

45. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date label {
position: absolute;
left: -999em;
}
<fieldset class=quot;datequot;>
<legend>Post Date</legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 5/ 67 E A S Y ! D E S I G N S , LLC

46. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
position: relative;
}
.date legend span {
display: block;
line-height: 1.6; <fieldset class=quot;datequot;>
text-align: right; <legend><span> </span>
Post Date </legend>
<ol>
width: 120px; <li><label for=quot;date-dayquot;>Date</label>
...
position: absolute; </li>
<li><label for=quot;date-monthquot;>Month</label>
top: 0; ...
</li>
left: 0; <li><label for=quot;date-yearquot;>Year</label>
...
} </li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 6/ 67 E A S Y ! D E S I G N S , LLC

47. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date legend
span:after {
content: quot;:quot;;
}
<fieldset class=quot;datequot;>
<legend><span>Post Date</span></legend>
<ol>
<li><label for=quot;date-dayquot;>Date</label>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
<li><label for=quot;date-yearquot;>Year</label>
...
</li>
</ol>
</fieldset>
cc 2007 A A RO N G U S TA F S O N 4 7/ 67 E A S Y ! D E S I G N S , LLC

48. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MAKING
THE MOST OF
MESSAGES
cc 2007 A A RO N G U S TA F S O N 4 8/ 67 E A S Y ! D E S I G N S , LLC

49. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
cc 2007 A A RO N G U S TA F S O N 4 9/ 67 E A S Y ! D E S I G N S , LLC

50. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
What is the * anyway? <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
Well, it stands for something <p>Required fields are marked
else and in HTML, the closest to <abbr title=quot;requiredquot;>*</abbr>.</p>
that we have to convey that is <ol>
<li>
the ABBR element. <label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 0/ 67 E A S Y ! D E S I G N S , LLC

51. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
If you want to go all- <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
out, you can <p>Required fields are marked
<em><abbr title=quot;requiredquot;>*</abbr></em>.
but that seems like overkill
</p>
<ol>
<li class=quot;requiredquot;>
<label for=quot;contact-namequot;>
Name<em><abbr title=quot;requiredquot;>*
</abbr></em>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 1/ 67 E A S Y ! D E S I G N S , LLC

52. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=quot;requiredquot;>*</abbr>.</p>
<ol>
<li>
<label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 2/ 67 E A S Y ! D E S I G N S , LLC

53. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
REQUIRED
abbr {
cursor: help;
font-style: normal;
border: 0;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=quot;requiredquot;>*</abbr>.</p>
<ol>
<li>
<label for=quot;contact-namequot;>
Name<abbr title=quot;requiredquot;>*</abbr>
</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 3/ 67 E A S Y ! D E S I G N S , LLC

54. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
cc 2007 A A RO N G U S TA F S O N 5 4/ 67 E A S Y ! D E S I G N S , LLC

55. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
How should we ...
<li class=quot;errorquot;>
strongly emphasize
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr>
<strong class=quot;errquot;> You forgot to fill
even more important in your email</strong>
error advisories?
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
How should we
highlight the field?
cc 2007 A A RO N G U S TA F S O N 5 5/ 67 E A S Y ! D E S I G N S , LLC

56. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 6/ 67 E A S Y ! D E S I G N S , LLC

57. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
padding-left: 5px;
text-align: left;
}
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 7/ 67 E A S Y ! D E S I G N S , LLC

58. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
line-height: 1.8;
padding-left: 5px;
text-align: left;
white-space: nowrap;
position: absolute; ...
<li class=quot;errorquot;>
top: 0; <label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
left: 390px; to fill in your email</strong>
} </label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
strong.err:before { </li>
...
content: quot;<quot;
}
cc 2007 A A RO N G U S TA F S O N 5 8/ 67 E A S Y ! D E S I G N S , LLC

59. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
.error input {
border: 2px solid #b00;
background: #ffdfdf;
}
.error input:focus {
background: #fff;
}
...
<li class=quot;errorquot;>
<label for=quot;contact-emailquot;>
Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
to fill in your email</strong>
</label>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
...
cc 2007 A A RO N G U S TA F S O N 5 9/ 67 E A S Y ! D E S I G N S , LLC

60. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
How do we notify <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
users of errors? <div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong>
It is best to be upfront about
while trying to process this form:</p>
errors encountered and to <ol>
say, in plain language, what <li>You forgot to include <a
the user needs to do to fix it href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
and linking to the field with </div>
errors doesn't hurt <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 0/ 67 E A S Y ! D E S I G N S , LLC

61. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 1/ 67 E A S Y ! D E S I G N S , LLC

62. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors {
background: #ffdfdf;
border: 2px solid #b00;
color: #333;
margin: .5em 0 1em;
padding: 10px;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 2/ 67 E A S Y ! D E S I G N S , LLC

63. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors p {
margin: 0;
padding: 0;
}
#errors ol {
list-style: disc;
margin: 0 0 0 20px;
} <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 3/ 67 E A S Y ! D E S I G N S , LLC

64. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors a {
color: #b00;
}
<form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
<fieldset>
<legend>Send us a message</legend>
<div id=quot;errorsquot;>
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=quot;#contact-emailquot;>your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
...
cc 2007 A A RO N G U S TA F S O N 6 4/ 67 E A S Y ! D E S I G N S , LLC

65. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
PARTING
ADVICE
•treat forms like any other piece of (X)HTML
•be aware of browser inconsistencies & make accommodations (when possible)
•break a complex form into bite-size chunks
•look for ways to provide richer meaning/a better experience
•apply your CSS layout knowledge for the rest of the page to a form
•don't over-complicate form design
•learn to love forms
cc 2007 A A RO N G U S TA F S O N 6 5/ 67 E A S Y ! D E S I G N S , LLC

66. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
FORMS ARE
NOT
NECESSARILY
EVIL
cc 2007 A A RO N G U S TA F S O N 6 6/ 67 E A S Y ! D E S I G N S , LLC

67. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
http://slideshare.net/AaronGustafson
cc 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC