Forms. We all have to make 'em, but few of us love 'em. Aaron Gustafson believes that this is because we don't understand them. In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. This talk covered: * basic form building blocks; * markup for common form components; * error, warning, and formatting messages; * form styling and its implications; * browser oddities with certain form controls; and

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. 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

45. 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

46. 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

47. 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

48. 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

49. 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

50. 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

51. 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

52. 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

53. 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

54. 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

55. 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

56. 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

57. 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

58. 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

59. 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

60. 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

61. 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

62. 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

63. 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

64. 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

65. 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

66. 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

67. 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

68. 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

69. 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

70. 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

71. 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

72. 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

73. 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

74. 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

75. 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

76. 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

77. 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

78. 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