Your SlideShare is downloading. ×
0
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...
LEARNING TO LOVE FORMS                                     WEBVISIONS 2007




                                      AARON...
LEARNING TO LOVE FORMS                              WEBVISIONS 2007




                                      FORMS ARE
  ...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                            WEBVISIONS 2007




            SIMPLE FORM:
           ...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                   WEBVISIONS 2007




            SIMPLE FORM:
    ...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




                ...
LEARNING TO LOVE FORMS                                                        WEBVISIONS 2007
                            ...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                            WEBVISIONS 2007




           SIDEBAR:
           OPTGR...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                                                                   WEBVISIONS 2007




             ...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                         WEBVISIONS 2007




            SIMPLE FORM:
             C...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                           WEBVISIONS 2007




            SIMPLE FO...
LEARNING TO LOVE FORMS                                                        WEBVISIONS 2007




            SIMPLE FORM:...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                            WEBVISIONS 2007




                                      MORE
         ...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                            WEBVISIONS 2007




            SIMPLE FORM:
           ...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




            SIMPLE...
LEARNING TO LOVE FORMS                               WEBVISIONS 2007




                                      SIMPLE FORM...
LEARNING TO LOVE FORMS                                            WEBVISIONS 2007




            SIMPLE FORM:
           ...
LEARNING TO LOVE FORMS                                               WEBVISIONS 2007




            SIMPLE FORM:
        ...
LEARNING TO LOVE FORMS                                               WEBVISIONS 2007




            SIMPLE FORM:
        ...
LEARNING TO LOVE FORMS                                                            WEBVISIONS 2007




            SIMPLE F...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




            SIMPL...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                                          WEBVISIONS 2007




            SIMPLE FOR...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007




            SIMP...
LEARNING TO LOVE FORMS                                 WEBVISIONS 2007




                                      COMPLEX F...
LEARNING TO LOVE FORMS                                             WEBVISIONS 2007




         COMPLEX FORM:
         REL...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                               WEBVISIONS 2007




         COMPLEX ...
LEARNING TO LOVE FORMS                                            WEBVISIONS 2007




         COMPLEX FORM:
         RELA...
LEARNING TO LOVE FORMS                                                       WEBVISIONS 2007




         COMPLEX FORM:
  ...
LEARNING TO LOVE FORMS                                                                WEBVISIONS 2007
                    ...
LEARNING TO LOVE FORMS                                                WEBVISIONS 2007

                                   ...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                                                              WEBVISIONS 2007




         COMPLEX F...
LEARNING TO LOVE FORMS                              WEBVISIONS 2007




                                      MAKING
     ...
LEARNING TO LOVE FORMS                             WEBVISIONS 2007




                                      MESSAGING:
  ...
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Learning To Love Forms (WebVisions '07)
Upcoming SlideShare
Loading in...5
×

Learning To Love Forms (WebVisions '07)

30,193

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

Published in: Technology, Education
9 Comments
97 Likes
Statistics
Notes
  • = 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>
       Reply 
    Are you sure you want to  Yes  No
    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Interesting and well made slideshare! Hope to see more soon!

    http://www.homeimprovementhq.net/


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

       Reply 
    Are you sure you want to  Yes  No
    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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • google
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
30,193
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2,163
Comments
9
Likes
97
Embeds 0
No embeds

No notes for slide

Transcript of "Learning To Love Forms (WebVisions '07)"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×