Learning To Love Forms (WebVisions '07)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

10 comments

Comments 1 - 10 of 10 previous next Post a comment

  • + guestf2abe1 guestf2abe1 2 months ago
    hi eveyone....every one is love with some one or other ....to know the strength of ur lover. To find the percentage of your love so calculate here
    http://www.rightarea.com/love.html
  • + artsraj Rajesh Nair 6 months ago
    great!!

    http://artsmaths.blogspot.com
  • + guest600ec guest600ec 7 months ago
    It really useful but can anyone email me the slide to my account ora_code@yahoo.com
  • + gueste2494 gueste2494 9 months ago
    it really useful but can anyone sent me the slide to my account kelvin05420@yahoo.com
  • + gueste2fbd0 gueste2fbd0 9 months ago
    please send me a copy at nan492001@yahoo.com
  • + npsingh npsingh 10 months ago
    excellent stuff
  • + guestfd3ba1 guestfd3ba1 2 years ago
    On page 6 you misspelled fieldset in left column.

    great slides :)
  • + guestfd3ba1 guestfd3ba1 2 years ago
    On page 6 you misspelled fieldset in left column.

    great slides :)
  • + sarra sarra 2 years ago
    waitting for more great slides from u
  • + sarra sarra 2 years ago
    waitting for more great slides from u
Post a comment
Embed Video
Edit your comment Cancel

73 Favorites & 5 Groups

Learning To Love Forms (WebVisions '07) - Presentation Transcript

  1. LEARNING TO LOVE FORMS WEBVISIONS 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. LEARNING TO LOVE FORMS WEBVISIONS 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 2/ 75 E A S Y ! D E S I G N S , LLC cc
  3. LEARNING TO LOVE FORMS WEBVISIONS 2007 FORMS ARE A NECESSARY EVIL 2007 A A RO N G U S TA F S O N 3/ 75 E A S Y ! D E S I G N S , LLC cc
  4. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 4/ 75 E A S Y ! D E S I G N S , LLC cc
  5. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FORM Element <form id="contact-form" action="/action-page.php" establishes a form method="post"> ACTION is the only required <!-- 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 5/ 75 E A S Y ! D E S I G N S , LLC cc
  6. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id="contact-form" action="/action-page.php" method="post"> <fieldset> used to group related fields <legend>Send us a message</legend> <!-- 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 6/ 75 E A S Y ! D E S I G N S , LLC cc
  7. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Containing FORM <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> Controls <p><!-- form control --></p> <p><!-- form control --></p> <p><!-- form control --></p> P or DIV </fieldset> </form> sensible choices, but not very accurate (except in certain instances) <form id="contact-form" action="/action-page.php" method="post"> <fieldset> OL or UL <legend>Send us a message</legend> <ol> most forms are lists of <li><!-- 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 7/ 75 E A S Y ! D E S I G N S , LLC cc
  8. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US INPUT Text Control <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> type="name" is a basic text <ol> <li>Name input field <input type="text" name="name" id="contact-name" /></li> (also type="password" for <li>Email <input type="text" name="email" content you want encrypted) id="contact-email" /></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 8/ 75 E A S Y ! D E S I G N S , LLC cc
  9. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US TEXTAREA <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> a multiline text form control <ol> <li>Name <input type="text" name="name" id="contact-name" /></li> <li>Email requires ROWS and COLS <input type="text" name="email" id="contact-email" /></li> <li>Message attributes!!! <textarea name="message" id="contact-message" rows="4" cols="30"></textarea></li> </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 9/ 75 E A S Y ! D E S I G N S , LLC cc
  10. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Working with LABEL <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> this element provides to <ol> <li><label>Name means of associating its <input ... /></label></li> content with a form control: ... </ol> </fieldset> </form> implicit association LABEL wraps the form control and the text <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> explicit association for="contact-name">Name</label> <li><label LABEL's FOR attribute is an <input id="contact-name" ... /></li> ... ID reference to the form </ol> </fieldset> control </form> 2007 A A RO N G U S TA F S O N 10/ 75 E A S Y ! D E S I G N S , LLC cc
  11. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Buttons <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> trigger events in a form; use <ol> ... either INPUT or BUTTON </ol> <input type="submit" value="Go" /> element </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> reset – resets all form <ol> ... </ol> control values back to their <button type="submit">Go</button> defaults when the page </fieldset> </form> loaded 2007 A A RO N G U S TA F S O N 11/ 75 E A S Y ! D E S I G N S , LLC cc
  12. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 12/ 75 E A S Y ! D E S I G N S , LLC cc
  13. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US body { font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { <form id="contact-form" action="#" method="post"> font-size: 1.2em; <fieldset> line-height: 1.5; <legend>Send us a message</legend> <ol> } <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 13/ 75 E A S Y ! D E S I G N S , LLC cc
  14. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form, fieldset, legend { border: 0; padding: 0; margin: 0; } legend { font-size: 2em; <form id="contact-form" action="#" method="post"> } <fieldset> form ol, form ul { <legend>Send us a message</legend> <ol> list-style: none; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> margin: 0; <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> padding: 0; <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" } cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 14/ 75 E A S Y ! D E S I G N S , LLC cc
  15. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form li { margin: 0 0 .75em; } label { display: block; } input, textarea { <form id="contact-form" action="#" method="post"> width: 250px; <fieldset> } <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 15/ 75 E A S Y ! D E S I G N S , LLC cc
  16. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; float: left; <form id="contact-form" action="#" method="post"> <fieldset> line-height: 1.6; <legend>Send us a message</legend> <ol> margin-right: 10px; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> text-align: right; <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> width: 120px; <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" } cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 16/ 75 E A S Y ! D E S I G N S , LLC cc
  17. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } button { margin-left: 130px; cursor: pointer; <form id="contact-form" action="#" method="post"> <fieldset> } <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 17/ 75 E A S Y ! D E S I G N S , LLC cc
  18. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US label:after { content: ':'; } input, textarea { background: #ddd; width: 250px; } input:focus, <form id="contact-form" action="#" method="post"> <fieldset> textarea:focus { <legend>Send us a message</legend> <ol> background: #fff; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> } <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> /* Some styles to get <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" the baselines to cols="30"></textarea></li> </ol> match & to unify the <button type="submit">Go</button> </fieldset> type used */ </form> 2007 A A RO N G U S TA F S O N 18/ 75 E A S Y ! D E S I G N S , LLC cc
  19. LEARNING TO LOVE FORMS WEBVISIONS 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 19/ 75 E A S Y ! D E S I G N S , LLC cc
  20. LEARNING TO LOVE FORMS WEBVISIONS 2007 body { label:after { font: 62.5% "Lucida Sans content: ':'; Unicode", "Lucida Grande", } 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 20/ 75 E A S Y ! D E S I G N S , LLC cc
  21. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 21/ 75 E A S Y ! D E S I G N S , LLC cc
  22. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US SELECTion Lists <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> allows selection of one or <ol> ... more OPTIONs <li><label for="contact-subject">Subject</label> <select id="contact-subject" On OPTION elements, the name="subject"> VALUE attribute is optional <option value="Error">I noticed a (contents are submitted by website error</option> <option value="Question">I have a default) question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 22/ 75 E A S Y ! D E S I G N S , LLC cc
  23. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIDEBAR: OPTGROUPS <select id="favorite-fruit" name="favorite-fruit"> <optgroup label="Apples"> <option value="Golden Delicious Apples">Golden Delicious</option> <option value="Granny Smith Apples">Granny Smith</option> <option value="Macintosh Apples">Macintosh</option> <option value="Red Delicious Apples">Red Delicious</option> </optgroup> <optgroup label="Berries"> <option>Blackberries</option> <option>Blueberries</option> <option>Raspberries</option> <option>Strawberries</option> </optgroup> </select> 2007 A A RO N G U S TA F S O N 23/ 75 E A S Y ! D E S I G N S , LLC cc
  24. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for="contact-subject">Subject</label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> <option value="Question">I have a question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 24/ 75 E A S Y ! D E S I G N S , LLC cc
  25. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US select { background: #ddd; width: 260px; /* width is *usually* the input width + input padding + 4px */ <form id="contact-form" action="#" method="post"> } <fieldset> input:focus, <legend>Send us a message</legend> <ol> textarea:focus, ... <li><label for="contact-subject">Subject</label> select:focus { <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> background: #fff; <option value="Question">I have a question</option> <option>Other</option> } </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 25/ 75 E A S Y ! D E S I G N S , LLC cc
  26. LEARNING TO LOVE FORMS WEBVISIONS 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 26/ 75 E A S Y ! D E S I G N S , LLC cc
  27. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 27/ 75 E A S Y ! D E S I G N S , LLC cc
  28. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class="radio"> <legend>I would prefer to be or checkbox groups contacted by</legend> <ul> The LEGEND is the question <li><label><input type="radio" or statement name="method" value="email" /> email</label></li> <li><label><input type="radio" Lists organize the possible name="method" value="phone" /> responses (OL or UL) phone</label></li> </ul> implicit LABELs provide an </fieldset> </li> easy way to style in IE6 ... 2007 A A RO N G U S TA F S O N 28/ 75 E A S Y ! D E S I G N S , LLC cc
  29. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 29/ 75 E A S Y ! D E S I G N S , LLC cc
  30. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; } .radio label { <form id="contact-form" action="#" method="post"> display: inline; ... width: auto; <li> <fieldset class="radio"> margin: 0; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 30/ 75 E A S Y ! D E S I G N S , LLC cc
  31. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio { margin-left: 125px; } .radio ul { font-size: 1em; margin: .3em 0 0; } <form id="contact-form" action="#" method="post"> .radio label:after { ... content: ''; <li> <fieldset class="radio"> } <legend>I would prefer to be contacted by</legend> <ul> label input { <li><label><input type="radio" name="method" value="email" /> email</label></li> background: <li><label><input type="radio" name="method" value="phone" /> phone</label></li> transparent; </ul> </fieldset> width: auto; </li> ... } </form> 2007 A A RO N G U S TA F S O N 31/ 75 E A S Y ! D E S I G N S , LLC cc
  32. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio li { float: left; margin: 0; width: 48%; clear: none; } label input { width: auto; <form id="contact-form" action="#" method="post"> ... position: relative; <li> <fieldset class="radio"> top: 2px; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 32/ 75 E A S Y ! D E S I G N S , LLC cc
  33. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; max-width: 270px; width: 270px; } ... <fieldset class="radio"> is an exceedingly long <legend>This <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> ... 2007 A A RO N G U S TA F S O N 33/ 75 E A S Y ! D E S I G N S , LLC cc
  34. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class="radio"> <legend><span>This is an exceedingly long <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</span></legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> ... 2007 A A RO N G U S TA F S O N 34/ 75 E A S Y ! D E S I G N S , LLC cc
  35. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 35/ 75 E A S Y ! D E S I G N S , LLC cc
  36. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Confirmations <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> a little CLASSification goes a <ol> ... long way <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 36/ 75 E A S Y ! D E S I G N S , LLC cc
  37. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 37/ 75 E A S Y ! D E S I G N S , LLC cc
  38. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .confirm label { display: block; float: none; margin-left: 125px; text-align: left; width: 270px; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 38/ 75 E A S Y ! D E S I G N S , LLC cc
  39. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US .confirm { margin-bottom: 1.4em; } .radio label:after, .confirm label:after { content: ''; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 39/ 75 E A S Y ! D E S I G N S , LLC cc
  40. LEARNING TO LOVE FORMS WEBVISIONS 2007 MORE FORMS OF FORMS 2007 A A RO N G U S TA F S O N 40/ 75 E A S Y ! D E S I G N S , LLC cc
  41. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX 2007 A A RO N G U S TA F S O N 41/ 75 E A S Y ! D E S I G N S , LLC cc
  42. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX POST vs. GET <form id="search-form" action="/action-page.php" Search forms are traditionally method="get"> GET requests to allow the 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 42/ 75 E A S Y ! D E S I G N S , LLC cc
  43. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX You need something <form id="search-form" action="/action-page.php" method="get"> <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 43/ 75 E A S Y ! D E S I G N S , LLC cc
  44. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX Easy-peasy <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <p> </form> 2007 A A RO N G U S TA F S O N 44/ 75 E A S Y ! D E S I G N S , LLC cc
  45. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX It’s a BUTTON <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> big shock, I know <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 45/ 75 E A S Y ! D E S I G N S , LLC cc
  46. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX body { background: #54af44; font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { font-size: 1.2em; <form id="search-form" action="/action-page.php" method="get"> <p> line-height: 1.5; <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> } <button type="submit">Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 46/ 75 E A S Y ! D E S I G N S , LLC cc
  47. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: SEARCH BOX label { line-height: 2em; } input { border: 1px solid #c00; background: #ebebeb; margin: 0 .5em; padding: 2px 4px; <form id="search-form" action="/action-page.php" method="get"> <p> } <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> input:focus { <button type="submit">Go</button> <p> background: #fff; </form> } 2007 A A RO N G U S TA F S O N 47/ 75 E A S Y ! D E S I G N S , LLC cc
  48. LEARNING TO LOVE FORMS WEBVISIONS 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="search-form" action="/action-page.php" method="get"> <p> padding: 2px 8px; <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> text-transform: <button type="submit">Go</button> <p> uppercase; </form> } 2007 A A RO N G U S TA F S O N 48/ 75 E A S Y ! D E S I G N S , LLC cc
  49. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT 2007 A A RO N G U S TA F S O N 49/ 75 E A S Y ! D E S I G N S , LLC cc
  50. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class="date"> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 50/ 75 E A S Y ! D E S I G N S , LLC cc
  51. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class="date"> <legend>Post Date</legend> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 51/ 75 E A S Y ! D E S I G N S , LLC cc
  52. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT Not just a SELECT <fieldset class="date"> <legend>Post Date</legend> <ol> we need some LABELing <li> <label for="date-day">Date</label> <select id="date-day" name="day"> <option>01</option> ... <option>31</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 52/ 75 E A S Y ! D E S I G N S , LLC cc
  53. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT And so on <fieldset class="date"> <legend>Post Date</legend> <ol> <li> <label for="date-day">Date</label> ... </li> <li> <label for="date-month">Month</label> <select id="date-month" name="month"> <option value="01">January</option> ... <option value="12">December</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 53/ 75 E A S Y ! D E S I G N S , LLC cc
  54. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT And so forth <fieldset class="date"> <legend>Post Date</legend> <ol> <li> <label for="date-day">Date</label> ... </li> <li> <label for="date-month">Month</label> ... </li> <li> <label for="date-year">Year</label> <select id="date-year" name="year"> <option>2007</option> <option>2008</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 54/ 75 E A S Y ! D E S I G N S , LLC cc
  55. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT body { background: #54af44; font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p, legend { font-size: 1.2em; <fieldset class="date"> <legend>Post Date</legend> line-height: 1.5; <ol> <li><label for="date-day">Date</label> } ... </li> legend { <li><label for="date-month">Month</label> ... color: #000; </li> <li><label for="date-year">Year</label> } ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 55/ 75 E A S Y ! D E S I G N S , LLC cc
  56. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; } .date ol { list-style: none; margin: 0 0 0 130px; padding: 0; <fieldset class="date"> <legend>Post Date</legend> } <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 56/ 75 E A S Y ! D E S I G N S , LLC cc
  57. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date li { float: left; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 57/ 75 E A S Y ! D E S I G N S , LLC cc
  58. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date select { background: #e2efe0; margin: 0 .25em 0 0; } .date select:focus { background: #fff; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 58/ 75 E A S Y ! D E S I G N S , LLC cc
  59. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date label { position: absolute; left: -999em; } <fieldset class="date"> <legend>Post Date</legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 59/ 75 E A S Y ! D E S I G N S , LLC cc
  60. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; position: relative; } .date legend span { display: block; line-height: 1.6; <fieldset class="date"> text-align: right; <legend><span>Post Date</span></legend> <ol> width: 120px; <li><label for="date-day">Date</label> ... position: absolute; </li> <li><label for="date-month">Month</label> top: 0; ... </li> left: 0; <li><label for="date-year">Year</label> ... } </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 60/ 75 E A S Y ! D E S I G N S , LLC cc
  61. LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: DATE SELECT .date legend span:after { content: ":"; } <fieldset class="date"> <legend><span>Post Date</span></legend> <ol> <li><label for="date-day">Date</label> ... </li> <li><label for="date-month">Month</label> ... </li> <li><label for="date-year">Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 61/ 75 E A S Y ! D E S I G N S , LLC cc
  62. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS 2007 A A RO N G U S TA F S O N 62/ 75 E A S Y ! D E S I G N S , LLC cc
  63. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS Organization and <fieldset class="radio related"> <legend> coordination <span>Confine results to</span> as with other elements, form </legend> <ul> components can have <li> multiple CLASSifications <!-- year --> </li> <li> <!-- month --> </li> <li> <!-- range --> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 63/ 75 E A S Y ! D E S I G N S , LLC cc
  64. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS Basic implicit LABEL <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> nothing shocking here <li> <label> <input type="radio" name="confines" value="year" /> within the last year </label> </li> ... </ul> </fieldset> 2007 A A RO N G U S TA F S O N 64/ 75 E A S Y ! D E S I G N S , LLC cc
  65. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS LABELs can contain <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> more than one form <li> <label><input type="radio" name="confines" value="year" /> within the last year</label> control </li> <li> in our case, we have a radio <label> <input type="radio" name="confines" INPUT as well as a SELECTion value="month" /> box the month of <select name="month"> <option value="01">January</option> ... <option value="12">December</option> </select> </label> </li> ... </ul> </fieldset> 2007 A A RO N G U S TA F S O N 65/ 75 E A S Y ! D E S I G N S , LLC cc
  66. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS How do I code that?!? <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> think about it... what are the ... <li> relationships of the fields? <dl> <dt> <!-- radio will go here --> </dt> <dd> <!-- related fields here --> </dd> </dl> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 66/ 75 E A S Y ! D E S I G N S , LLC cc
  67. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS We know the first bit <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> ... <li> <dl> <dt> <label> <input type="radio" name="confines" value="range" /> a monthly range </label> </dt> <dd> <!-- related fields here --> </dd> </dl> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 67/ 75 E A S Y ! D E S I G N S , LLC cc
  68. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS We need to organize <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> this now ... <li> <dl> <dt> <label><input type="radio" name="confines"... </dt> <dd> <ol> <li> <!-- start --> </li> <li> <!-- end --> </li> </ol> </dd> </dl> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 68/ 75 E A S Y ! D E S I G N S , LLC cc
  69. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS Simple explicit ... <dd> <ol> LABEL <li> <label for="range-start"> from the start of</label> <select id="range-start" name="range-start"> <option value="2006-01">January 2006</option> ... <option value="2006-12">December 2006</option> </select> </li> <li> <!-- end --> </li> ... </ol> </dd> ... 2007 A A RO N G U S TA F S O N 69/ 75 E A S Y ! D E S I G N S , LLC cc
  70. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS And again ... <dd> <ol> <li> <label for="range-start">from the start of</label> ... </li> <li> <label for="range-end"> until the end of</label> <select id="range-end" name="range-end"> <option value="2006-01">January 2006</option> ... <option value="2006-12">December 2006</option> </select> </li> </ol> </dd> ... 2007 A A RO N G U S TA F S O N 70/ 75 E A S Y ! D E S I G N S , LLC cc
  71. LEARNING TO LOVE FORMS WEBVISIONS 2007 <fieldset class="radio related"> <legend><span>Confine results to</span></legend> <ul> <li> <label> COMPLEX FORM: <input type="radio" name="confines" value="year" /> within the last year</label> </li> RELATED FIELDS <li> <label> <input type="radio" name="confines" value="month" /> the month of <select name="month"> <option value="01">January</option> ... </select> </label> </li> <li> Itʼs a lot of code... <dl> <dt> <label> <input type="radio" name="confines" value="range" /> a monthly range </label> </dt> <dd> <ol> <li> <label for="range-start">from the start of</label> <select id="range-start" name="range-start"> <option value="2006-01">January 2006</option> ... </select> </li> <li> <label for="range-end">until the end of</label> <select id="range-end" name="range-end"> <option value="2006-01">January 2006</option> ... </select> </li> </ol> </dd> </dl> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 71/ 75 E A S Y ! D E S I G N S , LLC cc
  72. LEARNING TO LOVE FORMS WEBVISIONS 2007 Confine results to List of three items COMPLEX FORM: bullet RELATED FIELDS Radio button (not checked) within the last year bullet Radio button (not checked) the month of Combo box January bullet ...but the benefits are Definition list of one item Radio button (not checked) a monthly range worth it equals List of two items one: from the start of Combo box January 2006 two: until the end of Combo box January 2006 List end List end List end transcribed by Fangs 2007 A A RO N G U S TA F S O N 72/ 75 E A S Y ! D E S I G N S , LLC cc
  73. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS /* We'll save some space and inherit styles from .radio */ form ol, form ul, form dl { list-style: none; margin: 0; <fieldset class="radio related"> <legend><span>Confine results to</span></legend> padding: 0; <ul> <li> } <!-- year --> li ul, li ol { </li> <li> font-size: 1em; <!-- month --> </li> } <li> <!-- range --> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 73/ 75 E A S Y ! D E S I G N S , LLC cc
  74. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS .related li { clear: both; float: none; margin: 0 0 .5em; width: auto; } /* For IE to recover from <fieldset class="radio related"> <legend><span>Confine results to</span></legend> a strange margin */ <ul> <li> .related li { <!-- year --> </li> zoom: 1; <li> <!-- month --> } </li> <li> <!-- range --> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 74/ 75 E A S Y ! D E S I G N S , LLC cc
  75. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS .related select { margin-left: .25em; } .related dd { margin: .5em 0 0; padding: 0 0 0 3em; } .related dd label { <fieldset class="radio related"> <legend><span>Confine results to</span></legend> float: left; <ul> <li> line-height: 1.9; <!-- year --> </li> width: 100px; <li> <!-- month --> } </li> <li> <!-- range --> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 75/ 75 E A S Y ! D E S I G N S , LLC cc
  76. LEARNING TO LOVE FORMS WEBVISIONS 2007 COMPLEX FORM: RELATED FIELDS .related legend span { display: block; line-height: 1.8; text-align: right; width: 120px; position: absolute; top: 0; left: -130px; <fieldset class="radio related"> <legend><span>Confine results to</span></legend> } <ul> <li> <!-- year --> </li> <li> <!-- month --> </li> <li> <!-- range --> </li> </ul> </fieldset> 2007 A A RO N G U S TA F S O N 76/ 75 E A S Y ! D E S I G N S , LLC cc
  77. LEARNING TO LOVE FORMS WEBVISIONS 2007 MAKING THE MOST OF MESSAGES 2007 A A RO N G U S TA F S O N 77/ 75 E A S Y ! D E S I G N S , LLC cc
  78. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED 2007 A A RO N G U S TA F S O N 78/ 75 E A S Y ! D E S I G N S , LLC cc
  79. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED What is the * anyway? <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> Well, it stands for something <p>Required fields are marked else and in HTML, the closest to <abbr title="required">*</abbr>.</p> that we have to convey that is <ol> <li> the ABBR element. <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 79/ 75 E A S Y ! D E S I G N S , LLC cc
  80. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED If you want to go all- <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> out, you can <p>Required fields are marked <em><abbr title="required">*</abbr></em>. but that seems like overkill </p> <ol> <li class="required"> <label for="contact-name"> Name<em><abbr title="required">* </abbr></em> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 80/ 75 E A S Y ! D E S I G N S , LLC cc
  81. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title="required">*</abbr>.</p> <ol> <li> <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 81/ 75 E A S Y ! D E S I G N S , LLC cc
  82. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: REQUIRED abbr { cursor: help; font-style: normal; border: 0; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title="required">*</abbr>.</p> <ol> <li> <label for="contact-name"> Name<abbr title="required">*</abbr> </label> <input type="text" id="contact-name" name="name" /> </li> ... 2007 A A RO N G U S TA F S O N 82/ 75 E A S Y ! D E S I G N S , LLC cc
  83. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING 2007 A A RO N G U S TA F S O N 83/ 75 E A S Y ! D E S I G N S , LLC cc
  84. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING How should we ... <li> <label for="contact-email"> emphasize important Email<abbr title="required">*</abbr> </label> formatting info? <input type="text" id="contact-email" name="email" /> </li> <li> <label for="contact-phone"> Phone<em class="msg"> format: 123-456-7890</em> </label> <input type="text" id="contact-phone" name="phone" /> </li> <li> <label for="contact-subject"> Subject<abbr title="required">*</abbr> </label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> ... 2007 A A RO N G U S TA F S O N 84/ 75 E A S Y ! D E S I G N S , LLC cc
  85. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 85/ 75 E A S Y ! D E S I G N S , LLC cc
  86. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING label em.msg { font-size: .8em; font-style: normal; line-height: 2.5; } ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 86/ 75 E A S Y ! D E S I G N S , LLC cc
  87. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING label{ ... position: relative; } label em.msg { color: #aaa; font-size: .8em; font-style: normal; ... line-height: 2.5; <li> <label for="contact-phone">Phone<em position: absolute; class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> right: -266px; </li> ... top: 0; } 2007 A A RO N G U S TA F S O N 87/ 75 E A S Y ! D E S I G N S , LLC cc
  88. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: FORMATTING ... <li> <label for="contact-phone">Phone<em class="msg"> format: 123-456-7890</em></label> <input type="text" id="contact-phone" name="phone" /> </li> ... 2007 A A RO N G U S TA F S O N 88/ 75 E A S Y ! D E S I G N S , LLC cc
  89. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS 2007 A A RO N G U S TA F S O N 89/ 75 E A S Y ! D E S I G N S , LLC cc
  90. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS How should we ... <li class="error"> strongly emphasize <label for="contact-email"> Email<abbr title="required">*</abbr> <strong class="err"> You forgot to fill even more important in your email</strong> error advisories? </label> <input type="text" id="contact-email" name="email" /> </li> ... How should we highlight the field? 2007 A A RO N G U S TA F S O N 90/ 75 E A S Y ! D E S I G N S , LLC cc
  91. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 91/ 75 E A S Y ! D E S I G N S , LLC cc
  92. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; padding-left: 5px; text-align: left; } ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 92/ 75 E A S Y ! D E S I G N S , LLC cc
  93. LEARNING TO LOVE FORMS WEBVISIONS 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="error"> top: 0; <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot left: 390px; to fill in your email</strong> } </label> <input type="text" id="contact-email" name="email" /> strong.err:before { </li> ... content: "<" } 2007 A A RO N G U S TA F S O N 93/ 75 E A S Y ! D E S I G N S , LLC cc
  94. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS .error input { border: 2px solid #b00; background: #ffdfdf; } .error input:focus { background: #fff; } ... <li class="error"> <label for="contact-email"> Email<abbr title="required">*</abbr><strong class="err"> You forgot to fill in your email</strong> </label> <input type="text" id="contact-email" name="email" /> </li> ... 2007 A A RO N G U S TA F S O N 94/ 75 E A S Y ! D E S I G N S , LLC cc
  95. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS How do we notify <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> users of errors? <div id="errors"> <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="#contact-email">your email address</a></li> </ol> and linking to the field with </div> errors doesn't hurt <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 95/ 75 E A S Y ! D E S I G N S , LLC cc
  96. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 96/ 75 E A S Y ! D E S I G N S , LLC cc
  97. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors { background: #ffdfdf; border: 2px solid #b00; color: #333; margin: .5em 0 1em; padding: 10px; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 97/ 75 E A S Y ! D E S I G N S , LLC cc
  98. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors p { margin: 0; padding: 0; } #errors ol { list-style: disc; margin: 0 0 0 20px; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 98/ 75 E A S Y ! D E S I G N S , LLC cc
  99. LEARNING TO LOVE FORMS WEBVISIONS 2007 MESSAGING: ERRORS #errors a { color: #b00; } <form id="contact-form" action="test.php" method="get"> <fieldset> <legend>Send us a message</legend> <div id="errors"> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href="#contact-email">your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title="required">*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 99/ 75 E A S Y ! D E S I G N S , LLC cc
  100. LEARNING TO LOVE FORMS WEBVISIONS 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 2007 A A RO N G U S TA F S O N 1 00/ 75 E A S Y ! D E S I G N S , LLC cc
  101. LEARNING TO LOVE FORMS WEBVISIONS 2007 FORMS ARE NOT NECESSARILY EVIL 2007 A A RO N G U S TA F S O N 1 01/ 75 E A S Y ! D E S I G N S , LLC cc
  102. LEARNING TO LOVE FORMS WEBVISIONS 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

+ Aaron GustafsonAaron Gustafson, 3 years ago

custom

21446 views, 73 favs, 34 embeds more stats

Forms. We all have to make 'em, but few of us love more

More Info

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Go to text version
  • Total Views 21446
    • 20603 on SlideShare
    • 843 from embeds
  • Comments 10
  • Favorites 73
  • Downloads 1667
Most viewed embeds
  • 384 views on http://www.rosenfeldmedia.com
  • 110 views on http://www.easy-reader.net
  • 70 views on http://ued.koubei.com
  • 57 views on http://www.dev2.hu
  • 41 views on http://design.alibaba-inc.com

more

All embeds
  • 384 views on http://www.rosenfeldmedia.com
  • 110 views on http://www.easy-reader.net
  • 70 views on http://ued.koubei.com
  • 57 views on http://www.dev2.hu
  • 41 views on http://design.alibaba-inc.com
  • 26 views on http://www.yayhooray.com
  • 24 views on http://higher.com.ua
  • 19 views on http://feeds.rosenfeldmedia.com
  • 17 views on http://www.caudalweb.com
  • 17 views on http://kion4u.wordpress.com
  • 13 views on http://static.slideshare.net
  • 11 views on http://ervdesign.net
  • 7 views on http://lj-toys.com
  • 5 views on http://news.inter-svet.ru
  • 5 views on http://10.1.6.162
  • 5 views on http://easy-reader.net
  • 5 views on https://s3.amazonaws.com
  • 4 views on http://www.fogo.cl
  • 2 views on https://easydesigns.projectpath.com
  • 2 views on http://www.filescon.com
  • 2 views on http://localhost:4361
  • 2 views on http://bink
  • 2 views on http://dartmouthtuck.com
  • 2 views on http://www.netvibes.com
  • 2 views on http://www.yougo.nl
  • 1 views on http://thinkusers.wordpress.com
  • 1 views on http://design.alibaba.com
  • 1 views on http://www.zhuaxia.com
  • 1 views on http://www.oplahol.com
  • 1 views on http://66.102.9.104
  • 1 views on http://tumblr.iamdanw.com
  • 1 views on http://www.72color.com
  • 1 views on http://10.1.6.161
  • 1 views on file://

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories