LEARNING TO LOVE FORMS WEBVISIONS 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 WEBVISIONS 2007
AARON GUSTAFSON
EASY! DESIGNS, LLC
2007 A A RO N G U S TA F S O N 2/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
FORMS ARE
A NECESSARY
EVIL
2007 A A RO N G U S TA F S O N 3/ 75 E A S Y ! D E S I G N S , LLC
cc

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

LEARNING TO LOVE FORMS WEBVISIONS 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 5/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 6/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 7/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
CONTACT US
INPUT Text Control <form id="contact-form" action="#" method="post">
<fieldset>
<legend>Send us a message</legend>
type="name" 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 encrypted)
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 8/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 9/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 10/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 11/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 12/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 13/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 14/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 15/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 16/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 17/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 18/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 19/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 20/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 21/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 22/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 23/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 24/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 25/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 26/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 27/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 28/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 29/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 30/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 31/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 32/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 33/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 34/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
CONTACT US
2007 A A RO N G U S TA F S O N 35/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 36/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 37/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 38/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 39/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
MORE
FORMS OF
FORMS
2007 A A RO N G U S TA F S O N 40/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
SEARCH BOX
2007 A A RO N G U S TA F S O N 41/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 42/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 43/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 44/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 45/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 46/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 47/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 48/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
SIMPLE FORM:
DATE SELECT
2007 A A RO N G U S TA F S O N 49/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 50/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 51/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 52/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 53/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 54/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 55/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 56/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 57/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 58/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 59/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 60/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 61/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
2007 A A RO N G U S TA F S O N 62/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
Organization and <fieldset class="radio related">
<legend>
coordination <span>Confine results to</span>
as with other elements, form </legend>
<ul>
components can have
<li>
multiple CLASSifications <!-- year -->
</li>
<li>
<!-- month -->
</li>
<li>
<!-- range -->
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 63/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
Basic implicit LABEL <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
nothing shocking here <li>
<label>
<input type="radio" name="confines"
value="year" /> within the last year
</label>
</li>
...
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 64/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
LABELs can contain <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
more than one form <li>
<label><input type="radio" name="confines" value="year" />
within the last year</label>
control </li>
<li>
in our case, we have a radio <label>
<input type="radio" name="confines"
INPUT as well as a SELECTion value="month" />
box the month of
<select name="month">
<option value="01">January</option>
...
<option value="12">December</option>
</select>
</label>
</li>
...
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 65/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
How do I code that?!? <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
think about it... what are the ...
<li>
relationships of the fields? <dl>
<dt>
<!-- radio will go here -->
</dt>
<dd>
<!-- related fields here -->
</dd>
</dl>
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 66/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
We know the first bit <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
...
<li>
<dl>
<dt>
<label>
<input type="radio" name="confines"
value="range" />
a monthly range
</label>
</dt>
<dd>
<!-- related fields here -->
</dd>
</dl>
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 67/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
We need to organize <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
this now ...
<li>
<dl>
<dt>
<label><input type="radio" name="confines"...
</dt>
<dd>
<ol>
<li>
<!-- start -->
</li>
<li>
<!-- end -->
</li>
</ol>
</dd>
</dl>
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 68/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
Simple explicit ...
<dd>
<ol>
LABEL <li>
<label for="range-start">
from the start of</label>
<select id="range-start"
name="range-start">
<option value="2006-01">January
2006</option>
...
<option value="2006-12">December
2006</option>
</select>
</li>
<li>
<!-- end -->
</li>
...
</ol>
</dd>
...
2007 A A RO N G U S TA F S O N 69/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
And again ...
<dd>
<ol>
<li>
<label for="range-start">from the start of</label>
...
</li>
<li>
<label for="range-end">
until the end of</label>
<select id="range-end"
name="range-end">
<option value="2006-01">January
2006</option>
...
<option value="2006-12">December
2006</option>
</select>
</li>
</ol>
</dd>
...
2007 A A RO N G U S TA F S O N 70/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
<fieldset class="radio related">
<legend><span>Confine results to</span></legend>
<ul>
<li>
<label>
COMPLEX FORM: <input type="radio" name="confines" value="year" />
within the last year</label>
</li>
RELATED FIELDS <li>
<label>
<input type="radio" name="confines" value="month" />
the month of
<select name="month">
<option value="01">January</option>
...
</select>
</label>
</li>
<li>
Itʼs a lot of code...
<dl>
<dt>
<label>
<input type="radio" name="confines" value="range" />
a monthly range
</label>
</dt>
<dd>
<ol>
<li>
<label for="range-start">from the start of</label>
<select id="range-start" name="range-start">
<option value="2006-01">January 2006</option>
...
</select>
</li>
<li>
<label for="range-end">until the end of</label>
<select id="range-end" name="range-end">
<option value="2006-01">January 2006</option>
...
</select>
</li>
</ol>
</dd>
</dl>
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 71/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
Confine results to
List of three items
COMPLEX FORM: bullet
RELATED FIELDS Radio button (not checked) within the last year
bullet
Radio button (not checked) the month of
Combo box January
bullet
...but the benefits are Definition list of one item
Radio button (not checked) a monthly range
worth it
equals
List of two items
one: from the start of
Combo box January 2006
two: until the end of
Combo box January 2006
List end
List end
List end
transcribed by Fangs
2007 A A RO N G U S TA F S O N 72/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
/* We'll save some space
and inherit styles
from .radio */
form ol, form ul,
form dl {
list-style: none;
margin: 0; <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
padding: 0; <ul>
<li>
} <!-- year -->
li ul, li ol { </li>
<li>
font-size: 1em; <!-- month -->
</li>
} <li>
<!-- range -->
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 73/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
.related li {
clear: both;
float: none;
margin: 0 0 .5em;
width: auto;
}
/* For IE to recover from <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
a strange margin */ <ul>
<li>
.related li { <!-- year -->
</li>
zoom: 1; <li>
<!-- month -->
} </li>
<li>
<!-- range -->
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 74/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
.related select {
margin-left: .25em;
}
.related dd {
margin: .5em 0 0;
padding: 0 0 0 3em;
}
.related dd label { <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
float: left; <ul>
<li>
line-height: 1.9; <!-- year -->
</li>
width: 100px; <li>
<!-- month -->
} </li>
<li>
<!-- range -->
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 75/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
COMPLEX FORM:
RELATED FIELDS
.related legend span {
display: block;
line-height: 1.8;
text-align: right;
width: 120px;
position: absolute;
top: 0;
left: -130px; <fieldset class="radio related">
<legend><span>Confine results to</span></legend>
} <ul>
<li>
<!-- year -->
</li>
<li>
<!-- month -->
</li>
<li>
<!-- range -->
</li>
</ul>
</fieldset>
2007 A A RO N G U S TA F S O N 76/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
MAKING
THE MOST OF
MESSAGES
2007 A A RO N G U S TA F S O N 77/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
MESSAGING:
REQUIRED
2007 A A RO N G U S TA F S O N 78/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 79/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 80/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 81/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 82/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
MESSAGING:
FORMATTING
2007 A A RO N G U S TA F S O N 83/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 84/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 85/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 86/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 87/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 88/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
MESSAGING:
ERRORS
2007 A A RO N G U S TA F S O N 89/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 90/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 91/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 92/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 93/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 94/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 95/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 96/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 97/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 98/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 99/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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 1 00/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 2007
FORMS ARE
NOT
NECESSARILY
EVIL
2007 A A RO N G U S TA F S O N 1 01/ 75 E A S Y ! D E S I G N S , LLC
cc

LEARNING TO LOVE FORMS WEBVISIONS 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