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

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

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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
cc 2007 A A RO N G U S TA F S O N 5/67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 7/67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 9/67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 <li><label for=\"contact-name\">Name</label>
LABEL's FOR attribute is an ...
<input id=\"contact-name\" ... /></li>
ID reference to the form </ol>
</fieldset>
control </form>
cc 2007 A A RO N G U S TA F S O N 1 0/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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
cc 2007 A A RO N G U S TA F S O N 1 1/ 67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 1 3/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 1 4/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form, fieldset, legend {
border: 0;
padding: 0;
margin: 0;
}
legend {
font-size: 2em;
<form id=\"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\"
} </ol>
cols=\"30\"></textarea></li>
<button type=\"submit\">Go</button>
</fieldset>
</form>
cc 2007 A A RO N G U S TA F S O N 1 5/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
margin: 0 0 .75em;
}
label {
display: block;
}
input, textarea {
<form id=\"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>
cc 2007 A A RO N G U S TA F S O N 1 6/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
form li {
clear: both;
margin: 0 0 .75em;
padding: 0;
}
label {
display: block;
float: left; <form id=\"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>
cc 2007 A A RO N G U S TA F S O N 1 7/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
legend {
font-size: 2em;
line-height: 1.8;
padding-bottom: .5em;
}
button {
margin-left: 130px;
cursor: pointer; <form id=\"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>
cc 2007 A A RO N G U S TA F S O N 1 8/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
label:after {
content: ':';
}
input, textarea {
background: #ddd;
width: 250px;
}
input:focus, <form id=\"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 </ol>
cols=\"30\"></textarea></li>
match & to unify the <button type=\"submit\">Go</button>
</fieldset>
type used */ </form>
cc 2007 A A RO N G U S TA F S O N 1 9/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 2 2/ 67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 2 4/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
select {
background: #ddd;
width: 260px;
/* width is *usually*
the input width +
input padding +
4px */
<form id=\"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>
cc 2007 A A RO N G U S TA F S O N 2 5/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=\"radio\">
or checkbox groups <legend>I would prefer to be
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 ...
cc 2007 A A RO N G U S TA F S O N 2 8/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 2 9/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
}
.radio label {
<form id=\"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>
cc 2007 A A RO N G U S TA F S O N 3 0/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio {
margin-left: 125px;
}
.radio ul {
font-size: 1em;
margin: .3em 0 0;
}
<form id=\"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>
cc 2007 A A RO N G U S TA F S O N 3 1/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
CONTACT US
.radio li {
float: left;
margin: 0;
width: 48%;
clear: none;
}
label input {
width: auto; <form id=\"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>
cc 2007 A A RO N G U S TA F S O N 3 2/ 67 E A S Y ! D E S I G N S , LLC

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

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

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

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 3 8/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 3 9/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 4 0/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 4 1/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
}
.date ol {
list-style: none;
margin: 0 0 0 130px;
padding: 0; <fieldset class=\"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>
cc 2007 A A RO N G U S TA F S O N 4 2/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 4 3/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date select {
background: #e2efe0;
margin: 0 .25em 0 0;
}
.date select:focus {
background: #fff;
}
<fieldset class=\"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>
cc 2007 A A RO N G U S TA F S O N 4 4/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 4 5/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
SIMPLE FORM:
DATE SELECT
.date {
border: 0;
padding: 0;
position: relative;
}
.date legend span {
display: block;
line-height: 1.6; <fieldset class=\"date\">
text-align: right; <legend><span> </span>
Post Date </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>
cc 2007 A A RO N G U S TA F S O N 4 6/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
cc 2007 A A RO N G U S TA F S O N 4 7/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
...
cc 2007 A A RO N G U S TA F S O N 5 0/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
...
cc 2007 A A RO N G U S TA F S O N 5 1/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
...
cc 2007 A A RO N G U S TA F S O N 5 2/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
...
cc 2007 A A RO N G U S TA F S O N 5 3/ 67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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?
cc 2007 A A RO N G U S TA F S O N 5 5/ 67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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>
...
cc 2007 A A RO N G U S TA F S O N 5 7/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
strong.err {
color: #ffdfdf;
display: block;
line-height: 1.8;
padding-left: 5px;
text-align: left;
white-space: nowrap;
position: absolute; ...
<li class=\"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: \"<\"
}
cc 2007 A A RO N G U S TA F S O N 5 8/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
.error input {
border: 2px solid #b00;
background: #ffdfdf;
}
.error input:focus {
background: #fff;
}
...
<li class=\"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>
...
cc 2007 A A RO N G U S TA F S O N 5 9/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors {
background: #ffdfdf;
border: 2px solid #b00;
color: #333;
margin: .5em 0 1em;
padding: 10px;
}
<form id=\"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>
...
cc 2007 A A RO N G U S TA F S O N 6 2/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007
MESSAGING:
ERRORS
#errors p {
margin: 0;
padding: 0;
}
#errors ol {
list-style: disc;
margin: 0 0 0 20px;
} <form id=\"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>
...
cc 2007 A A RO N G U S TA F S O N 6 3/ 67 E A S Y ! D E S I G N S , LLC

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

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

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

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