Learning To Love Forms (An Event Apart San Francisco '07)

3,904 views

Published on

Making peace with making forms.

Published in: Technology, Education

Learning To Love Forms (An Event Apart San Francisco '07)

  1. 1. LEARNING TO LOVE FORMS AN EVENT APART 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
  2. 2. LEARNING TO LOVE FORMS AN EVENT APART 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 2/88 E A S Y ! D E S I G N S , LLC cc
  3. 3. LEARNING TO LOVE FORMS AN EVENT APART 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 3/88 E A S Y ! D E S I G N S , LLC cc
  4. 4. LEARNING TO LOVE FORMS AN EVENT APART 2007 FORMS ARE A NECESSARY EVIL 2007 A A RO N G U S TA F S O N 4/88 E A S Y ! D E S I G N S , LLC cc
  5. 5. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 5/88 E A S Y ! D E S I G N S , LLC cc
  6. 6. LEARNING TO LOVE FORMS AN EVENT APART 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 <!-- the rest of our form will go here --> 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 6/88 E A S Y ! D E S I G N S , LLC cc
  7. 7. LEARNING TO LOVE FORMS AN EVENT APART 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> <!-- the rest of our form will go here --> 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 7/88 E A S Y ! D E S I G N S , LLC cc
  8. 8. LEARNING TO LOVE FORMS AN EVENT APART 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><!-- form control --></p> <p><!-- form control --></p> <p><!-- form control --></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><!-- form control --></li> <li><!-- form control --></li> questions or form controls, <li><!-- form control --></li> so these are better </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 8/88 E A S Y ! D E S I G N S , LLC cc
  9. 9. LEARNING TO LOVE FORMS AN EVENT APART 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;textquot; 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><!-- form control --></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 9/88 E A S Y ! D E S I G N S , LLC cc
  10. 10. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 0/ 88 E A S Y ! D E S I G N S , LLC cc
  11. 11. LEARNING TO LOVE FORMS AN EVENT APART 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 for=quot;contact-namequot;>Name</label> <li><label LABEL's FOR attribute is an <input id=quot;contact-namequot; ... /></li> ... ID reference to the form </ol> </fieldset> control </form> 2007 A A RO N G U S TA F S O N 1 1/ 88 E A S Y ! D E S I G N S , LLC cc
  12. 12. LEARNING TO LOVE FORMS AN EVENT APART 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 2007 A A RO N G U S TA F S O N 1 2/ 88 E A S Y ! D E S I G N S , LLC cc
  13. 13. LEARNING TO LOVE FORMS AN EVENT APART 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 1 3/ 88 E A S Y ! D E S I G N S , LLC cc
  14. 14. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 4/ 88 E A S Y ! D E S I G N S , LLC cc
  15. 15. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 5/ 88 E A S Y ! D E S I G N S , LLC cc
  16. 16. LEARNING TO LOVE FORMS AN EVENT APART 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; } cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 6/ 88 E A S Y ! D E S I G N S , LLC cc
  17. 17. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 7/ 88 E A S Y ! D E S I G N S , LLC cc
  18. 18. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 8/ 88 E A S Y ! D E S I G N S , LLC cc
  19. 19. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 1 9/ 88 E A S Y ! D E S I G N S , LLC cc
  20. 20. LEARNING TO LOVE FORMS AN EVENT APART 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 cols=quot;30quot;></textarea></li> </ol> match & to unify the <button type=quot;submitquot;>Go</button> </fieldset> type used */ </form> 2007 A A RO N G U S TA F S O N 2 0/ 88 E A S Y ! D E S I G N S , LLC cc
  21. 21. LEARNING TO LOVE FORMS AN EVENT APART 2007 body { label:after { font: 62.5% quot;Lucida Sans content: ':'; Unicodequot;, quot;Lucida Grandequot;, } sans-serif; input, textarea { SIMPLE FORM: } background: #ddd; ol, ul, p { font: 1em Arial, Helvetica, CONTACT US font-size: 1.2em; sans-serif; line-height: 1.5; padding: 1px 3px; } width: 250px; form, fieldset, legend { } border: 0; textarea { margin: 0; line-height: 1.3em; padding: 0; padding: 0 3px; } } legend { input:focus, textarea:focus { font-size: 2em; background: #fff; line-height: 1.8; } padding-bottom: .5em; button { } background: #ffd100; form ol, form ul { border: 2px outset #333; list-style: none; color: #333; margin: 0; cursor: pointer; padding: 0; font-size: .9em; } font-weight: bold; form li { letter-spacing: .3em; clear: both; margin-left: 130px; margin: 0 0 .75em; padding: .2em .5em; padding: 0; text-transform: uppercase; } } label { display: block; float: left; line-height: 1.6; margin-right: 10px; text-align: right; width: 120px; } 2007 A A RO N G U S TA F S O N 2 1/ 88 E A S Y ! D E S I G N S , LLC cc
  22. 22. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 2 2/ 88 E A S Y ! D E S I G N S , LLC cc
  23. 23. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 2 3/ 88 E A S Y ! D E S I G N S , LLC cc
  24. 24. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIDEBAR: OPTGROUPS <select id=quot;favorite-fruitquot; name=quot;favorite-fruitquot;> <optgroup label=quot;Applesquot;> <option value=quot;Golden Delicious Applesquot;>Golden Delicious</option> <option value=quot;Granny Smith Applesquot;>Granny Smith</option> <option value=quot;Macintosh Applesquot;>Macintosh</option> <option value=quot;Red Delicious Applesquot;>Red Delicious</option> </optgroup> <optgroup label=quot;Berriesquot;> <option>Blackberries</option> <option>Blueberries</option> <option>Raspberries</option> <option>Strawberries</option> </optgroup> </select> 2007 A A RO N G U S TA F S O N 2 4/ 88 E A S Y ! D E S I G N S , LLC cc
  25. 25. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 2 5/ 88 E A S Y ! D E S I G N S , LLC cc
  26. 26. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 2 6/ 88 E A S Y ! D E S I G N S , LLC cc
  27. 27. LEARNING TO LOVE FORMS AN EVENT APART 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 2 7/ 88 E A S Y ! D E S I G N S , LLC cc
  28. 28. LEARNING TO LOVE FORMS AN EVENT APART 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/ 2007 A A RO N G U S TA F S O N 2 8/ 88 E A S Y ! D E S I G N S , LLC cc
  29. 29. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 2 9/ 88 E A S Y ! D E S I G N S , LLC cc
  30. 30. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class=quot;radioquot;> <legend>I would prefer to be or checkbox groups contacted by</legend> <ul> The LEGEND is the question <li><label><input type=quot;radioquot; or statement name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; Lists organize the possible name=quot;methodquot; value=quot;phonequot; /> responses (OL or UL) phone</label></li> </ul> implicit LABELs provide an </fieldset> </li> easy way to style in IE6 ... 2007 A A RO N G U S TA F S O N 3 0/ 88 E A S Y ! D E S I G N S , LLC cc
  31. 31. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 3 1/ 88 E A S Y ! D E S I G N S , LLC cc
  32. 32. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 3 2/ 88 E A S Y ! D E S I G N S , LLC cc
  33. 33. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 3 3/ 88 E A S Y ! D E S I G N S , LLC cc
  34. 34. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 3 4/ 88 E A S Y ! D E S I G N S , LLC cc
  35. 35. LEARNING TO LOVE FORMS AN EVENT APART 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;> 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=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> ... 2007 A A RO N G U S TA F S O N 3 5/ 88 E A S Y ! D E S I G N S , LLC cc
  36. 36. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class=quot;radioquot;> <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=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> ... 2007 A A RO N G U S TA F S O N 3 6/ 88 E A S Y ! D E S I G N S , LLC cc
  37. 37. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 3 7/ 88 E A S Y ! D E S I G N S , LLC cc
  38. 38. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Confirmations <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> a little CLASSification goes a <ol> ... long way <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 3 8/ 88 E A S Y ! D E S I G N S , LLC cc
  39. 39. LEARNING TO LOVE FORMS AN EVENT APART 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 class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 3 9/ 88 E A S Y ! D E S I G N S , LLC cc
  40. 40. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .confirm label { display: block; float: none; margin-left: 125px; text-align: left; width: 270px; } <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 4 0/ 88 E A S Y ! D E S I G N S , LLC cc
  41. 41. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .confirm { margin-bottom: 1.4em; } .radio label:after, .confirm label:after { content: ''; } <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 4 1/ 88 E A S Y ! D E S I G N S , LLC cc
  42. 42. LEARNING TO LOVE FORMS AN EVENT APART 2007 MORE FORMS OF FORMS 2007 A A RO N G U S TA F S O N 4 2/ 88 E A S Y ! D E S I G N S , LLC cc
  43. 43. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX 2007 A A RO N G U S TA F S O N 4 3/ 88 E A S Y ! D E S I G N S , LLC cc
  44. 44. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX POST vs. GET <form id=quot;search-formquot; action=quot;/action-page.phpquot; Search forms are traditionally method=quot;getquot;> GET requests to allow the action page (i.e. the results) <!-- the rest of our form will go here --> to be bookmarkable. </form> 2007 A A RO N G U S TA F S O N 4 4/ 88 E A S Y ! D E S I G N S , LLC cc
  45. 45. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX You need something <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> Sometimes a FIELDSET is <!-- the rest of our form will go here --> 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 4 5/ 88 E A S Y ! D E S I G N S , LLC cc
  46. 46. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX Easy-peasy <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> <p> </form> 2007 A A RO N G U S TA F S O N 4 6/ 88 E A S Y ! D E S I G N S , LLC cc
  47. 47. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX It’s a BUTTON <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> <label for=quot;search-queryquot;>Search this site for</label> big shock, I know <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> <button type=quot;submitquot;>Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 4 7/ 88 E A S Y ! D E S I G N S , LLC cc
  48. 48. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX body { background: #54af44; font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p { font-size: 1.2em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> line-height: 1.5; <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> } <button type=quot;submitquot;>Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 4 8/ 88 E A S Y ! D E S I G N S , LLC cc
  49. 49. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX label { line-height: 2em; } input { border: 1px solid #c00; background: #ebebeb; margin: 0 .5em; padding: 2px 4px; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> } <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> input:focus { <button type=quot;submitquot;>Go</button> <p> background: #fff; </form> } 2007 A A RO N G U S TA F S O N 4 9/ 88 E A S Y ! D E S I G N S , LLC cc
  50. 50. LEARNING TO LOVE FORMS AN EVENT APART 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=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> padding: 2px 8px; <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> text-transform: <button type=quot;submitquot;>Go</button> <p> uppercase; </form> } 2007 A A RO N G U S TA F S O N 5 0/ 88 E A S Y ! D E S I G N S , LLC cc
  51. 51. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT 2007 A A RO N G U S TA F S O N 5 1/ 88 E A S Y ! D E S I G N S , LLC cc
  52. 52. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class=quot;datequot;> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 5 2/ 88 E A S Y ! D E S I G N S , LLC cc
  53. 53. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class=quot;datequot;> <legend>Post Date</legend> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 5 3/ 88 E A S Y ! D E S I G N S , LLC cc
  54. 54. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 4/ 88 E A S Y ! D E S I G N S , LLC cc
  55. 55. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 5/ 88 E A S Y ! D E S I G N S , LLC cc
  56. 56. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 6/ 88 E A S Y ! D E S I G N S , LLC cc
  57. 57. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 7/ 88 E A S Y ! D E S I G N S , LLC cc
  58. 58. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 8/ 88 E A S Y ! D E S I G N S , LLC cc
  59. 59. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 5 9/ 88 E A S Y ! D E S I G N S , LLC cc
  60. 60. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 6 0/ 88 E A S Y ! D E S I G N S , LLC cc
  61. 61. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 6 1/ 88 E A S Y ! D E S I G N S , LLC cc
  62. 62. LEARNING TO LOVE FORMS AN EVENT APART 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>Post Date</span></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> 2007 A A RO N G U S TA F S O N 6 2/ 88 E A S Y ! D E S I G N S , LLC cc
  63. 63. LEARNING TO LOVE FORMS AN EVENT APART 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> 2007 A A RO N G U S TA F S O N 6 3/ 88 E A S Y ! D E S I G N S , LLC cc
  64. 64. LEARNING TO LOVE FORMS AN EVENT APART 2007 MAKING THE MOST OF MESSAGES 2007 A A RO N G U S TA F S O N 6 4/ 88 E A S Y ! D E S I G N S , LLC cc
  65. 65. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED 2007 A A RO N G U S TA F S O N 6 5/ 88 E A S Y ! D E S I G N S , LLC cc
  66. 66. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 6 6/ 88 E A S Y ! D E S I G N S , LLC cc
  67. 67. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 6 7/ 88 E A S Y ! D E S I G N S , LLC cc
  68. 68. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 6 8/ 88 E A S Y ! D E S I G N S , LLC cc
  69. 69. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 6 9/ 88 E A S Y ! D E S I G N S , LLC cc
  70. 70. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING 2007 A A RO N G U S TA F S O N 7 0/ 88 E A S Y ! D E S I G N S , LLC cc
  71. 71. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING How should we ... <li> <label for=quot;contact-emailquot;> emphasize important Email<abbr title=quot;requiredquot;>*</abbr> </label> formatting info? <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-phonequot;> Phone<em class=quot;msgquot;> format: 123-456-7890</em> </label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> <li> <label for=quot;contact-subjectquot;> Subject<abbr title=quot;requiredquot;>*</abbr> </label> <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> ... 2007 A A RO N G U S TA F S O N 7 1/ 88 E A S Y ! D E S I G N S , LLC cc
  72. 72. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 2/ 88 E A S Y ! D E S I G N S , LLC cc
  73. 73. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING label em.msg { font-size: .8em; font-style: normal; line-height: 2.5; } ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 3/ 88 E A S Y ! D E S I G N S , LLC cc
  74. 74. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING label{ ... position: relative; } label em.msg { color: #aaa; font-size: .8em; font-style: normal; ... line-height: 2.5; <li> <label for=quot;contact-phonequot;>Phone<em position: absolute; class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> right: -266px; </li> ... top: 0; } 2007 A A RO N G U S TA F S O N 7 4/ 88 E A S Y ! D E S I G N S , LLC cc
  75. 75. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 5/ 88 E A S Y ! D E S I G N S , LLC cc
  76. 76. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS 2007 A A RO N G U S TA F S O N 7 6/ 88 E A S Y ! D E S I G N S , LLC cc
  77. 77. LEARNING TO LOVE FORMS AN EVENT APART 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? 2007 A A RO N G U S TA F S O N 7 7/ 88 E A S Y ! D E S I G N S , LLC cc
  78. 78. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 7 8/ 88 E A S Y ! D E S I G N S , LLC cc
  79. 79. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 7 9/ 88 E A S Y ! D E S I G N S , LLC cc
  80. 80. LEARNING TO LOVE FORMS AN EVENT APART 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; } 2007 A A RO N G U S TA F S O N 8 0/ 88 E A S Y ! D E S I G N S , LLC cc
  81. 81. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 8 1/ 88 E A S Y ! D E S I G N S , LLC cc
  82. 82. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 8 2/ 88 E A S Y ! D E S I G N S , LLC cc
  83. 83. LEARNING TO LOVE FORMS AN EVENT APART 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> ... 2007 A A RO N G U S TA F S O N 8 3/ 88 E A S Y ! D E S I G N S , LLC cc

×