Learning To Love Forms (Web Directions South '07)

Slide 1: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 2: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 3: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 FORMS ARE A NECESSARY EVIL 3/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 4: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US 4/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 5: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US FORM Element <form id=\"contact-form\" action=\"/action-page.php\" establishes a form method=\"post\"> <!-- the rest of our form will go here --> ACTION is the only required </form> attribute and should always be a URI METHOD defaults to “get” NAME is depreciated; use ID instead 5/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 6: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id=\"contact-form\" action=\"/action-page.php\" method=\"post\"> <fieldset> <legend>Send us a message</legend> used to group related fields <!-- the rest of our form will go here --> </fieldset> LEGEND Element </form> used to provide a caption for a FIELDSET 6/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 7: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> </fieldset> </form> P or DIV sensible choices, but not very accurate (except in certain <form id=\"contact-form\" action=\"/action-page.php\" method=\"post\"> <fieldset> instances) <legend>Send us a message</legend> <ol> <li><!-- form control --></li> <li><!-- form control --></li> OL or UL <li><!-- form control --></li> </ol> most forms are lists of </fieldset> </form> questions or form controls, 7/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 8: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> <li>Email (also type=\"password\" for <input type=\"text\" name=\"email\" id=\"contact-email\" /></li> content you want hidden) <li><!-- form control --></li> </ol> </fieldset> </form> NAME vs. ID NAME is for the back end ID is for the front end 8/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 9: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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 <input type=\"text\" name=\"email\" id=\"contact-email\" /></li> requires ROWS and COLS <li>Message <textarea name=\"message\" attributes!!! id=\"contact-message\" rows=\"4\" cols=\"30\"></textarea></li> </ol> </fieldset> </form> 9/102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 10: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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 <form id=\"contact-form\" action=\"/action-page.php\" method=\"post\"> LABEL wraps the form control <fieldset> <legend>Send us a message</legend> and the text <ol> for=\"contact-name\">Name</label> <li><label <input id=\"contact-name\" ... /></li> ... explicit association </ol> </fieldset> </form> LABEL's FOR attribute is an ID referenceGU S TAF SON to the form control 10/ 102 2007 AARON EAS Y! DES I GNS, LLC cc

Slide 11: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> ... </ol> either INPUT or BUTTON <input type=\"submit\" value=\"Go\" /> </fieldset> element </form> Common TYPEs submit – submits the form; <form id=\"contact-form\" action=\"#\" method=\"post\"> <fieldset> <legend>Send us a message</legend> default button type <ol> ... </ol> <button type=\"submit\">Go</button> reset – resets all form </fieldset> </form> control values back to their defaults when SON page 2007 AARON GU S TAF the 11/ 102 EAS Y! DES I GNS, LLC cc

Slide 12: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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) 12/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 13: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 13/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 14: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 14/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 15: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 15/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 16: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 16/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 17: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; <form id=\"contact-form\" action=\"#\" method=\"post\"> float: left; <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> 17/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 18: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } button { margin-left: 130px; <form id=\"contact-form\" action=\"#\" method=\"post\"> cursor: pointer; <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> 18/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 19: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US label:after { content: ':'; } input, textarea { background: #ddd; width: 250px; } <form id=\"contact-form\" action=\"#\" method=\"post\"> input:focus, <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> match & to unify the </ol> <button type=\"submit\">Go</button> type used */ </fieldset> </form> 19/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 20: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 body { label:after { font: 62.5% \"Lucida Sans content: ':'; Unicode\", \"Lucida Grande\", } SIMPLE FORM: sans-serif; input, textarea { } 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; } 20/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 21: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US 21/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 22: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> ... <li><label more OPTIONs for=\"contact-subject\">Subject</label> <select id=\"contact-subject\" name=\"subject\"> On OPTION elements, the <option value=\"Error\">I noticed a website error</option> VALUE attribute is optional <option value=\"Question\">I have a (contents are submitted by question</option> <option>Other</option> default) </select></li> ... </ol> <button type=\"submit\">Go</button> </fieldset> </form> 22/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 23: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 23/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 24: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 24/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 25: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 25/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 26: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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 26/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 27: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US 27/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 28: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> <fieldset class=\"radio\"> a great way to organize radio <legend>I would prefer to be or checkbox groups contacted by</legend> <ul> <li><label><input type=\"radio\" The LEGEND is the question name=\"method\" value=\"email\" /> email</label></li> or statement <li><label><input type=\"radio\" name=\"method\" value=\"phone\" /> phone</label></li> Lists organize the possible </ul> responses (OL or UL) </fieldset> </li> ... implicit LABELs provide an easyAARON GU S TAF SON in IE6 2007 way to style 28/ 102 EAS Y! DES I GNS, LLC cc

Slide 29: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 29/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 30: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 30/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 31: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> width: auto; </fieldset> </li> } ... </form> 31/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 32: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US .radio li { float: left; margin: 0; width: 48%; clear: none; } label input { <form id=\"contact-form\" action=\"#\" method=\"post\"> width: auto; ... 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> 32/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 33: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> ... 33/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 34: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> ... 34/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 35: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: CONTACT US 35/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 36: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> ... <li class=\"confirm\"> long way <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> 36/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 37: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 37/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 38: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 38/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 39: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 39/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 40: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 MORE FORMS OF FORMS 40/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 41: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: SEARCH BOX 41/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 42: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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 <!-- the rest of our form will go here --> action page (i.e. the results) </form> to be bookmarkable. 42/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 43: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 2007 SIMPLE FORM: SEARCH BOX You need something <form id=\"search-form\" action=\"/action-page.php\" method=\"get\"> <p> <!-- the rest of our form will go here --> Sometimes a FIELDSET is <p> unnecessary, but in XHTML, </form> you need something to wrap the contents of a form 43/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 44: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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> 44/ 102 2007 AARON GU S TAF SON EAS Y! DES I GNS, LLC cc

Slide 45: LEARNING TO LOVE FORMS WEB DIRECTIONS SOUTH 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\&q