• Like

Learning To Love Forms [The Ajax Experience East 2007]

  • 2,703 views
Uploaded on

Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your …

Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,703
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
96
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 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
  • 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
  • 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
  • 5. 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 <!-- 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 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
  • 6. 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> <!-- the rest of our form will go here --> 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
  • 7. 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><!-- 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> 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
  • 8. 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><!-- form control --></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
  • 9. 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
  • 10. 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
  • 11. 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
  • 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
  • 13. 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
  • 14. 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
  • 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=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
  • 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=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
  • 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=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
  • 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=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
  • 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=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
  • 20. 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
  • 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
  • 22. 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
  • 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
  • 24. 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
  • 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=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
  • 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
  • 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
  • 28. 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
  • 29. 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
  • 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=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
  • 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=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
  • 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=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
  • 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=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
  • 34. 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
  • 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
  • 36. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class=quot;datequot;> <!-- the rest will go here --> </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
  • 37. LEARNING TO LOVE FORMS THE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class=quot;datequot;> <legend>Post Date</legend> <!-- the rest will go here --> </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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 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=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
  • 43. 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
  • 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=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
  • 45. 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
  • 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=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
  • 47. 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
  • 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
  • 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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