Learning To Love Forms Webvisions 07 21033

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


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


FORMS ARE
A NECESSARY

EVIL
cc


SIMPLE FORM:
CONTACT US

cc

SIMPLE FORM:
CONTACT US

FORM Element <form id=quot;contact-formquot;
action=quot;/action-page.phpquot;
establishes a form method=quot;postquot;>

ACTION is the only required 
attribute and should always </form>
be a URI

METHOD defaults to “get”

NAME is depreciated; use ID
instead

cc

SIMPLE FORM:
CONTACT US

FIEDSET Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
used to group related fields <legend>Send us a message</legend>

LEGEND Element </fieldset>
</form>
used to provide a caption for
a FIELDSET

cc

SIMPLE FORM:
CONTACT US

Containing FORM
<form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<legend>Send us a message</legend>

Controls <p></p>
<p></p>
<p></p>
P or DIV
</fieldset>
</form>

sensible choices, but not
very accurate (except in
certain instances)
<fieldset>

OL or UL
<ol>
most forms are lists of <li></li>
<li></li>
questions or form controls, <li></li>
so these are better </ol>
</fieldset>
</form>

cc

SIMPLE FORM:
CONTACT US

INPUT Text Control <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
type=quot;namequot; is a basic text <ol>
<li>Name
input field <input type=quot;textquot; name=quot;namequot;
id=quot;contact-namequot; /></li>
(also type=quot;passwordquot; for <li>Email
<input type=quot;textquot; name=quot;emailquot;
content you want encrypted)
id=quot;contact-emailquot; /></li>
<li></li>

NAME vs. ID
</ol>
</fieldset>
</form>
NAME is for the back end
ID is for the front end

cc


SIMPLE FORM:
CONTACT US

TEXTAREA <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
a multiline text form control <ol>
<li>Name
<input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li>
<li>Email
requires ROWS and COLS <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li>
<li>Message
attributes!!! <textarea name=quot;messagequot;
id=quot;contact-messagequot;
rows=quot;4quot; cols=quot;30quot;></textarea></li>
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

Working with LABEL
<fieldset>
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=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
<fieldset>
<ol>
explicit association for=quot;contact-namequot;>Name</label>
<li><label

LABEL's FOR attribute is an <input id=quot;contact-namequot; ... /></li>
...
ID reference to the form </ol>
</fieldset>
control </form>

cc


SIMPLE FORM:
CONTACT US

Buttons
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
trigger events in a form; use <ol>
...
either INPUT or BUTTON </ol>
<input type=quot;submitquot; value=quot;Goquot; />
element </fieldset>
</form>

Common TYPEs
submit – submits the form;
default button type <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>

reset – resets all form
<ol>
...
</ol>
control values back to their <button type=quot;submitquot;>Go</button>
defaults when the page </fieldset>
</form>
loaded

cc


SIMPLE FORM:
CONTACT US

<fieldset>
<ol>
<li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot;
name=quot;namequot; /></li>
<li><label for=quot;contact-emailquot;>Email</label>
<input type=quot;textquot; id=quot;contact-emailquot;
name=quot;emailquot; /></li>
<li><label for=quot;contact-messagequot;>Message</label>
<textarea id=quot;contact-messagequot;
name=quot;messagequot; rows=quot;4quot;
cols=quot;30quot;></textarea></li>
</ol>
<button type=quot;submitquot;>Go</button>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

body {
font: 62.5%
quot;Lucida Sans Unicodequot;,
quot;Lucida Grandequot;,
sans-serif;
}
ol, ul, p {
font-size: 1.2em; <fieldset>
line-height: 1.5; <legend>Send us a message</legend>
<ol>
} <li><label for=quot;contact-namequot;>Name</label>
<input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
<input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
<textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

form, fieldset, legend {
border: 0;
padding: 0;
margin: 0;
}
legend {
font-size: 2em;
} <fieldset>
form ol, form ul { <legend>Send us a message</legend>
<ol>
list-style: none; <li><label for=quot;contact-namequot;>Name</label>
margin: 0; <li><label for=quot;contact-emailquot;>Email</label>
padding: 0; <li><label for=quot;contact-messagequot;>Message</label>
} cols=quot;30quot;></textarea></li>
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

form li {
margin: 0 0 .75em;
}
label {
display: block;
}
input, textarea {
width: 250px; <fieldset>
} <legend>Send us a message</legend>
<ol>
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

form li {
clear: both;
margin: 0 0 .75em;
padding: 0;
}
label {
display: block;
float: left; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
line-height: 1.6; <legend>Send us a message</legend>
<ol>
margin-right: 10px; <li><label for=quot;contact-namequot;>Name</label>
text-align: right; <li><label for=quot;contact-emailquot;>Email</label>
width: 120px; <li><label for=quot;contact-messagequot;>Message</label>
} cols=quot;30quot;></textarea></li>
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

legend {
font-size: 2em;
line-height: 1.8;
padding-bottom: .5em;
}
button {
margin-left: 130px;
cursor: pointer; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
} <legend>Send us a message</legend>
<ol>
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

label:after {
content: ':';
}
input, textarea {
background: #ddd;
width: 250px;
}
input:focus, <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
textarea:focus { <legend>Send us a message</legend>
<ol>
background: #fff; <li><label for=quot;contact-namequot;>Name</label>
} <li><label for=quot;contact-emailquot;>Email</label>
/* Some styles to get <li><label for=quot;contact-messagequot;>Message</label>
the baselines to cols=quot;30quot;></textarea></li>
</ol>
match & to unify the <button type=quot;submitquot;>Go</button>
</fieldset>
type used */ </form>

cc


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

body { label:after {
font: 62.5% quot;Lucida Sans content: ':';
Unicodequot;, quot;Lucida Grandequot;, }
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;
}

cc


SIMPLE FORM:
CONTACT US

cc


SIMPLE FORM:
CONTACT US

SELECTion Lists <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
allows selection of one or <ol>
...
more OPTIONs <li><label
for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot;
On OPTION elements, the name=quot;subjectquot;>
VALUE attribute is optional <option value=quot;Errorquot;>I noticed a
(contents are submitted by website error</option>
<option value=quot;Questionquot;>I have a
default)
question</option>
<option>Other</option>
</select></li>
...
</ol>
</fieldset>
</form>

cc


SIDEBAR:
OPTGROUPS

<select id=quot;favorite-fruitquot; name=quot;favorite-fruitquot;>
<optgroup label=quot;Applesquot;>
<option value=quot;Golden Delicious Applesquot;>Golden Delicious</option>
<option value=quot;Granny Smith Applesquot;>Granny Smith</option>
<option value=quot;Macintosh Applesquot;>Macintosh</option>
<option value=quot;Red Delicious Applesquot;>Red Delicious</option>
</optgroup>
<optgroup label=quot;Berriesquot;>
<option>Blackberries</option>
<option>Blueberries</option>
<option>Raspberries</option>
<option>Strawberries</option>
</optgroup>
</select>

cc


SIMPLE FORM:
CONTACT US

<fieldset>
<ol>
...
<li><label for=quot;contact-subjectquot;>Subject</label>
<select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
<option value=quot;Questionquot;>I have a question</option>
</select></li>
...
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

select {
background: #ddd;
width: 260px;
/* width is *usually*
the input width +
input padding +
4px */
} <fieldset>
input:focus, <legend>Send us a message</legend>
<ol>
textarea:focus, ...
<li><label for=quot;contact-subjectquot;>Subject</label>
select:focus { <select id=quot;contact-subjectquot; name=quot;subjectquot;>
<option value=quot;Errorquot;>I noticed a website error</option>
background: #fff; <option value=quot;Questionquot;>I have a question</option>
} </select></li>
...
</ol>
</fieldset>
</form>

cc


SIDEBAR:
SELECTS

WINDOWS XP

Mozilla IE 6/7 IE 6 Opera
IE 7
(XP) (classic)
(classic)

OS X

Camino Firefox
Safari IE 5 Opera

cc


SIMPLE FORM:
CONTACT US

cc


SIMPLE FORM:
CONTACT US

Nested FIELDSETs ...
<li>
a great way to organize radio <fieldset class=quot;radioquot;>
<legend>I would prefer to be
or checkbox groups
contacted by</legend>
<ul>
The LEGEND is the question <li><label><input type=quot;radioquot;
or statement name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot;
Lists organize the possible name=quot;methodquot; value=quot;phonequot; />
responses (OL or UL) phone</label></li>
</ul>
implicit LABELs provide an </fieldset>
</li>
easy way to style in IE6 ...

cc


SIMPLE FORM:
CONTACT US

...
<li>
<fieldset class=quot;radioquot;>
<legend>I would prefer to be contacted by</legend>
<ul>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
<li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>

cc


SIMPLE FORM:
CONTACT US

.radio legend {
font-size: 1em;
line-height: 1.5;
padding: 0 0 0 6px;
margin: 0;
}
.radio label {
display: inline; ...
width: auto; <li>
margin: 0; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>

cc


SIMPLE FORM:
CONTACT US

.radio {
margin-left: 125px;
}
.radio ul {
font-size: 1em;
margin: .3em 0 0;
}
.radio label:after { ...
content: ''; <li>
} <legend>I would prefer to be contacted by</legend>
<ul>
label input { <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
background: <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
phone</label></li>
transparent; </ul>
</fieldset>
width: auto; </li>
...
} </form>

cc


SIMPLE FORM:
CONTACT US

.radio li {
float: left;
margin: 0;
width: 48%;
clear: none;
}
label input {
width: auto; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
...
position: relative; <li>
top: 2px; <legend>I would prefer to be contacted by</legend>
<ul>
} <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
email</label></li>
phone</label></li>
</ul>
</fieldset>
</li>
...
</form>

cc


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;
} ...
is an exceedingly long
<legend>This
<code>LEGEND</code> to demonstrate the odd
behavior of <code>LEGEND</code>s</legend>
<ul>
email</label></li>
phone</label></li>
</ul>
</fieldset>
...

cc


SIMPLE FORM:
CONTACT US

.radio legend span {
display: block;
width: 270px;
}

...
<legend><span>This is an exceedingly long
<code>LEGEND</code> to demonstrate the odd behavior of
<code>LEGEND</code>s</span></legend>
<ul>
email</label></li>
phone</label></li>
</ul>
</fieldset>
...

cc


SIMPLE FORM:
CONTACT US

cc


SIMPLE FORM:
CONTACT US

Confirmations <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
<fieldset>
a little CLASSification goes a <ol>
...
long way <li class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot;
value=quot;0quot; />
<label><input type=quot;checkboxquot;
name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing
list</label></li>
...
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

<fieldset>
<ol>
...
<li class=quot;confirmquot;>
<input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
<label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
Please add me to your mailing list</label></li>
...
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

.confirm label {
display: block;
float: none;
margin-left: 125px;
text-align: left;
width: 270px;
}
<fieldset>
<ol>
...
...
</ol>
</fieldset>
</form>

cc


SIMPLE FORM:
CONTACT US

.confirm {
margin-bottom: 1.4em;
}
.radio label:after,
.confirm label:after {
content: '';
}
<fieldset>
<ol>
...
...
</ol>
</fieldset>
</form>

cc


MORE
FORMS OF
FORMS

cc


SIMPLE FORM:
SEARCH BOX

cc

SIMPLE FORM:
SEARCH BOX

POST vs. GET <form id=quot;search-formquot;
action=quot;/action-page.phpquot;
Search forms are traditionally method=quot;getquot;>
GET requests to allow the
action page (i.e. the results) 
to be bookmarkable.
</form>

cc

SIMPLE FORM:
SEARCH BOX

You need something <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
Sometimes a FIELDSET is 
unnecessary, but in XHTML, <p>
</form>
you need something to wrap
the contents of a form

cc


SIMPLE FORM:
SEARCH BOX

Easy-peasy <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
<label for=quot;search-queryquot;>Search this
site for</label>
<input type=quot;textquot; id=quot;search-queryquot;
name=quot;queryquot; />
<p>
</form>

cc


SIMPLE FORM:
SEARCH BOX

It’s a BUTTON <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
<label for=quot;search-queryquot;>Search this site for</label>
big shock, I know <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
<p>
</form>

cc


SIMPLE FORM:
SEARCH BOX

body {
background: #54af44;
font: 62.5% quot;Lucida
Sans Unicodequot;, quot;Lucida
Grandequot;, sans-serif;
}
ol, ul, p {
font-size: 1.2em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
line-height: 1.5; <label for=quot;search-queryquot;>Search this site for</label>
<input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
} <button type=quot;submitquot;>Go</button>
<p>
</form>

cc


SIMPLE FORM:
SEARCH BOX

label {
line-height: 2em;
}
input {
border: 1px solid #c00;
background: #ebebeb;
margin: 0 .5em;
padding: 2px 4px; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
} <label for=quot;search-queryquot;>Search this site for</label>
input:focus { <button type=quot;submitquot;>Go</button>
<p>
background: #fff; </form>

}

cc


SIMPLE FORM:
SEARCH BOX

button {
background: #c00;
border: 0;
color: #fff;
cursor: pointer;
font-size: .9em;
font-weight: bold;
letter-spacing: .1em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
<p>
padding: 2px 8px; <label for=quot;search-queryquot;>Search this site for</label>
text-transform: <button type=quot;submitquot;>Go</button>
<p>
uppercase; </form>

}

cc


SIMPLE FORM:
DATE SELECT

cc

SIMPLE FORM:
DATE SELECT

Getting organized <fieldset class=quot;datequot;>



</fieldset>

cc

SIMPLE FORM:
DATE SELECT

Not really a LABEL <fieldset class=quot;datequot;>
<legend>Post Date</legend>


</fieldset>

cc


SIMPLE FORM:
DATE SELECT

Not just a SELECT <fieldset class=quot;datequot;>
<ol>
we need some LABELing <li>
<label for=quot;date-dayquot;>Date</label>
<select id=quot;date-dayquot; name=quot;dayquot;>
<option>01</option>
...
<option>31</option>
</select>
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

And so on <fieldset class=quot;datequot;>
<ol>
<li>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
<select id=quot;date-monthquot; name=quot;monthquot;>
<option value=quot;01quot;>January</option>
...
<option value=quot;12quot;>December</option>
</select>
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

And so forth <fieldset class=quot;datequot;>
<ol>
<li>
...
</li>
<li>
<label for=quot;date-monthquot;>Month</label>
...
</li>
<li>
<label for=quot;date-yearquot;>Year</label>
<select id=quot;date-yearquot; name=quot;yearquot;>
<option>2007</option>
<option>2008</option>
</select>
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

body {
background: #54af44;
font: 62.5% quot;Lucida
Sans Unicodequot;, quot;Lucida
Grandequot;, sans-serif;
}
ol, ul, p, legend {
font-size: 1.2em; <fieldset class=quot;datequot;>
line-height: 1.5; <ol>
<li><label for=quot;date-dayquot;>Date</label>
} ...
</li>
legend { <li><label for=quot;date-monthquot;>Month</label>
...
color: #000; </li>
<li><label for=quot;date-yearquot;>Year</label>
} ...
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date {
border: 0;
padding: 0;
}
.date ol {
list-style: none;
margin: 0 0 0 130px;
padding: 0; <fieldset class=quot;datequot;>
} <ol>
...
</li>
<li><label for=quot;date-monthquot;>Month</label>
...
</li>
...
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date li {
float: left;
}

<fieldset class=quot;datequot;>
<ol>
...
</li>
...
</li>
...
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date select {
background: #e2efe0;
margin: 0 .25em 0 0;
}
.date select:focus {
background: #fff;
}
<ol>
...
</li>
...
</li>
...
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date label {
position: absolute;
left: -999em;
}

<ol>
...
</li>
...
</li>
...
</li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date {
border: 0;
padding: 0;
position: relative;
}
.date legend span {
display: block;
line-height: 1.6; <fieldset class=quot;datequot;>

text-align: right; <legend><span>Post Date</span></legend>
<ol>
width: 120px; <li><label for=quot;date-dayquot;>Date</label>
...
position: absolute; </li>
top: 0; ...
</li>
left: 0; <li><label for=quot;date-yearquot;>Year</label>
...
} </li>
</ol>
</fieldset>

cc


SIMPLE FORM:
DATE SELECT

.date legend
span:after {
content: quot;:quot;;
}

<legend><span>Post Date</span></legend>
<ol>
...
</li>
...
</li>
...
</li>
</ol>
</fieldset>

cc


COMPLEX FORM:
RELATED FIELDS

cc

COMPLEX FORM:
RELATED FIELDS

Organization and <fieldset class=quot;radio relatedquot;>
<legend>
coordination <span>Confine results to</span>
as with other elements, form </legend>
<ul>
components can have
<li>
multiple CLASSifications 
</li>
<li>

</li>
<li>

</li>
</ul>
</fieldset>

cc


COMPLEX FORM:
RELATED FIELDS

Basic implicit LABEL <fieldset class=quot;radio relatedquot;>
<legend><span>Confine results to</span></legend>
<ul>
nothing shocking here <li>
<label>
<input type=quot;radioquot; name=quot;confinesquot;
value=quot;yearquot; /> within the last year
</label>
</li>
...
</ul>
</fieldset>

cc


COMPLEX FORM:
RELATED FIELDS

LABELs can contain <fieldset class=quot;radio relatedquot;>
<ul>

more than one form <li>
<label><input type=quot;radioquot; name=quot;confinesquot; value=quot;yearquot; />
within the last year</label>
control </li>
<li>

in our case, we have a radio <label>
INPUT as well as a SELECTion value=quot;monthquot; />
box the month of
<select name=quot;monthquot;>
...
<option value=quot;12quot;>December</option>
</select>
</label>
</li>
...
</ul>
</fieldset>

cc

COMPLEX FORM:
RELATED FIELDS

How do I code that?!? <fieldset class=quot;radio relatedquot;>
<ul>
think about it... what are the ...
<li>
relationships of the fields? <dl>
<dt>

</dt>
<dd>

</dd>
</dl>
</li>
</ul>
</fieldset>

cc

COMPLEX FORM:
RELATED FIELDS

We know the first bit <fieldset class=quot;radio relatedquot;>
<ul>
...
<li>
<dl>
<dt>
<label>
value=quot;rangequot; />
a monthly range
</label>
</dt>
<dd>

</dd>
</dl>
</li>
</ul>
</fieldset>

cc

COMPLEX FORM:
RELATED FIELDS

We need to organize <fieldset class=quot;radio relatedquot;>
<ul>
this now ...
<li>
<dl>
<dt>
<label><input type=quot;radioquot; name=quot;confinesquot;...
</dt>
<dd>
<ol>
<li>

</li>
<li>

</li>
</ol>
</dd>
</dl>
</li>
</ul>
</fieldset>

cc

COMPLEX FORM:
RELATED FIELDS

Simple explicit ...
<dd>
<ol>
LABEL <li>
<label for=quot;range-startquot;>
from the start of</label>
<select id=quot;range-startquot;
name=quot;range-startquot;>
<option value=quot;2006-01quot;>January
2006</option>
...
<option value=quot;2006-12quot;>December
2006</option>
</select>
</li>
<li>

</li>
...
</ol>
</dd>
...

cc


COMPLEX FORM:
RELATED FIELDS

And again ...
<dd>
<ol>
<li>
<label for=quot;range-startquot;>from the start of</label>
...
</li>
<li>
<label for=quot;range-endquot;>
until the end of</label>
<select id=quot;range-endquot;
name=quot;range-endquot;>
<option value=quot;2006-01quot;>January
2006</option>
...
<option value=quot;2006-12quot;>December
2006</option>
</select>
</li>
</ol>
</dd>
...

cc

<fieldset class=quot;radio relatedquot;>
<ul>
<li>
<label>

COMPLEX FORM: <input type=quot;radioquot; name=quot;confinesquot; value=quot;yearquot; />
within the last year</label>
</li>

RELATED FIELDS <li>
<label>
<input type=quot;radioquot; name=quot;confinesquot; value=quot;monthquot; />
the month of
<select name=quot;monthquot;>
...
</select>
</label>
</li>
<li>

Itʼs a lot of code...
<dl>
<dt>
<label>
<input type=quot;radioquot; name=quot;confinesquot; value=quot;rangequot; />
a monthly range
</label>
</dt>
<dd>
<ol>
<li>
<label for=quot;range-startquot;>from the start of</label>
<select id=quot;range-startquot; name=quot;range-startquot;>
<option value=quot;2006-01quot;>January 2006</option>
...
</select>
</li>
<li>
<label for=quot;range-endquot;>until the end of</label>
<select id=quot;range-endquot; name=quot;range-endquot;>
<option value=quot;2006-01quot;>January 2006</option>
...
</select>
</li>
</ol>
</dd>
</dl>
</li>
</ul>
</fieldset>

cc


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

cc

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=quot;radio relatedquot;>
padding: 0; <ul>
<li>
} 
li ul, li ol { </li>
<li>
font-size: 1em; 
</li>
} <li>

</li>
</ul>
</fieldset>

cc

COMPLEX FORM:
RELATED FIELDS

.related li {
clear: both;
float: none;
margin: 0 0 .5em;
width: auto;
}

/* For IE to recover from <fieldset class=quot;radio relatedquot;>
a strange margin */ <ul>
<li>
.related li { 
</li>
zoom: 1; <li>

} </li>
<li>

</li>
</ul>
</fieldset>

cc

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=quot;radio relatedquot;>
float: left; <ul>
<li>
line-height: 1.9; 
</li>
width: 100px; <li>

} </li>
<li>

</li>
</ul>
</fieldset>

cc

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=quot;radio relatedquot;>
} <ul>
<li>

</li>
<li>

</li>
<li>

</li>
</ul>
</fieldset>

cc

Learning To Love Forms Webvisions 07 21033

Learning To Love Forms Webvisions 07 21033

Recommended

Recommended

More Related Content

More from Ross Lawley

More from Ross Lawley (19)

Recently uploaded

Recently uploaded (20)

Learning To Love Forms Webvisions 07 21033