• Like

Learning To Love Forms (WebVisions '07)

  • 29,797 views
Uploaded on

Forms. We all have to make 'em, but few of us love 'em. Aaron Gustafson believes that this is because we don't understand them. In this session, we will explore forms from top to bottom, examining how …

Forms. We all have to make 'em, but few of us love 'em. Aaron Gustafson believes that this is because we don't understand them. In this session, we will explore 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.

This talk covered:

* basic form building blocks;
* markup for common form components;
* error, warning, and formatting messages;
* form styling and its implications;
* browser oddities with certain form controls; and

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • = ENTREPRENEURS WANTED =

    We Are a Global Community of Entrepreneurs Looking for New Leaders to Increase the Synergy of our Qualified Team. We Work as Smart as We do Hard Taking Advantage of Internet Technology & Globalization.

    We are Entrepreneurs Working Together from the Comfort of Home: Creating a Legacy, Fulfilling Dreams, & Reaching Goals. We Leverage Each Other’s Success, Experience, Creativity & Passion. Come Join Us, Let’s Do this Together!!

    Review: http://bit.ly/dwMSY1
    Website: http://myentrepreneuronlinebusiness.com
    <br /><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/75VZhAMtib4?fs=1&amp;hl=es_MX&amp;rel=0" width="350" height="288"><param name="movie" value="http://www.youtube.com/v/75VZhAMtib4?fs=1&amp;hl=es_MX&amp;rel=0"></param><embed src="http://www.youtube.com/v/75VZhAMtib4?fs=1&amp;hl=es_MX&amp;rel=0" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
    Are you sure you want to
    Your message goes here
  • Impressive presentation of 'Learning To Love Forms (WebVisions '07)'. You've shown your credibility on presentation with this slideshow. This one deserves thumbs up. I'm John, owner of www.freeringtones.ws/ . Hope to see more quality slides from you.

    Best wishes.
    Are you sure you want to
    Your message goes here
  • Interesting and well made slideshare! Hope to see more soon!

    http://www.homeimprovementhq.net/


    http://www.homeimprovementhq.net/category/lighting/

    Are you sure you want to
    Your message goes here
  • Great slideshow about the require to innovate business models; tips on how to represent them succinctly; as well as the desire to make development initiatives actionable. Superb use of photographs as well as clear to see illustrative examples.
    Anisa
    http://financejedi.com http://healthjedi.com
    Are you sure you want to
    Your message goes here
  • google
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
29,797
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
2,161
Comments
9
Likes
97

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 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