Learning To Love Forms [The Ajax Experience East 2007]

Slide 1: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 cc 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

Slide 2: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 AARON GUSTAFSON EASY! DESIGNS, LLC cc 2007 A A RO N G U S TA F S O N 2/67 E A S Y ! D E S I G N S , LLC

Slide 3: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 FORMS ARE A NECESSARY EVIL cc 2007 A A RO N G U S TA F S O N 3/67 E A S Y ! D E S I G N S , LLC

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

Slide 5: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 cc 2007 A A RO N G U S TA F S O N 5/67 E A S Y ! D E S I G N S , LLC

Slide 6: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 cc 2007 A A RO N G U S TA F S O N 6/67 E A S Y ! D E S I G N S , LLC

Slide 7: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 7/67 E A S Y ! D E S I G N S , LLC

Slide 8: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 hidden) id="contact-email" /></li> <li></li> NAME vs. ID </ol> </fieldset> </form> NAME is for the back end ID is for the front end cc 2007 A A RO N G U S TA F S O N 8/67 E A S Y ! D E S I G N S , LLC

Slide 9: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 9/67 E A S Y ! D E S I G N S , LLC

Slide 10: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 <li><label for="contact-name">Name</label> LABEL's FOR attribute is an ... <input id="contact-name" ... /></li> ID reference to the form </ol> </fieldset> control </form> cc 2007 A A RO N G U S TA F S O N 1 0/ 67 E A S Y ! D E S I G N S , LLC

Slide 11: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 cc 2007 A A RO N G U S TA F S O N 1 1/ 67 E A S Y ! D E S I G N S , LLC

Slide 12: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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) cc 2007 A A RO N G U S TA F S O N 1 2/ 67 E A S Y ! D E S I G N S , LLC

Slide 13: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 1 3/ 67 E A S Y ! D E S I G N S , LLC

Slide 14: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 1 4/ 67 E A S Y ! D E S I G N S , LLC

Slide 15: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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" } </ol> cols="30"></textarea></li> <button type="submit">Go</button> </fieldset> </form> cc 2007 A A RO N G U S TA F S O N 1 5/ 67 E A S Y ! D E S I G N S , LLC

Slide 16: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 1 6/ 67 E A S Y ! D E S I G N S , LLC

Slide 17: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 1 7/ 67 E A S Y ! D E S I G N S , LLC

Slide 18: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 1 8/ 67 E A S Y ! D E S I G N S , LLC

Slide 19: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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 </ol> cols="30"></textarea></li> match & to unify the <button type="submit">Go</button> </fieldset> type used */ </form> cc 2007 A A RO N G U S TA F S O N 1 9/ 67 E A S Y ! D E S I G N S , LLC

Slide 20: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 body { label:after { font: 62.5% "Lucida Sans content: ':'; Unicode", "Lucida Grande", } sans-serif; input, textarea { SIMPLE FORM: } ol, ul, p { background: #ddd; font: 1em Arial, Helvetica, CONTACT US font-size: 1.2em; line-height: 1.5; sans-serif; 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 2007 A A RO N G U S TA F S O N 2 0/ 67 E A S Y ! D E S I G N S , LLC

Slide 21: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US cc 2007 A A RO N G U S TA F S O N 2 1/ 67 E A S Y ! D E S I G N S , LLC

Slide 22: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 2 2/ 67 E A S Y ! D E S I G N S , LLC

Slide 23: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIDEBAR: SELECTS WINDOWS XP Mozilla IE 6/7 IE 7 IE 6 Opera (XP) (classic) (classic) OS X Safari Camino Firefox IE 5 Opera cc 2007 A A RO N G U S TA F S O N 2 3/ 67 E A S Y ! D E S I G N S , LLC

Slide 24: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 2 4/ 67 E A S Y ! D E S I G N S , LLC

Slide 25: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 2 5/ 67 E A S Y ! D E S I G N S , LLC

Slide 26: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 CUSTOM SELECTS FauxSelect code.google.com/p/ easy-designs/wiki/FauxSelect SELECT Something New easy-designs.net/articles/replaceSelect/ SELECT Something New Pt. 2 easy-designs.net/articles/replaceSelect2/ cc 2007 A A RO N G U S TA F S O N 2 6/ 67 E A S Y ! D E S I G N S , LLC

Slide 27: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US cc 2007 A A RO N G U S TA F S O N 2 7/ 67 E A S Y ! D E S I G N S , LLC

Slide 28: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class="radio"> or checkbox groups <legend>I would prefer to be 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 ... cc 2007 A A RO N G U S TA F S O N 2 8/ 67 E A S Y ! D E S I G N S , LLC

Slide 29: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 2 9/ 67 E A S Y ! D E S I G N S , LLC

Slide 30: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 3 0/ 67 E A S Y ! D E S I G N S , LLC

Slide 31: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 3 1/ 67 E A S Y ! D E S I G N S , LLC

Slide 32: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 3 2/ 67 E A S Y ! D E S I G N S , LLC

Slide 33: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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"> This is an exceedingly long <legend> <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> ... cc 2007 A A RO N G U S TA F S O N 3 3/ 67 E A S Y ! D E S I G N S , LLC

Slide 34: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class="radio"> <span> <legend> 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> ... cc 2007 A A RO N G U S TA F S O N 3 4/ 67 E A S Y ! D E S I G N S , LLC

Slide 35: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT cc 2007 A A RO N G U S TA F S O N 3 5/ 67 E A S Y ! D E S I G N S , LLC

Slide 36: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class="date">  </fieldset> cc 2007 A A RO N G U S TA F S O N 3 6/ 67 E A S Y ! D E S I G N S , LLC

Slide 37: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class="date"> <legend>Post Date</legend>  </fieldset> cc 2007 A A RO N G U S TA F S O N 3 7/ 67 E A S Y ! D E S I G N S , LLC

Slide 38: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 3 8/ 67 E A S Y ! D E S I G N S , LLC

Slide 39: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 3 9/ 67 E A S Y ! D E S I G N S , LLC

Slide 40: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 0/ 67 E A S Y ! D E S I G N S , LLC

Slide 41: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 1/ 67 E A S Y ! D E S I G N S , LLC

Slide 42: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 2/ 67 E A S Y ! D E S I G N S , LLC

Slide 43: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 3/ 67 E A S Y ! D E S I G N S , LLC

Slide 44: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 4/ 67 E A S Y ! D E S I G N S , LLC

Slide 45: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 5/ 67 E A S Y ! D E S I G N S , LLC

Slide 46: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> </span> Post Date </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> cc 2007 A A RO N G U S TA F S O N 4 6/ 67 E A S Y ! D E S I G N S , LLC

Slide 47: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> cc 2007 A A RO N G U S TA F S O N 4 7/ 67 E A S Y ! D E S I G N S , LLC

Slide 48: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MAKING THE MOST OF MESSAGES cc 2007 A A RO N G U S TA F S O N 4 8/ 67 E A S Y ! D E S I G N S , LLC

Slide 49: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED cc 2007 A A RO N G U S TA F S O N 4 9/ 67 E A S Y ! D E S I G N S , LLC

Slide 50: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> ... cc 2007 A A RO N G U S TA F S O N 5 0/ 67 E A S Y ! D E S I G N S , LLC

Slide 51: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> ... cc 2007 A A RO N G U S TA F S O N 5 1/ 67 E A S Y ! D E S I G N S , LLC

Slide 52: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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> ... cc 2007 A A RO N G U S TA F S O N 5 2/ 67 E A S Y ! D E S I G N S , LLC

Slide 53: LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED abbr { cursor: help; fon

Slideshare.net (beta)