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

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

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

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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
FORM Element <form id=\"contact-form\"
action=\"/action-page.php\"
establishes a form method=\"post\">
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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
FIEDSET Element <form id=\"contact-form\" action=\"/action-page.php\" method=\"post\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Containing FORM
<form id=\"contact-form\" action=\"/action-page.php\" method=\"post\">
<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=\"contact-form\" action=\"/action-page.php\" method=\"post\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
INPUT Text Control <form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
type=\"text\" is a basic text <ol>
<li>Name
input field <input type=\"text\" name=\"name\"
id=\"contact-name\" /></li>
(also type=\"password\" for <li>Email
<input type=\"text\" name=\"email\"
content you want hidden)
id=\"contact-email\" /></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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
TEXTAREA <form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
a multiline text form control <ol>
<li>Name
<input type=\"text\" name=\"name\" id=\"contact-name\" /></li>
<li>Email
requires ROWS and COLS <input type=\"text\" name=\"email\" id=\"contact-email\" /></li>
<li>Message
attributes!!! <textarea name=\"message\"
id=\"contact-message\"
rows=\"4\" cols=\"30\"></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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Working with LABEL
<form id=\"contact-form\" action=\"/action-page.php\" method=\"post\">
<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=\"contact-form\" action=\"/action-page.php\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
explicit association for=\"contact-name\">Name</label>
<li><label
LABEL's FOR attribute is an <input id=\"contact-name\" ... /></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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Buttons
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
trigger events in a form; use <ol>
...
either INPUT or BUTTON </ol>
<input type=\"submit\" value=\"Go\" />
element </fieldset>
</form>
Common TYPEs
submit – submits the form;
default button type <form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
reset – resets all form
<ol>
...
</ol>
control values back to their <button type=\"submit\">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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
<li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\"
name=\"name\" /></li>
<li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\"
name=\"email\" /></li>
<li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\"
name=\"message\" rows=\"4\"
cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
body {
font: 62.5%
\"Lucida Sans Unicode\",
\"Lucida Grande\",
sans-serif;
}
ol, ul, p {
<form id=\"contact-form\" action=\"#\" method=\"post\">
font-size: 1.2em; <fieldset>
line-height: 1.5; <legend>Send us a message</legend>
<ol>
} <li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
<li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
<li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
} <fieldset>
form ol, form ul { <legend>Send us a message</legend>
<ol>
list-style: none; <li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
margin: 0; <li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
padding: 0; <li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
} cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
width: 250px; <fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
<li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
<li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
line-height: 1.6; <legend>Send us a message</legend>
<ol>
margin-right: 10px; <li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
text-align: right; <li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
width: 120px; <li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
} cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
} <legend>Send us a message</legend>
<ol>
<li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
<li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
<li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
cols=\"30\"></textarea></li>
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
textarea:focus { <legend>Send us a message</legend>
<ol>
background: #fff; <li><label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" /></li>
} <li><label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" /></li>
/* Some styles to get <li><label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\"
the baselines to cols=\"30\"></textarea></li>
</ol>
match & to unify the <button type=\"submit\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
body { label:after {
font: 62.5% \"Lucida Sans content: ':';
Unicode\", \"Lucida Grande\", }
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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
SELECTion Lists <form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
allows selection of one or <ol>
...
more OPTIONs <li><label
for=\"contact-subject\">Subject</label>
<select id=\"contact-subject\"
On OPTION elements, the name=\"subject\">
VALUE attribute is optional <option value=\"Error\">I noticed a
(contents are submitted by website error</option>
<option value=\"Question\">I have a
default)
question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=\"submit\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIDEBAR:
OPTGROUPS
<select id=\"favorite-fruit\" name=\"favorite-fruit\">
<optgroup label=\"Apples\">
<option value=\"Golden Delicious Apples\">Golden Delicious</option>
<option value=\"Granny Smith Apples\">Granny Smith</option>
<option value=\"Macintosh Apples\">Macintosh</option>
<option value=\"Red Delicious Apples\">Red Delicious</option>
</optgroup>
<optgroup label=\"Berries\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li><label for=\"contact-subject\">Subject</label>
<select id=\"contact-subject\" name=\"subject\">
<option value=\"Error\">I noticed a website error</option>
<option value=\"Question\">I have a question</option>
<option>Other</option>
</select></li>
...
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
} <fieldset>
input:focus, <legend>Send us a message</legend>
<ol>
textarea:focus, ...
<li><label for=\"contact-subject\">Subject</label>
select:focus { <select id=\"contact-subject\" name=\"subject\">
<option value=\"Error\">I noticed a website error</option>
background: #fff; <option value=\"Question\">I have a question</option>
<option>Other</option>
} </select></li>
...
</ol>
<button type=\"submit\">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

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

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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=\"radio\">
<legend>I would prefer to be
or checkbox groups
contacted by</legend>
<ul>
The LEGEND is the question <li><label><input type=\"radio\"
or statement name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\"
Lists organize the possible name=\"method\" value=\"phone\" />
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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
<form id=\"contact-form\" action=\"#\" method=\"post\">
...
<li>
<fieldset class=\"radio\">
<legend>I would prefer to be contacted by</legend>
<ul>
<li><label><input type=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

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=\"contact-form\" action=\"#\" method=\"post\">
display: inline; ...
width: auto; <li>
<fieldset class=\"radio\">
margin: 0; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

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=\"contact-form\" action=\"#\" method=\"post\">
.radio label:after { ...
content: ''; <li>
<fieldset class=\"radio\">
} <legend>I would prefer to be contacted by</legend>
<ul>
label input { <li><label><input type=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
background: <li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

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=\"contact-form\" action=\"#\" method=\"post\">
...
position: relative; <li>
<fieldset class=\"radio\">
top: 2px; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

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=\"radio\">
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=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
.radio legend span {
display: block;
width: 270px;
}
...
<fieldset class=\"radio\">
<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=\"radio\" name=\"method\" value=\"email\" />
email</label></li>
<li><label><input type=\"radio\" name=\"method\" value=\"phone\" />
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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
Confirmations <form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
a little CLASSification goes a <ol>
...
long way <li class=\"confirm\">
<input type=\"hidden\" name=\"mailing-list\"
value=\"0\" />
<label><input type=\"checkbox\"
name=\"mailing-list\" value=\"1\" />
Please add me to your mailing
list</label></li>
...
</ol>
<button type=\"submit\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
CONTACT US
<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li class=\"confirm\">
<input type=\"hidden\" name=\"mailing-list\" value=\"0\" />
<label><input type=\"checkbox\" name=\"mailing-list\" value=\"1\" />
Please add me to your mailing list</label></li>
...
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li class=\"confirm\">
<input type=\"hidden\" name=\"mailing-list\" value=\"0\" />
<label><input type=\"checkbox\" name=\"mailing-list\" value=\"1\" />
Please add me to your mailing list</label></li>
...
</ol>
<button type=\"submit\">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

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=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Send us a message</legend>
<ol>
...
<li class=\"confirm\">
<input type=\"hidden\" name=\"mailing-list\" value=\"0\" />
<label><input type=\"checkbox\" name=\"mailing-list\" value=\"1\" />
Please add me to your mailing list</label></li>
...
</ol>
<button type=\"submit\">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

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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
POST vs. GET <form id=\"search-form\"
action=\"/action-page.php\"
Search forms are traditionally method=\"get\">
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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
You need something <form id=\"search-form\" action=\"/action-page.php\" method=\"get\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
Easy-peasy <form id=\"search-form\" action=\"/action-page.php\" method=\"get\">
<p>
<label for=\"search-query\">Search this
site for</label>
<input type=\"text\" id=\"search-query\"
name=\"query\" />
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
It’s a BUTTON <form id=\"search-form\" action=\"/action-page.php\" method=\"get\">
<p>
<label for=\"search-query\">Search this site for</label>
big shock, I know <input type=\"text\" id=\"search-query\" name=\"query\" />
<button type=\"submit\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
SEARCH BOX
body {
background: #54af44;
font: 62.5% \"Lucida
Sans Unicode\", \"Lucida
Grande\", sans-serif;
}
ol, ul, p {
font-size: 1.2em; <form id=\"search-form\" action=\"/action-page.php\" method=\"get\">
<p>
line-height: 1.5; <label for=\"search-query\">Search this site for</label>
<input type=\"text\" id=\"search-query\" name=\"query\" />
} <button type=\"submit\">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

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=\"search-form\" action=\"/action-page.php\" method=\"get\">
<p>
} <label for=\"search-query\">Search this site for</label>
<input type=\"text\" id=\"search-query\" name=\"query\" />
input:focus { <button type=\"submit\">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

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=\"search-form\" action=\"/action-page.php\" method=\"get\">
<p>
padding: 2px 8px; <label for=\"search-query\">Search this site for</label>
<input type=\"text\" id=\"search-query\" name=\"query\" />
text-transform: <button type=\"submit\">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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
Getting organized <fieldset class=\"date\">
<!-- 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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
Not really a LABEL <fieldset class=\"date\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
Not just a SELECT <fieldset class=\"date\">
<legend>Post Date</legend>
<ol>
we need some LABELing <li>
<label for=\"date-day\">Date</label>
<select id=\"date-day\" name=\"day\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
And so on <fieldset class=\"date\">
<legend>Post Date</legend>
<ol>
<li>
<label for=\"date-day\">Date</label>
...
</li>
<li>
<label for=\"date-month\">Month</label>
<select id=\"date-month\" name=\"month\">
<option value=\"01\">January</option>
...
<option value=\"12\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
And so forth <fieldset class=\"date\">
<legend>Post Date</legend>
<ol>
<li>
<label for=\"date-day\">Date</label>
...
</li>
<li>
<label for=\"date-month\">Month</label>
...
</li>
<li>
<label for=\"date-year\">Year</label>
<select id=\"date-year\" name=\"year\">
<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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
body {
background: #54af44;
font: 62.5% \"Lucida
Sans Unicode\", \"Lucida
Grande\", sans-serif;
}
ol, ul, p, legend {
font-size: 1.2em; <fieldset class=\"date\">
<legend>Post Date</legend>
line-height: 1.5; <ol>
<li><label for=\"date-day\">Date</label>
} ...
</li>
legend { <li><label for=\"date-month\">Month</label>
...
color: #000; </li>
<li><label for=\"date-year\">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

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=\"date\">
<legend>Post Date</legend>
} <ol>
<li><label for=\"date-day\">Date</label>
...
</li>
<li><label for=\"date-month\">Month</label>
...
</li>
<li><label for=\"date-year\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
.date li {
float: left;
}
<fieldset class=\"date\">
<legend>Post Date</legend>
<ol>
<li><label for=\"date-day\">Date</label>
...
</li>
<li><label for=\"date-month\">Month</label>
...
</li>
<li><label for=\"date-year\">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

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=\"date\">
<legend>Post Date</legend>
<ol>
<li><label for=\"date-day\">Date</label>
...
</li>
<li><label for=\"date-month\">Month</label>
...
</li>
<li><label for=\"date-year\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
.date label {
position: absolute;
left: -999em;
}
<fieldset class=\"date\">
<legend>Post Date</legend>
<ol>
<li><label for=\"date-day\">Date</label>
...
</li>
<li><label for=\"date-month\">Month</label>
...
</li>
<li><label for=\"date-year\">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

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=\"date\">
text-align: right; <legend><span>Post Date</span></legend>
<ol>
width: 120px; <li><label for=\"date-day\">Date</label>
...
position: absolute; </li>
<li><label for=\"date-month\">Month</label>
top: 0; ...
</li>
left: 0; <li><label for=\"date-year\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
SIMPLE FORM:
DATE SELECT
.date legend
span:after {
content: \":\";
}
<fieldset class=\"date\">
<legend><span>Post Date</span></legend>
<ol>
<li><label for=\"date-day\">Date</label>
...
</li>
<li><label for=\"date-month\">Month</label>
...
</li>
<li><label for=\"date-year\">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

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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
REQUIRED
What is the * anyway? <form id=\"contact-form\" action=\"test.php\" method=\"get\">
<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=\"required\">*</abbr>.</p>
that we have to convey that is <ol>
<li>
the ABBR element. <label for=\"contact-name\">
Name<abbr title=\"required\">*</abbr>
</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
REQUIRED
If you want to go all- <form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
out, you can <p>Required fields are marked
<em><abbr title=\"required\">*</abbr></em>.
but that seems like overkill
</p>
<ol>
<li class=\"required\">
<label for=\"contact-name\">
Name<em><abbr title=\"required\">*
</abbr></em>
</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
REQUIRED
<form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=\"required\">*</abbr>.</p>
<ol>
<li>
<label for=\"contact-name\">
Name<abbr title=\"required\">*</abbr>
</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
REQUIRED
abbr {
cursor: help;
font-style: normal;
border: 0;
}
<form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<p>Required fields are marked
<abbr title=\"required\">*</abbr>.</p>
<ol>
<li>
<label for=\"contact-name\">
Name<abbr title=\"required\">*</abbr>
</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
How should we ...
<li>
<label for=\"contact-email\">
emphasize important Email<abbr title=\"required\">*</abbr>
</label>
formatting info?
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</li>
<li>
<label for=\"contact-phone\">
Phone<em
class=\"msg\"> format: 123-456-7890</em>
</label>
<input type=\"text\" id=\"contact-phone\" name=\"phone\" />
</li>
<li>
<label for=\"contact-subject\">
Subject<abbr title=\"required\">*</abbr>
</label>
<select id=\"contact-subject\" name=\"subject\">
<option value=\"Error\">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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
...
<li>
<label for=\"contact-phone\">Phone<em
class=\"msg\"> format: 123-456-7890</em></label>
<input type=\"text\" id=\"contact-phone\" name=\"phone\" />
</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

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=\"contact-phone\">Phone<em
class=\"msg\"> format: 123-456-7890</em></label>
<input type=\"text\" id=\"contact-phone\" name=\"phone\" />
</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

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=\"contact-phone\">Phone<em
position: absolute; class=\"msg\"> format: 123-456-7890</em></label>
<input type=\"text\" id=\"contact-phone\" name=\"phone\" />
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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
FORMATTING
...
<li>
<label for=\"contact-phone\">Phone<em
class=\"msg\"> format: 123-456-7890</em></label>
<input type=\"text\" id=\"contact-phone\" name=\"phone\" />
</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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
How should we ...
<li class=\"error\">
strongly emphasize
<label for=\"contact-email\">
Email<abbr title=\"required\">*</abbr>
<strong class=\"err\"> You forgot to fill
even more important in your email</strong>
error advisories?
</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
...
<li class=\"error\">
<label for=\"contact-email\">
Email<abbr title=\"required\">*</abbr><strong class=\"err\"> You forgot
to fill in your email</strong>
</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
padding-left: 5px;
text-align: left;
}
...
<li class=\"error\">
<label for=\"contact-email\">
Email<abbr title=\"required\">*</abbr><strong class=\"err\"> You forgot
to fill in your email</strong>
</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</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

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=\"error\">
top: 0; <label for=\"contact-email\">
Email<abbr title=\"required\">*</abbr><strong class=\"err\"> You forgot
left: 390px; to fill in your email</strong>
} </label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
strong.err:before { </li>
...
content: \"<\"
}
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

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=\"error\">
<label for=\"contact-email\">
Email<abbr title=\"required\">*</abbr><strong class=\"err\"> You forgot
to fill in your email</strong>
</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
How do we notify <form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
users of errors? <div id=\"errors\">
<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=\"#contact-email\">your email
address</a></li>
</ol>
and linking to the field with </div>
errors doesn't hurt <p>Required fields are marked <abbr title=\"required\">*</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
<form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<div id=\"errors\">
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=\"#contact-email\">your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=\"required\">*</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

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
#errors {
background: #ffdfdf;
border: 2px solid #b00;
color: #333;
margin: .5em 0 1em;
padding: 10px;
}
<form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<div id=\"errors\">
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=\"#contact-email\">your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=\"required\">*</abbr>.</p>
...
2007 A A RO N G U S TA F S O N 8 4/ 88 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
#errors p {
margin: 0;
padding: 0;
}
#errors ol {
list-style: disc;
margin: 0 0 0 20px;
} <form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<div id=\"errors\">
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=\"#contact-email\">your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=\"required\">*</abbr>.</p>
...
2007 A A RO N G U S TA F S O N 8 5/ 88 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS AN EVENT APART 2007
MESSAGING:
ERRORS
#errors a {
color: #b00;
}
<form id=\"contact-form\" action=\"test.php\" method=\"get\">
<fieldset>
<legend>Send us a message</legend>
<div id=\"errors\">
<p>We encountered <strong>1 error</strong> while trying to process
this form:</p>
<ol>
<li>You forgot to include <a href=\"#contact-email\">your email
address</a></li>
</ol>
</div>
<p>Required fields are marked <abbr title=\"required\">*</abbr>.</p>
...
2007 A A RO N G U S TA F S O N 8 6/ 88 E A S Y ! D E S I G N S , LLC
cc

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

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

LEARNING TO LOVE FORMS AN EVENT APART 2007
http://slideshare.net/AaronGustafson
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