Learning To Love Forms (WebVisions '07)

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

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

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

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FORM Element <form id="contact-form" action="/action-page.php" establishes a form method="post"> ACTION is the only required  attribute and should always </form> be a URI METHOD defaults to “get” NAME is depreciated; use ID instead 2007 A A RO N G U S TA F S O N 5/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id="contact-form" action="/action-page.php" method="post"> <fieldset> used to group related fields <legend>Send us a message</legend>  LEGEND Element </fieldset> </form> used to provide a caption for a FIELDSET 2007 A A RO N G U S TA F S O N 6/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Containing FORM <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> Controls <p></p> <p></p> <p></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></li> <li></li> questions or form controls, <li></li> so these are better </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 7/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US INPUT Text Control <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> type="name" is a basic text <ol> <li>Name input field <input type="text" name="name" id="contact-name" /></li> (also type="password" for <li>Email <input type="text" name="email" content you want encrypted) id="contact-email" /></li> <li></li> NAME vs. ID </ol> </fieldset> </form> NAME is for the back end ID is for the front end 2007 A A RO N G U S TA F S O N 8/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US TEXTAREA <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> a multiline text form control <ol> <li>Name <input type="text" name="name" id="contact-name" /></li> <li>Email requires ROWS and COLS <input type="text" name="email" id="contact-email" /></li> <li>Message attributes!!! <textarea name="message" id="contact-message" rows="4" cols="30"></textarea></li> </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 9/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Working with LABEL <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> this element provides to <ol> <li><label>Name means of associating its <input ... /></label></li> content with a form control: ... </ol> </fieldset> </form> implicit association LABEL wraps the form control and the text <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> explicit association for="contact-name">Name</label> <li><label LABEL's FOR attribute is an <input id="contact-name" ... /></li> ... ID reference to the form </ol> </fieldset> control </form> 2007 A A RO N G U S TA F S O N 10/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Buttons <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> trigger events in a form; use <ol> ... either INPUT or BUTTON </ol> <input type="submit" value="Go" /> element </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> reset – resets all form <ol> ... </ol> control values back to their <button type="submit">Go</button> defaults when the page </fieldset> </form> loaded 2007 A A RO N G U S TA F S O N 11/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 12/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US body { font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { <form id="contact-form" action="#" method="post"> font-size: 1.2em; <fieldset> line-height: 1.5; <legend>Send us a message</legend> <ol> } <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 13/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form, fieldset, legend { border: 0; padding: 0; margin: 0; } legend { font-size: 2em; <form id="contact-form" action="#" method="post"> } <fieldset> form ol, form ul { <legend>Send us a message</legend> <ol> list-style: none; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> margin: 0; <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> padding: 0; <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" } cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 14/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form li { margin: 0 0 .75em; } label { display: block; } input, textarea { <form id="contact-form" action="#" method="post"> width: 250px; <fieldset> } <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 15/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; float: left; <form id="contact-form" action="#" method="post"> <fieldset> line-height: 1.6; <legend>Send us a message</legend> <ol> margin-right: 10px; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> text-align: right; <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> width: 120px; <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" } cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 16/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } button { margin-left: 130px; cursor: pointer; <form id="contact-form" action="#" method="post"> <fieldset> } <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 17/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US label:after { content: ':'; } input, textarea { background: #ddd; width: 250px; } input:focus, <form id="contact-form" action="#" method="post"> <fieldset> textarea:focus { <legend>Send us a message</legend> <ol> background: #fff; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> } <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> /* Some styles to get <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" the baselines to cols="30"></textarea></li> </ol> match & to unify the <button type="submit">Go</button> </fieldset> type used */ </form> 2007 A A RO N G U S TA F S O N 18/ 75 E A S Y ! D E S I G N S , LLC cc

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

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US SELECTion Lists <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> allows selection of one or <ol> ... more OPTIONs <li><label for="contact-subject">Subject</label> <select id="contact-subject" On OPTION elements, the name="subject"> VALUE attribute is optional <option value="Error">I noticed a (contents are submitted by website error</option> <option value="Question">I have a default) question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 22/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIDEBAR: OPTGROUPS <select id="favorite-fruit" name="favorite-fruit"> <optgroup label="Apples"> <option value="Golden Delicious Apples">Golden Delicious</option> <option value="Granny Smith Apples">Granny Smith</option> <option value="Macintosh Apples">Macintosh</option> <option value="Red Delicious Apples">Red Delicious</option> </optgroup> <optgroup label="Berries"> <option>Blackberries</option> <option>Blueberries</option> <option>Raspberries</option> <option>Strawberries</option> </optgroup> </select> 2007 A A RO N G U S TA F S O N 23/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for="contact-subject">Subject</label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> <option value="Question">I have a question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 24/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US select { background: #ddd; width: 260px; /* width is *usually* the input width + input padding + 4px */ <form id="contact-form" action="#" method="post"> } <fieldset> input:focus, <legend>Send us a message</legend> <ol> textarea:focus, ... <li><label for="contact-subject">Subject</label> select:focus { <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> background: #fff; <option value="Question">I have a question</option> <option>Other</option> } </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 25/ 75 E A S Y ! D E S I G N S , LLC cc

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class="radio"> <legend>I would prefer to be or checkbox groups contacted by</legend> <ul> The LEGEND is the question <li><label><input type="radio" or statement name="method" value="email" /> email</label></li> <li><label><input type="radio" Lists organize the possible name="method" value="phone" /> responses (OL or UL) phone</label></li> </ul> implicit LABELs provide an </fieldset> </li> easy way to style in IE6 ... 2007 A A RO N G U S TA F S O N 28/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 29/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; } .radio label { <form id="contact-form" action="#" method="post"> display: inline; ... width: auto; <li> <fieldset class="radio"> margin: 0; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 30/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio { margin-left: 125px; } .radio ul { font-size: 1em; margin: .3em 0 0; } <form id="contact-form" action="#" method="post"> .radio label:after { ... content: ''; <li> <fieldset class="radio"> } <legend>I would prefer to be contacted by</legend> <ul> label input { <li><label><input type="radio" name="method" value="email" /> email</label></li> background: <li><label><input type="radio" name="method" value="phone" /> phone</label></li> transparent; </ul> </fieldset> width: auto; </li> ... } </form> 2007 A A RO N G U S TA F S O N 31/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio li { float: left; margin: 0; width: 48%; clear: none; } label input { width: auto; <form id="contact-form" action="#" method="post"> ... position: relative; <li> <fieldset class="radio"> top: 2px; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 32/ 75 E A S Y ! D E S I G N S , LLC cc

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

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Confirmations <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> a little CLASSification goes a <ol> ... long way <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 36/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 37/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .confirm label { display: block; float: none; margin-left: 125px; text-align: left; width: 270px; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 38/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .confirm { margin-bottom: 1.4em; } .radio label:after, .confirm label:after { content: ''; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 39/ 75 E A S Y ! D E S I G N S , LLC cc

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

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX POST vs. GET <form id="search-form" action="/action-page.php" Search forms are traditionally method="get"> GET requests to allow the action page (i.e. the results)  to be bookmarkable. </form> 2007 A A RO N G U S TA F S O N 42/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX You need something <form id="search-form" action="/action-page.php" method="get"> <p> Sometimes a FIELDSET is  unnecessary, but in XHTML, <p> </form> you need something to wrap the contents of a form 2007 A A RO N G U S TA F S O N 43/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX Easy-peasy <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <p> </form> 2007 A A RO N G U S TA F S O N 44/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX It’s a BUTTON <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> big shock, I know <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 45/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX body { background: #54af44; font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { font-size: 1.2em; <form id="search-form" action="/action-page.php" method="get"> <p> line-height: 1.5; <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> } <button type="submit">Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 46/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX label { line-height: 2em; } input { border: 1px solid #c00; background: #ebebeb; margin: 0 .5em; padding: 2px 4px; <form id="search-form" action="/action-page.php" method="get"> <p> } <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> input:focus { <button type="submit">Go</button> <p> background: #fff; </form> } 2007 A A RO N G U S TA F S O N 47/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX button { background: #c00; border: 0; color: #fff; cursor: pointer; font-size: .9em; font-weight: bold; letter-spacing: .1em; <form id="search-form" action="/action-page.php" method="get"> <p> padding: 2px 8px; <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> text-transform: <button type="submit">Go</button> <p> uppercase; </form> } 2007 A A RO N G U S TA F S O N 48/ 75 E A S Y ! D E S I G N S , LLC cc

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class="date">  </fieldset> 2007 A A RO N G U S TA F S O N 50/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class="date"> <legend>Post Date</legend>  </fieldset> 2007 A A RO N G U S TA F S O N 51/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Not just a SELECT <fieldset class="date"> <legend>Post Date</legend> <ol> we need some LABELing <li> <label for="date-day">Date</label> <select id="date-day" name="day"> <option>01</option> ... <option>31</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 52/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT And so on <fieldset class="date"> <legend>Post Date</legend> <ol> <li> <label for="date-day">Date</label> ... </li> <li> <label for="date-month">Month</label> <select id="date-month" name="month"> <option value="01">January</option> ... <option value="12">December</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 53/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT And so forth <fieldset class="date"> <legend>Post Date</legend> <ol> <li> <label for="date-day">Date</label> ... </li> <li> <label for="date-month">Month</label> ... </li> <li> <label for="date-year">Year</label> <select id="date-year" name="year"> <option>2007</option> <option>2008</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 54/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT body { background: #54af44; font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p, legend { font-size: 1.2em; <fieldset class="date"> <legend>Post Date</legend> line-height: 1.5; <ol> <li><label for="date-day">Date</label> } ... </li> legend { <li><label for="date-month">Month</label> ... color: #000; </li> <li><label for="date-year">Year</label> } ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 55/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; } .date ol { list-style: none; margin: 0 0 0 130px; padding: 0; <fieldset class="date"> <legend>Post Date</legend> } <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 56/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date li { float: left; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 57/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date select { background: #e2efe0; margin: 0 .25em 0 0; } .date select:focus { background: #fff; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 58/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date label { position: absolute; left: -999em; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 59/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; position: relative; } .date legend span { display: block; line-height: 1.6; <fieldset class="date"> text-align: right; <legend><span>Post Date</span></legend> <ol> width: 120px; <li><label for="date-day">Date</label> ... position: absolute; </li> <li><label for="date-month">Month</label> top: 0; ... </li> left: 0; <li><label for="date-year">Year</label> ... } </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 60/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date legend span:after { content: ":"; } <fieldset class="date"> <legend><span>Post Date</span></legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 61/ 75 E A S Y ! D E S I G N S , LLC cc

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED What is the * anyway? <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> Well, it stands for something <p>Required fields are marked else and in HTML, the closest to <abbr title="required">*</abbr>.</p> that we have to convey that is <ol> <li> the ABBR element. <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 79/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED If you want to go all- <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> out, you can <p>Required fields are marked <em><abbr title="required">*</abbr></em>. but that seems like overkill </p> <ol> <li class="required"> <label for="contact-name"> Name<em><abbr title="required">* </abbr></em> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 80/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title="required">*</abbr>.</p> <ol> <li> <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 81/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED abbr { cursor: help; font-style: normal; border: 0; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title="required">*</abbr>.</p> <ol> <li> <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 82/ 75 E A S Y ! D E S I G N S , LLC cc

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING How should we ... <li> <label for="contact-email"> emphasize important Email<abbr title="required">*</abbr> </label> formatting info? <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-phone"> Phone<em class="msg"> format: 123-456-7890</em> </label> <input type="text" id="contact-phone" name="phone" /> </li> <li> <label for="contact-subject"> Subject<abbr title="required">*</abbr> </label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> ... 2007 A A RO N G U S TA F S O N 84/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 85/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING label em.msg { font-size: .8em; font-style: normal; line-height: 2.5; } ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 86/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING label{ ... position: relative; } label em.msg { color: #aaa; font-size: .8em; font-style: normal; ... line-height: 2.5; <li> <label for="contact-phone">Phone<em position: absolute; class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> right: -266px; </li> ... top: 0; } 2007 A A RO N G U S TA F S O N 87/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 88/ 75 E A S Y ! D E S I G N S , LLC cc

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

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS How should we ... <li class="error"> strongly emphasize <label for="contact-email"> Email<abbr title="required">*</abbr> <strong class="err"> You forgot to fill even more important in your email</strong> error advisories? </label> <input type="text" id="contact-email" name="email" /> </li> ... How should we highlight the field? 2007 A A RO N G U S TA F S O N 90/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 91/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; padding-left: 5px; text-align: left; } ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 92/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; line-height: 1.8; padding-left: 5px; text-align: left; white-space: nowrap; position: absolute; ... <li class="error"> top: 0; <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot left: 390px; to fill in your email</strong> } </label> <input type="text" id="contact-email" name="email" /> strong.err:before { </li> ... content: "<" } 2007 A A RO N G U S TA F S O N 93/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS .error input { border: 2px solid #b00; background: #ffdfdf; } .error input:focus { background: #fff; } ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 94/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS How do we notify <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> users of errors? <div id="errors"> <p>We encountered <strong>1 error</strong> It is best to be upfront about while trying to process this form:</p> errors encountered and to <ol> say, in plain language, what <li>You forgot to include <a the user needs to do to fix it href="#contact-email">your email address</a></li> </ol> and linking to the field with </div> errors doesn't hurt <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 95/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 96/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors { background: #ffdfdf; border: 2px solid #b00; color: #333; margin: .5em 0 1em; padding: 10px; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 97/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors p { margin: 0; padding: 0; } #errors ol { list-style: disc; margin: 0 0 0 20px; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 98/ 75 E A S Y ! D E S I G N S , LLC cc

LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors a { color: #b00; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 99/ 75 E A S Y ! D E S I G N S , LLC cc

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

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

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

http://www.rosenfeldmedia.com	384
http://www.easy-reader.net	110
http://ued.koubei.com	70
http://www.dev2.hu	57
http://www.slideshare.net	44
http://design.alibaba-inc.com	41
http://www.yayhooray.com	31
http://higher.com.ua	24
http://kion4u.wordpress.com	24
http://feeds.rosenfeldmedia.com	19
http://www.caudalweb.com	17
http://static.slideshare.net	14
http://www.dopamino.com	13
http://ednailor.wordpress.com	12
http://ervdesign.net	11
http://lj-toys.com	7
http://tumblr.iamdanw.com	6
http://10.1.6.162	5
http://easy-reader.net	5
http://news.inter-svet.ru	5
https://s3.amazonaws.com	5
http://www.fogo.cl	4
https://easydesigns.projectpath.com	2
http://dartmouthtuck.com	2
http://www.netvibes.com	2
http://onwebdev.blogspot.com	2
http://www.filescon.com	2
http://localhost:4361	2
http://bink	2
http://thinkusers.wordpress.com	2
http://www.yougo.nl	2
http://66.102.9.104	1
http://admin.howl.or.kr	1
http://www.howl.or.kr	1
http://www.zhuaxia.com	1
http://design.alibaba.com	1
http://10.1.6.161	1
http://www.chaozi.net	1
http://studiopilot.testpilotweb.com	1
file://	1
http://www.72color.com	1
http://www.oplahol.com	1
http://xss.yandex.net	1

Learning To Love Forms (WebVisions '07)

by Aaron Gustafson on May 04, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

43 Embeds 938

Statistics

Learning To Love Forms (WebVisions ’07) — Presentation Transcript