Learning To Love Forms [The Ajax Experience East 2007]

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

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

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US FORM Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; establishes a form method=quot;postquot;> ACTION is the only required  attribute and should always </form> be a URI METHOD defaults to “get” NAME is depreciated; use ID instead cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> used to group related fields <legend>Send us a message</legend>  LEGEND Element </fieldset> </form> used to provide a caption for a FIELDSET cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US Containing FORM <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> Controls <p></p> <p></p> <p></p> P or DIV </fieldset> </form> sensible choices, but not very accurate (except in certain instances) <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US INPUT Text Control <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> type=quot;namequot; is a basic text <ol> <li>Name input field <input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li> (also type=quot;passwordquot; for <li>Email <input type=quot;textquot; name=quot;emailquot; content you want hidden) id=quot;contact-emailquot; /></li> <li></li> NAME vs. ID </ol> </fieldset> </form> NAME is for the back end ID is for the front end cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US TEXTAREA <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> a multiline text form control <ol> <li>Name <input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li> <li>Email requires ROWS and COLS <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li> <li>Message attributes!!! <textarea name=quot;messagequot; id=quot;contact-messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> </fieldset> </form> cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US Working with LABEL <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <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=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> explicit association <li><label for=quot;contact-namequot;>Name</label> LABEL's FOR attribute is an ... <input id=quot;contact-namequot; ... /></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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US Buttons <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> trigger events in a form; use <ol> ... either INPUT or BUTTON </ol> <input type=quot;submitquot; value=quot;Goquot; /> element </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> reset – resets all form <ol> ... </ol> control values back to their <button type=quot;submitquot;>Go</button> defaults when the page </fieldset> </form> loaded cc 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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US body { font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p { <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> font-size: 1.2em; <fieldset> line-height: 1.5; <legend>Send us a message</legend> <ol> } <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> } <fieldset> form ol, form ul { <legend>Send us a message</legend> <ol> list-style: none; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> margin: 0; <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> padding: 0; <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; } </ol> cols=quot;30quot;></textarea></li> <button type=quot;submitquot;>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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> width: 250px; <fieldset> } <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> line-height: 1.6; <legend>Send us a message</legend> <ol> margin-right: 10px; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> text-align: right; <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> width: 120px; <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; } cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> } <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> textarea:focus { <legend>Send us a message</legend> <ol> background: #fff; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> } <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> /* Some styles to get <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; the baselines to </ol> cols=quot;30quot;></textarea></li> match & to unify the <button type=quot;submitquot;>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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 body { label:after { font: 62.5% quot;Lucida Sans content: ':'; Unicodequot;, quot;Lucida Grandequot;, } 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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US SELECTion Lists <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> allows selection of one or <ol> ... more OPTIONs <li><label for=quot;contact-subjectquot;>Subject</label> <select id=quot;contact-subjectquot; On OPTION elements, the name=quot;subjectquot;> VALUE attribute is optional <option value=quot;Errorquot;>I noticed a (contents are submitted by website error</option> <option value=quot;Questionquot;>I have a default) question</option> <option>Other</option> </select></li> ... </ol> <button type=quot;submitquot;>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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for=quot;contact-subjectquot;>Subject</label> <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> <option value=quot;Questionquot;>I have a question</option> <option>Other</option> </select></li> ... </ol> <button type=quot;submitquot;>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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> } <fieldset> input:focus, <legend>Send us a message</legend> <ol> textarea:focus, ... <li><label for=quot;contact-subjectquot;>Subject</label> select:focus { <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> background: #fff; <option value=quot;Questionquot;>I have a question</option> <option>Other</option> } </select></li> ... </ol> <button type=quot;submitquot;>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

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class=quot;radioquot;> or checkbox groups <legend>I would prefer to be contacted by</legend> <ul> The LEGEND is the question <li><label><input type=quot;radioquot; or statement name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; Lists organize the possible name=quot;methodquot; value=quot;phonequot; /> responses (OL or UL) phone</label></li> </ul> implicit LABELs provide an </fieldset> </li> easy way to style in IE6 ... cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> ... <li> <fieldset class=quot;radioquot;> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> </li> ... </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> display: inline; ... width: auto; <li> <fieldset class=quot;radioquot;> margin: 0; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> .radio label:after { ... content: ''; <li> <fieldset class=quot;radioquot;> } <legend>I would prefer to be contacted by</legend> <ul> label input { <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> background: <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> transparent; </ul> </fieldset> width: auto; </li> ... } </form> cc 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

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=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> ... position: relative; <li> <fieldset class=quot;radioquot;> top: 2px; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> 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

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=quot;radioquot;> 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=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> ... 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class=quot;radioquot;> <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=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> ... 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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class=quot;datequot;>  </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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class=quot;datequot;> <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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Not just a SELECT <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> we need some LABELing <li> <label for=quot;date-dayquot;>Date</label> <select id=quot;date-dayquot; name=quot;dayquot;> <option>01</option> ... <option>31</option> </select> </li> </ol> </fieldset> cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT And so on <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li> <label for=quot;date-dayquot;>Date</label> ... </li> <li> <label for=quot;date-monthquot;>Month</label> <select id=quot;date-monthquot; name=quot;monthquot;> <option value=quot;01quot;>January</option> ... <option value=quot;12quot;>December</option> </select> </li> </ol> </fieldset> cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT And so forth <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li> <label for=quot;date-dayquot;>Date</label> ... </li> <li> <label for=quot;date-monthquot;>Month</label> ... </li> <li> <label for=quot;date-yearquot;>Year</label> <select id=quot;date-yearquot; name=quot;yearquot;> <option>2007</option> <option>2008</option> </select> </li> </ol> </fieldset> cc 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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT body { background: #54af44; font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p, legend { font-size: 1.2em; <fieldset class=quot;datequot;> <legend>Post Date</legend> line-height: 1.5; <ol> <li><label for=quot;date-dayquot;>Date</label> } ... </li> legend { <li><label for=quot;date-monthquot;>Month</label> ... color: #000; </li> <li><label for=quot;date-yearquot;>Year</label> } ... </li> </ol> </fieldset> cc 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

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=quot;datequot;> <legend>Post Date</legend> } <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT .date li { float: left; } <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>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

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=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT .date label { position: absolute; left: -999em; } <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>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

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=quot;datequot;> text-align: right; <legend><span> </span> Post Date </legend> <ol> width: 120px; <li><label for=quot;date-dayquot;>Date</label> ... position: absolute; </li> <li><label for=quot;date-monthquot;>Month</label> top: 0; ... </li> left: 0; <li><label for=quot;date-yearquot;>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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT .date legend span:after { content: quot;:quot;; } <fieldset class=quot;datequot;> <legend><span>Post Date</span></legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>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

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED What is the * anyway? <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <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=quot;requiredquot;>*</abbr>.</p> that we have to convey that is <ol> <li> the ABBR element. <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED If you want to go all- <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> out, you can <p>Required fields are marked <em><abbr title=quot;requiredquot;>*</abbr></em>. but that seems like overkill </p> <ol> <li class=quot;requiredquot;> <label for=quot;contact-namequot;> Name<em><abbr title=quot;requiredquot;>* </abbr></em> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> <ol> <li> <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: REQUIRED abbr { cursor: help; font-style: normal; border: 0; } <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> <ol> <li> <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> ... cc 2007 A A RO N G U S TA F S O N 5 3/ 67 E A S Y ! D E S I G N S , LLC

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS How should we ... <li class=quot;errorquot;> strongly emphasize <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr> <strong class=quot;errquot;> You forgot to fill even more important in your email</strong> error advisories? </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... How should we highlight the field? cc 2007 A A RO N G U S TA F S O N 5 5/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... cc 2007 A A RO N G U S TA F S O N 5 6/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; padding-left: 5px; text-align: left; } ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... cc 2007 A A RO N G U S TA F S O N 5 7/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 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=quot;errorquot;> top: 0; <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot left: 390px; to fill in your email</strong> } </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> strong.err:before { </li> ... content: quot;<quot; } cc 2007 A A RO N G U S TA F S O N 5 8/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS .error input { border: 2px solid #b00; background: #ffdfdf; } .error input:focus { background: #fff; } ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... cc 2007 A A RO N G U S TA F S O N 5 9/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS How do we notify <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> users of errors? <div id=quot;errorsquot;> <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=quot;#contact-emailquot;>your email address</a></li> </ol> and linking to the field with </div> errors doesn't hurt <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> ... cc 2007 A A RO N G U S TA F S O N 6 0/ 67 E A S Y ! D E S I G N S , LLC

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <div id=quot;errorsquot;> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href=quot;#contact-emailquot;>your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> ... cc 2007 A A RO N G U S TA F S O N 6 1/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 MESSAGING: ERRORS #errors a { color: #b00; } <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <div id=quot;errorsquot;> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href=quot;#contact-emailquot;>your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> ... cc 2007 A A RO N G U S TA F S O N 6 4/ 67 E A S Y ! D E S I G N S , LLC

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

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

LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 http://slideshare.net/AaronGustafson 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

Learning To Love Forms [The Ajax Experience East 2007]

by Aaron Gustafson

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 12

Statistics

Learning To Love Forms [The Ajax Experience East 2007] Presentation Transcript

http://samples.dev.talentlms.com	6
http://www.slideshare.net	5
http://local.easydesignsllc.com	1