Making peace with making forms.

1. LEARNING TO LOVE FORMS AN EVENT APART 2007
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
cc

2. LEARNING TO LOVE FORMS AN EVENT APART 2007
AARON GUSTAFSON
EASY! DESIGNS, LLC
2007 A A RO N G U S TA F S O N 2/88 E A S Y ! D E S I G N S , LLC
cc

3. LEARNING TO LOVE FORMS AN EVENT APART 2007
AARON GUSTAFSON
EASY! DESIGNS, LLC
2007 A A RO N G U S TA F S O N 3/88 E A S Y ! D E S I G N S , LLC
cc

4. LEARNING TO LOVE FORMS AN EVENT APART 2007
FORMS ARE
A NECESSARY
EVIL
2007 A A RO N G U S TA F S O N 4/88 E A S Y ! D E S I G N S , LLC
cc

5. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 5/88 E A S Y ! D E S I G N S , LLC
cc

6. LEARNING TO LOVE FORMS AN EVENT APART 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
2007 A A RO N G U S TA F S O N 6/88 E A S Y ! D E S I G N S , LLC
cc

7. LEARNING TO LOVE FORMS AN EVENT APART 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
2007 A A RO N G U S TA F S O N 7/88 E A S Y ! D E S I G N S , LLC
cc

8. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 8/88 E A S Y ! D E S I G N S , LLC
cc

9. LEARNING TO LOVE FORMS AN EVENT APART 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;textquot; 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
2007 A A RO N G U S TA F S O N 9/88 E A S Y ! D E S I G N S , LLC
cc

10. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 0/ 88 E A S Y ! D E S I G N S , LLC
cc

11. LEARNING TO LOVE FORMS AN EVENT APART 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 for=quot;contact-namequot;>Name</label>
<li><label
LABEL's FOR attribute is an <input id=quot;contact-namequot; ... /></li>
...
ID reference to the form </ol>
</fieldset>
control </form>
2007 A A RO N G U S TA F S O N 1 1/ 88 E A S Y ! D E S I G N S , LLC
cc

12. LEARNING TO LOVE FORMS AN EVENT APART 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
2007 A A RO N G U S TA F S O N 1 2/ 88 E A S Y ! D E S I G N S , LLC
cc

13. LEARNING TO LOVE FORMS AN EVENT APART 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)
2007 A A RO N G U S TA F S O N 1 3/ 88 E A S Y ! D E S I G N S , LLC
cc

14. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 4/ 88 E A S Y ! D E S I G N S , LLC
cc

15. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 5/ 88 E A S Y ! D E S I G N S , LLC
cc

16. LEARNING TO LOVE FORMS AN EVENT APART 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;
} cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
2007 A A RO N G U S TA F S O N 1 6/ 88 E A S Y ! D E S I G N S , LLC
cc

17. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 7/ 88 E A S Y ! D E S I G N S , LLC
cc

18. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 8/ 88 E A S Y ! D E S I G N S , LLC
cc

19. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 1 9/ 88 E A S Y ! D E S I G N S , LLC
cc

20. LEARNING TO LOVE FORMS AN EVENT APART 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 cols=quot;30quot;></textarea></li>
</ol>
match & to unify the <button type=quot;submitquot;>Go</button>
</fieldset>
type used */ </form>
2007 A A RO N G U S TA F S O N 2 0/ 88 E A S Y ! D E S I G N S , LLC
cc

21. LEARNING TO LOVE FORMS AN EVENT APART 2007
body { label:after {
font: 62.5% quot;Lucida Sans content: ':';
Unicodequot;, quot;Lucida Grandequot;, }
sans-serif; input, textarea {
SIMPLE FORM: } background: #ddd;
ol, ul, p { font: 1em Arial, Helvetica,
CONTACT US font-size: 1.2em; sans-serif;
line-height: 1.5; 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;
}
2007 A A RO N G U S TA F S O N 2 1/ 88 E A S Y ! D E S I G N S , LLC
cc

22. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 2 2/ 88 E A S Y ! D E S I G N S , LLC
cc

23. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 2 3/ 88 E A S Y ! D E S I G N S , LLC
cc

24. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIDEBAR:
OPTGROUPS
<select id=quot;favorite-fruitquot; name=quot;favorite-fruitquot;>
<optgroup label=quot;Applesquot;>
<option value=quot;Golden Delicious Applesquot;>Golden Delicious</option>
<option value=quot;Granny Smith Applesquot;>Granny Smith</option>
<option value=quot;Macintosh Applesquot;>Macintosh</option>
<option value=quot;Red Delicious Applesquot;>Red Delicious</option>
</optgroup>
<optgroup label=quot;Berriesquot;>
<option>Blackberries</option>
<option>Blueberries</option>
<option>Raspberries</option>
<option>Strawberries</option>
</optgroup>
</select>
2007 A A RO N G U S TA F S O N 2 4/ 88 E A S Y ! D E S I G N S , LLC
cc

25. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 2 5/ 88 E A S Y ! D E S I G N S , LLC
cc

26. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 2 6/ 88 E A S Y ! D E S I G N S , LLC
cc

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

28. LEARNING TO LOVE FORMS AN EVENT APART 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/
2007 A A RO N G U S TA F S O N 2 8/ 88 E A S Y ! D E S I G N S , LLC
cc

29. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 2 9/ 88 E A S Y ! D E S I G N S , LLC
cc

30. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=quot;radioquot;>
<legend>I would prefer to be
or checkbox groups
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 ...
2007 A A RO N G U S TA F S O N 3 0/ 88 E A S Y ! D E S I G N S , LLC
cc

31. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 3 1/ 88 E A S Y ! D E S I G N S , LLC
cc

32. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 3 2/ 88 E A S Y ! D E S I G N S , LLC
cc

33. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 3 3/ 88 E A S Y ! D E S I G N S , LLC
cc

34. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 3 4/ 88 E A S Y ! D E S I G N S , LLC
cc

35. LEARNING TO LOVE FORMS AN EVENT APART 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;>
is an exceedingly long
<legend>This
<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>
...
2007 A A RO N G U S TA F S O N 3 5/ 88 E A S Y ! D E S I G N S , LLC
cc

36. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
.radio legend span {
display: block;
width: 270px;
}
...
<fieldset class=quot;radioquot;>
<legend><span>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>
...
2007 A A RO N G U S TA F S O N 3 6/ 88 E A S Y ! D E S I G N S , LLC
cc

37. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 3 7/ 88 E A S Y ! D E S I G N S , LLC
cc

38. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Confirmations <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
a little CLASSification goes a <ol>
...
long way <li class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot;
value=quot;0quot; />
<label><input type=quot;checkboxquot;
name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing
list</label></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
2007 A A RO N G U S TA F S O N 3 8/ 88 E A S Y ! D E S I G N S , LLC
cc

39. LEARNING TO LOVE FORMS AN EVENT APART 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 class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
<label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing list</label></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
2007 A A RO N G U S TA F S O N 3 9/ 88 E A S Y ! D E S I G N S , LLC
cc

40. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
.confirm label {
display: block;
float: none;
margin-left: 125px;
text-align: left;
width: 270px;
}
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
<label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing list</label></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
2007 A A RO N G U S TA F S O N 4 0/ 88 E A S Y ! D E S I G N S , LLC
cc

41. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
.confirm {
margin-bottom: 1.4em;
}
.radio label:after,
.confirm label:after {
content: '';
}
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
<label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing list</label></li>
...
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>
2007 A A RO N G U S TA F S O N 4 1/ 88 E A S Y ! D E S I G N S , LLC
cc

42. LEARNING TO LOVE FORMS AN EVENT APART 2007
MORE
FORMS OF
FORMS
2007 A A RO N G U S TA F S O N 4 2/ 88 E A S Y ! D E S I G N S , LLC
cc

43. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
2007 A A RO N G U S TA F S O N 4 3/ 88 E A S Y ! D E S I G N S , LLC
cc

44. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
POST vs. GET <form id=quot;search-formquot;
action=quot;/action-page.phpquot;
Search forms are traditionally method=quot;getquot;>
GET requests to allow the
action page (i.e. the results) <!-- the rest of our form will go here -->
to be bookmarkable.
</form>
2007 A A RO N G U S TA F S O N 4 4/ 88 E A S Y ! D E S I G N S , LLC
cc

45. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
You need something <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
Sometimes a FIELDSET is <!-- the rest of our form will go here -->
unnecessary, but in XHTML, <p>
</form>
you need something to wrap
the contents of a form
2007 A A RO N G U S TA F S O N 4 5/ 88 E A S Y ! D E S I G N S , LLC
cc

46. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
Easy-peasy <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
<label for=quot;search-queryquot;>Search this
site for</label>
<input type=quot;textquot; id=quot;search-queryquot;
name=quot;queryquot; />
<p>
</form>
2007 A A RO N G U S TA F S O N 4 6/ 88 E A S Y ! D E S I G N S , LLC
cc

47. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
It’s a BUTTON <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
<label for=quot;search-queryquot;>Search this site for</label>
big shock, I know <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
<button type=quot;submitquot;>Go</button>
<p>
</form>
2007 A A RO N G U S TA F S O N 4 7/ 88 E A S Y ! D E S I G N S , LLC
cc

48. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
body {
background: #54af44;
font: 62.5% quot;Lucida
Sans Unicodequot;, quot;Lucida
Grandequot;, sans-serif;
}
ol, ul, p {
font-size: 1.2em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
line-height: 1.5; <label for=quot;search-queryquot;>Search this site for</label>
<input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
} <button type=quot;submitquot;>Go</button>
<p>
</form>
2007 A A RO N G U S TA F S O N 4 8/ 88 E A S Y ! D E S I G N S , LLC
cc

49. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
label {
line-height: 2em;
}
input {
border: 1px solid #c00;
background: #ebebeb;
margin: 0 .5em;
padding: 2px 4px; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
} <label for=quot;search-queryquot;>Search this site for</label>
<input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
input:focus { <button type=quot;submitquot;>Go</button>
<p>
background: #fff; </form>
}
2007 A A RO N G U S TA F S O N 4 9/ 88 E A S Y ! D E S I G N S , LLC
cc

50. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
button {
background: #c00;
border: 0;
color: #fff;
cursor: pointer;
font-size: .9em;
font-weight: bold;
letter-spacing: .1em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
padding: 2px 8px; <label for=quot;search-queryquot;>Search this site for</label>
<input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
text-transform: <button type=quot;submitquot;>Go</button>
<p>
uppercase; </form>
}
2007 A A RO N G U S TA F S O N 5 0/ 88 E A S Y ! D E S I G N S , LLC
cc

51. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
2007 A A RO N G U S TA F S O N 5 1/ 88 E A S Y ! D E S I G N S , LLC
cc

52. LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
Getting organized <fieldset class=quot;datequot;>
<!-- the rest will go here -->
</fieldset>
2007 A A RO N G U S TA F S O N 5 2/ 88 E A S Y ! D E S I G N S , LLC
cc

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

54. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 4/ 88 E A S Y ! D E S I G N S , LLC
cc

55. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 5/ 88 E A S Y ! D E S I G N S , LLC
cc

56. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 6/ 88 E A S Y ! D E S I G N S , LLC
cc

57. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 7/ 88 E A S Y ! D E S I G N S , LLC
cc

58. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 8/ 88 E A S Y ! D E S I G N S , LLC
cc

59. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 5 9/ 88 E A S Y ! D E S I G N S , LLC
cc

60. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 6 0/ 88 E A S Y ! D E S I G N S , LLC
cc

61. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 6 1/ 88 E A S Y ! D E S I G N S , LLC
cc

62. LEARNING TO LOVE FORMS AN EVENT APART 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>Post Date</span></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>
2007 A A RO N G U S TA F S O N 6 2/ 88 E A S Y ! D E S I G N S , LLC
cc

63. LEARNING TO LOVE FORMS AN EVENT APART 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>
2007 A A RO N G U S TA F S O N 6 3/ 88 E A S Y ! D E S I G N S , LLC
cc

64. LEARNING TO LOVE FORMS AN EVENT APART 2007
MAKING
THE MOST OF
MESSAGES
2007 A A RO N G U S TA F S O N 6 4/ 88 E A S Y ! D E S I G N S , LLC
cc

65. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
REQUIRED
2007 A A RO N G U S TA F S O N 6 5/ 88 E A S Y ! D E S I G N S , LLC
cc

66. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 6 6/ 88 E A S Y ! D E S I G N S , LLC
cc

67. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 6 7/ 88 E A S Y ! D E S I G N S , LLC
cc

68. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 6 8/ 88 E A S Y ! D E S I G N S , LLC
cc

69. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 6 9/ 88 E A S Y ! D E S I G N S , LLC
cc

70. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
2007 A A RO N G U S TA F S O N 7 0/ 88 E A S Y ! D E S I G N S , LLC
cc

71. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
How should we ...
<li>
<label for=quot;contact-emailquot;>
emphasize important Email<abbr title=quot;requiredquot;>*</abbr>
</label>
formatting info?
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
</li>
<li>
<label for=quot;contact-phonequot;>
Phone<em
class=quot;msgquot;> format: 123-456-7890</em>
</label>
<input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
</li>
<li>
<label for=quot;contact-subjectquot;>
Subject<abbr title=quot;requiredquot;>*</abbr>
</label>
<select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
...
2007 A A RO N G U S TA F S O N 7 1/ 88 E A S Y ! D E S I G N S , LLC
cc

72. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
...
<li>
<label for=quot;contact-phonequot;>Phone<em
class=quot;msgquot;> format: 123-456-7890</em></label>
<input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
</li>
...
2007 A A RO N G U S TA F S O N 7 2/ 88 E A S Y ! D E S I G N S , LLC
cc

73. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
label em.msg {
font-size: .8em;
font-style: normal;
line-height: 2.5;
}
...
<li>
<label for=quot;contact-phonequot;>Phone<em
class=quot;msgquot;> format: 123-456-7890</em></label>
<input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
</li>
...
2007 A A RO N G U S TA F S O N 7 3/ 88 E A S Y ! D E S I G N S , LLC
cc

74. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
label{
...
position: relative;
}
label em.msg {
color: #aaa;
font-size: .8em;
font-style: normal; ...
line-height: 2.5; <li>
<label for=quot;contact-phonequot;>Phone<em
position: absolute; class=quot;msgquot;> format: 123-456-7890</em></label>
<input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
right: -266px; </li>
...
top: 0;
}
2007 A A RO N G U S TA F S O N 7 4/ 88 E A S Y ! D E S I G N S , LLC
cc

75. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
...
<li>
<label for=quot;contact-phonequot;>Phone<em
class=quot;msgquot;> format: 123-456-7890</em></label>
<input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
</li>
...
2007 A A RO N G U S TA F S O N 7 5/ 88 E A S Y ! D E S I G N S , LLC
cc

76. LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
2007 A A RO N G U S TA F S O N 7 6/ 88 E A S Y ! D E S I G N S , LLC
cc

77. LEARNING TO LOVE FORMS AN EVENT APART 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?
2007 A A RO N G U S TA F S O N 7 7/ 88 E A S Y ! D E S I G N S , LLC
cc

78. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 7 8/ 88 E A S Y ! D E S I G N S , LLC
cc

79. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 7 9/ 88 E A S Y ! D E S I G N S , LLC
cc

80. LEARNING TO LOVE FORMS AN EVENT APART 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;
}
2007 A A RO N G U S TA F S O N 8 0/ 88 E A S Y ! D E S I G N S , LLC
cc

81. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 8 1/ 88 E A S Y ! D E S I G N S , LLC
cc

82. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 8 2/ 88 E A S Y ! D E S I G N S , LLC
cc

83. LEARNING TO LOVE FORMS AN EVENT APART 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>
...
2007 A A RO N G U S TA F S O N 8 3/ 88 E A S Y ! D E S I G N S , LLC
cc