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