SlideShare a Scribd company logo
1 of 89
Download to read offline
LEARNING TO LOVE FORMS                AN EVENT APART 2007




     2007 A A RO N G U S TA F S O N            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                     AN EVENT APART 2007




                                      AARON GUSTAFSON
                                      EASY! DESIGNS, LLC




     2007 A A RO N G U S TA F S O N          2/88                   E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                     AN EVENT APART 2007




                                      AARON GUSTAFSON
                                      EASY! DESIGNS, LLC




     2007 A A RO N G U S TA F S O N          3/88                   E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                              AN EVENT APART 2007




                                      FORMS ARE
                                      A NECESSARY

                                      EVIL
     2007 A A RO N G U S TA F S O N       4/88               E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      CONTACT US




     2007 A A RO N G U S TA F S O N       5/88                E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                       AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     FORM Element                     <form id=quot;contact-formquot;
                                            action=quot;/action-page.phpquot;
     establishes a form                     method=quot;postquot;>

     ACTION is the only required       <!-- the rest of our form will go here -->
     attribute and should always      </form>
     be a URI

     METHOD defaults to “get”

     NAME is depreciated; use ID
     instead



     2007 A A RO N G U S TA F S O N       6/88                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     FIEDSET Element                  <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
                                        <fieldset>
     used to group related fields        <legend>Send us a message</legend>
                                          <!-- the rest of our form will go here -->
     LEGEND Element                     </fieldset>
                                      </form>
     used to provide a caption for
     a FIELDSET




     2007 A A RO N G U S TA F S O N             7/88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     Containing FORM
                                      <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>

     Controls                             <p><!-- form control --></p>
                                          <p><!-- form control --></p>
                                          <p><!-- form control --></p>
     P or DIV
                                        </fieldset>
                                      </form>

     sensible choices, but not
     very accurate (except in
     certain instances)
                                      <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
                                        <fieldset>

     OL or UL
                                          <legend>Send us a message</legend>
                                          <ol>
     most forms are lists of               <li><!-- form control --></li>
                                           <li><!-- form control --></li>
     questions or form controls,           <li><!-- form control --></li>
     so these are better                  </ol>
                                        </fieldset>
                                      </form>

     2007 A A RO N G U S TA F S O N          8/88                                             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                       AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     INPUT Text Control               <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     type=quot;textquot; is a basic text          <ol>
                                           <li>Name
     input field                               <input type=quot;textquot; name=quot;namequot;
                                                id=quot;contact-namequot; /></li>
     (also type=quot;passwordquot; for             <li>Email
                                               <input type=quot;textquot; name=quot;emailquot;
     content you want hidden)
                                                id=quot;contact-emailquot; /></li>
                                            <li><!-- form control --></li>

     NAME vs. ID
                                          </ol>
                                        </fieldset>
                                      </form>
     NAME is for the back end
     ID is for the front end




     2007 A A RO N G U S TA F S O N          9/88                                         E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     TEXTAREA                         <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     a multiline text form control        <ol>
                                            <li>Name
                                                <input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li>
                                            <li>Email
     requires ROWS and COLS                     <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li>
                                            <li>Message
     attributes!!!                              <textarea name=quot;messagequot;
                                                 id=quot;contact-messagequot;
                                                 rows=quot;4quot; cols=quot;30quot;></textarea></li>
                                          </ol>
                                        </fieldset>
                                      </form>




     2007 A A RO N G U S TA F S O N          1 0/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     Working with LABEL
                                      <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     this element provides to             <ol>
                                            <li><label>Name
     means of associating its                   <input ... /></label></li>
     content with a form control:           ...
                                          </ol>
                                        </fieldset>
                                      </form>
     implicit association
     LABEL wraps the form
     control and the text             <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
     explicit association                              for=quot;contact-namequot;>Name</label>
                                            <li><label

     LABEL's FOR attribute is an                <input id=quot;contact-namequot; ... /></li>
                                            ...
     ID reference to the form             </ol>
                                        </fieldset>
     control                          </form>



     2007 A A RO N G U S TA F S O N          1 1/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     Buttons
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     trigger events in a form; use        <ol>
                                            ...
     either INPUT or BUTTON               </ol>
                                          <input type=quot;submitquot; value=quot;Goquot; />
     element                            </fieldset>
                                      </form>


     Common             TYPEs
     submit – submits the form;
     default button type              <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>

     reset – resets all form
                                          <ol>
                                            ...
                                          </ol>
     control values back to their         <button type=quot;submitquot;>Go</button>
     defaults when the page             </fieldset>
                                      </form>
     loaded

     2007 A A RO N G U S TA F S O N          1 2/ 88                                      E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                          AN EVENT APART 2007




                                                      SIDEBAR:
                                                      BUTTONS

                                  WINDOWS XP                                  OS X

                                                      INPUT

                                                      BUTTON
     Mozilla       IE 6/7          IE 6/7     Opera               Safari   Camino    Firefox   IE 5          Opera
                     (XP)         (classic)




     2007 A A RO N G U S TA F S O N                     1 3/ 88                                E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                             AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
                                            <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot;
                                                       name=quot;namequot; /></li>
                                            <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot;
                                                       name=quot;emailquot; /></li>
                                            <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot;
                                                          name=quot;messagequot; rows=quot;4quot;
                                                          cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>




     2007 A A RO N G U S TA F S O N        1 4/ 88                               E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     body {
       font: 62.5%
     quot;Lucida Sans Unicodequot;,
     quot;Lucida Grandequot;,
     sans-serif;
     }
     ol, ul, p {
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
       font-size: 1.2em;                <fieldset>
       line-height: 1.5;                  <legend>Send us a message</legend>
                                          <ol>
     }                                      <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
                                            <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
                                            <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                                                          cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


     2007 A A RO N G U S TA F S O N          1 5/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     form, fieldset, legend {
       border: 0;
       padding: 0;
       margin: 0;
     }
     legend {
       font-size: 2em;
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
     }                                  <fieldset>
     form ol, form ul {                   <legend>Send us a message</legend>
                                          <ol>
       list-style: none;                    <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
       margin: 0;                           <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
       padding: 0;                          <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
     }                                                    cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


     2007 A A RO N G U S TA F S O N          1 6/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     form li {
       margin: 0 0 .75em;
     }
     label {
       display: block;
     }
     input, textarea {
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
       width: 250px;                    <fieldset>
     }                                    <legend>Send us a message</legend>
                                          <ol>
                                            <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
                                            <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
                                            <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                                                          cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


     2007 A A RO N G U S TA F S O N          1 7/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     form li {
       clear: both;
       margin: 0 0 .75em;
       padding: 0;
     }
     label {
       display: block;
       float: left;                   <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
       line-height: 1.6;                  <legend>Send us a message</legend>
                                          <ol>
       margin-right: 10px;                  <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
       text-align: right;                   <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
       width: 120px;                        <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
     }                                                    cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


     2007 A A RO N G U S TA F S O N          1 8/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     legend {
       font-size: 2em;
       line-height: 1.8;
       padding-bottom: .5em;
     }
     button {
       margin-left: 130px;
       cursor: pointer;               <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
     }                                    <legend>Send us a message</legend>
                                          <ol>
                                            <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
                                            <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
                                            <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
                                                          cols=quot;30quot;></textarea></li>
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


     2007 A A RO N G U S TA F S O N          1 9/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     label:after {
       content: ':';
     }
     input, textarea {
       background: #ddd;
       width: 250px;
     }
     input:focus,                     <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
     textarea:focus {                     <legend>Send us a message</legend>
                                          <ol>
       background: #fff;                    <li><label for=quot;contact-namequot;>Name</label>
                                                <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li>
     }                                      <li><label for=quot;contact-emailquot;>Email</label>
                                                <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li>
     /* Some styles to get                  <li><label for=quot;contact-messagequot;>Message</label>
                                                <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot;
        the baselines to                                  cols=quot;30quot;></textarea></li>
                                          </ol>
        match & to unify the              <button type=quot;submitquot;>Go</button>
                                        </fieldset>
        type used */                  </form>


     2007 A A RO N G U S TA F S O N          2 0/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                 AN EVENT APART 2007
                                      body {                           label:after {
                                        font: 62.5% quot;Lucida Sans         content: ':';
                                          Unicodequot;, quot;Lucida Grandequot;,   }
                                          sans-serif;                  input, textarea {
            SIMPLE FORM:              }                                  background: #ddd;
                                      ol, ul, p {                        font: 1em Arial, Helvetica,
             CONTACT US                 font-size: 1.2em;                  sans-serif;
                                        line-height: 1.5;                padding: 1px 3px;
                                      }                                  width: 250px;
                                      form, fieldset, legend {         }
                                        border: 0;                     textarea {
                                        margin: 0;                       line-height: 1.3em;
                                        padding: 0;                      padding: 0 3px;
                                      }                                }
                                      legend {                         input:focus, textarea:focus {
                                        font-size: 2em;                  background: #fff;
                                        line-height: 1.8;              }
                                        padding-bottom: .5em;          button {
                                      }                                  background: #ffd100;
                                      form ol, form ul {                 border: 2px outset #333;
                                        list-style: none;                color: #333;
                                        margin: 0;                       cursor: pointer;
                                        padding: 0;                      font-size: .9em;
                                      }                                  font-weight: bold;
                                      form li {                          letter-spacing: .3em;
                                        clear: both;                     margin-left: 130px;
                                        margin: 0 0 .75em;               padding: .2em .5em;
                                        padding: 0;                      text-transform: uppercase;
                                      }                                }
                                      label {
                                        display: block;
                                        float: left;
                                        line-height: 1.6;
                                        margin-right: 10px;
                                        text-align: right;
                                        width: 120px;
                                      }

     2007 A A RO N G U S TA F S O N          2 1/ 88                                   E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      CONTACT US




     2007 A A RO N G U S TA F S O N       2 2/ 88             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                        AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     SELECTion Lists                  <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     allows selection of one or           <ol>
                                            ...
     more OPTIONs                          <li><label
                                              for=quot;contact-subjectquot;>Subject</label>
                                             <select id=quot;contact-subjectquot;
     On OPTION elements, the                          name=quot;subjectquot;>
     VALUE attribute is optional               <option value=quot;Errorquot;>I noticed a
     (contents are submitted by                 website error</option>
                                               <option value=quot;Questionquot;>I have a
     default)
                                                question</option>
                                               <option>Other</option>
                                             </select></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>




     2007 A A RO N G U S TA F S O N          2 3/ 88                                      E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                      AN EVENT APART 2007




           SIDEBAR:
           OPTGROUPS



     <select id=quot;favorite-fruitquot; name=quot;favorite-fruitquot;>
       <optgroup label=quot;Applesquot;>
         <option value=quot;Golden Delicious Applesquot;>Golden Delicious</option>
         <option value=quot;Granny Smith Applesquot;>Granny Smith</option>
         <option value=quot;Macintosh Applesquot;>Macintosh</option>
         <option value=quot;Red Delicious Applesquot;>Red Delicious</option>
       </optgroup>
       <optgroup label=quot;Berriesquot;>
         <option>Blackberries</option>
         <option>Blueberries</option>
         <option>Raspberries</option>
         <option>Strawberries</option>
       </optgroup>
     </select>




     2007 A A RO N G U S TA F S O N      2 4/ 88                        E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US




                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
                                            ...
                                            <li><label for=quot;contact-subjectquot;>Subject</label>
                                                <select id=quot;contact-subjectquot; name=quot;subjectquot;>
                                                   <option value=quot;Errorquot;>I noticed a website error</option>
                                                   <option value=quot;Questionquot;>I have a question</option>
                                                   <option>Other</option>
                                                </select></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>

     2007 A A RO N G U S TA F S O N          2 5/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     select {
       background: #ddd;
       width: 260px;
       /* width is *usually*
          the input width +
          input padding +
          4px */
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
     }                                  <fieldset>
     input:focus,                         <legend>Send us a message</legend>
                                          <ol>
     textarea:focus,                        ...
                                            <li><label for=quot;contact-subjectquot;>Subject</label>
     select:focus {                             <select id=quot;contact-subjectquot; name=quot;subjectquot;>
                                                   <option value=quot;Errorquot;>I noticed a website error</option>
       background: #fff;                           <option value=quot;Questionquot;>I have a question</option>
                                                   <option>Other</option>
     }                                          </select></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>

     2007 A A RO N G U S TA F S O N          2 6/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                              AN EVENT APART 2007




                                                     SIDEBAR:
                                                     SELECTS

                                                    WINDOWS XP



                                      Mozilla   IE 6/7                  IE 6     Opera
                                                            IE 7
                                                  (XP)               (classic)
                                                         (classic)




                                                         OS X



                                                Camino    Firefox
                                      Safari                           IE 5      Opera




     2007 A A RO N G U S TA F S O N                      2 7/ 88                             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                    AN EVENT APART 2007




                                                    CUSTOM
                                                    SELECTS

                                                    FauxSelect

                                                    code.google.com/p/
                                                    easy-designs/wiki/FauxSelect




                                              SELECT Something New
                                      easy-designs.net/articles/replaceSelect/

                                            SELECT Something New Pt. 2
                                      easy-designs.net/articles/replaceSelect2/


     2007 A A RO N G U S TA F S O N                     2 8/ 88                    E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      CONTACT US




     2007 A A RO N G U S TA F S O N       2 9/ 88             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                    AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     Nested FIELDSETs                 ...
                                      <li>
     a great way to organize radio     <fieldset class=quot;radioquot;>
                                         <legend>I would prefer to be
     or checkbox groups
                                          contacted by</legend>
                                         <ul>
     The LEGEND is the question           <li><label><input type=quot;radioquot;
     or statement                          name=quot;methodquot; value=quot;emailquot; />
                                           email</label></li>
                                          <li><label><input type=quot;radioquot;
     Lists organize the possible           name=quot;methodquot; value=quot;phonequot; />
     responses (OL or UL)                  phone</label></li>
                                         </ul>
     implicit LABELs provide an        </fieldset>
                                      </li>
     easy way to style in IE6         ...




     2007 A A RO N G U S TA F S O N    3 0/ 88                       E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US




                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                            ...
                                            <li>
                                              <fieldset class=quot;radioquot;>
                                                 <legend>I would prefer to be contacted by</legend>
                                                 <ul>
                                                   <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                       email</label></li>
                                                   <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                       phone</label></li>
                                                 </ul>
                                              </fieldset>
                                            </li>
                                            ...
                                      </form>


     2007 A A RO N G U S TA F S O N          3 1/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .radio legend {
       font-size: 1em;
       line-height: 1.5;
       padding: 0 0 0 6px;
       margin: 0;
     }
     .radio label {
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
       display: inline;                     ...
       width: auto;                         <li>
                                              <fieldset class=quot;radioquot;>
       margin: 0;                                <legend>I would prefer to be contacted by</legend>
                                                 <ul>
     }                                             <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                       email</label></li>
                                                   <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                       phone</label></li>
                                                 </ul>
                                              </fieldset>
                                            </li>
                                            ...
                                      </form>


     2007 A A RO N G U S TA F S O N          3 2/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .radio {
       margin-left: 125px;
     }
     .radio ul {
       font-size: 1em;
       margin: .3em 0 0;
     }
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
     .radio label:after {                   ...
       content: '';                         <li>
                                              <fieldset class=quot;radioquot;>
     }                                           <legend>I would prefer to be contacted by</legend>
                                                 <ul>
     label input {                                 <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                       email</label></li>
       background:                                 <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                       phone</label></li>
        transparent;                             </ul>
                                              </fieldset>
       width: auto;                         </li>
                                            ...
     }                                </form>


     2007 A A RO N G U S TA F S O N          3 3/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .radio li {
       float: left;
       margin: 0;
       width: 48%;
       clear: none;
     }
     label input {
       width: auto;                   <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                            ...
       position: relative;                  <li>
                                              <fieldset class=quot;radioquot;>
       top: 2px;                                 <legend>I would prefer to be contacted by</legend>
                                                 <ul>
     }                                             <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                       email</label></li>
                                                   <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                       phone</label></li>
                                                 </ul>
                                              </fieldset>
                                            </li>
                                            ...
                                      </form>


     2007 A A RO N G U S TA F S O N          3 4/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                  AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .radio legend {
       font-size: 1em;
       line-height: 1.5;
       padding: 0 0 0 6px;
       margin: 0;
       max-width: 270px;
       width: 270px;
     }                                   ...
                                           <fieldset class=quot;radioquot;>
                                                      is an exceedingly long
                                             <legend>This
                                      <code>LEGEND</code> to demonstrate the odd
                                      behavior of <code>LEGEND</code>s</legend>
                                             <ul>
                                               <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                   email</label></li>
                                               <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                   phone</label></li>
                                             </ul>
                                           </fieldset>
                                         ...


     2007 A A RO N G U S TA F S O N       3 5/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .radio legend span {
       display: block;
       width: 270px;
     }



                                      ...
                                        <fieldset class=quot;radioquot;>
                                          <legend><span>This is an exceedingly long
                                            <code>LEGEND</code> to demonstrate the odd behavior of
                                            <code>LEGEND</code>s</span></legend>
                                          <ul>
                                            <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; />
                                                email</label></li>
                                            <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; />
                                                phone</label></li>
                                          </ul>
                                        </fieldset>
                                      ...



     2007 A A RO N G U S TA F S O N    3 6/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      CONTACT US




     2007 A A RO N G U S TA F S O N       3 7/ 88             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                        AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     Confirmations                    <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     a little CLASSification goes a       <ol>
                                            ...
     long way                              <li class=quot;confirmquot;>
                                            <input type=quot;hiddenquot; name=quot;mailing-listquot;
                                                   value=quot;0quot; />
                                            <label><input type=quot;checkboxquot;
                                                   name=quot;mailing-listquot; value=quot;1quot; />
                                                   Please add me to your mailing
                                                   list</label></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>




     2007 A A RO N G U S TA F S O N          3 8/ 88                                      E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US




                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
                                            ...
                                            <li class=quot;confirmquot;>
                                               <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
                                               <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
                                                      Please add me to your mailing list</label></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>



     2007 A A RO N G U S TA F S O N          3 9/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .confirm label {
       display: block;
       float: none;
       margin-left: 125px;
       text-align: left;
       width: 270px;
     }
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
                                            ...
                                            <li class=quot;confirmquot;>
                                               <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
                                               <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
                                                      Please add me to your mailing list</label></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>



     2007 A A RO N G U S TA F S O N          4 0/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
             CONTACT US



     .confirm {
       margin-bottom: 1.4em;
     }
     .radio label:after,
     .confirm label:after {
       content: '';
     }
                                      <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <ol>
                                            ...
                                            <li class=quot;confirmquot;>
                                               <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; />
                                               <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; />
                                                      Please add me to your mailing list</label></li>
                                            ...
                                          </ol>
                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>



     2007 A A RO N G U S TA F S O N          4 1/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                             AN EVENT APART 2007




                                      MORE
                                      FORMS OF
                                      FORMS

     2007 A A RO N G U S TA F S O N      4 2/ 88            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      SEARCH BOX




     2007 A A RO N G U S TA F S O N       4 3/ 88             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                       AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     POST vs. GET                     <form id=quot;search-formquot;
                                            action=quot;/action-page.phpquot;
     Search forms are traditionally         method=quot;getquot;>
     GET requests to allow the
     action page (i.e. the results)    <!-- the rest of our form will go here -->
     to be bookmarkable.
                                      </form>




     2007 A A RO N G U S TA F S O N       4 4/ 88                        E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     You need something               <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
     Sometimes a FIELDSET is            <!-- the rest of our form will go here -->
     unnecessary, but in XHTML,         <p>
                                      </form>
     you need something to wrap
     the contents of a form




     2007 A A RO N G U S TA F S O N             4 5/ 88                                       E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     Easy-peasy                       <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
                                          <label for=quot;search-queryquot;>Search this
                                           site for</label>
                                          <input type=quot;textquot; id=quot;search-queryquot;
                                           name=quot;queryquot; />
                                        <p>
                                      </form>




     2007 A A RO N G U S TA F S O N             4 6/ 88                                       E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     It’s a BUTTON                    <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
                                          <label for=quot;search-queryquot;>Search this site for</label>
     big shock, I know                    <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
                                          <button type=quot;submitquot;>Go</button>
                                        <p>
                                      </form>




     2007 A A RO N G U S TA F S O N             4 7/ 88                                       E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     body {
       background: #54af44;
       font: 62.5% quot;Lucida
       Sans Unicodequot;, quot;Lucida
       Grandequot;, sans-serif;
     }
     ol, ul, p {
       font-size: 1.2em;              <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
       line-height: 1.5;                  <label for=quot;search-queryquot;>Search this site for</label>
                                          <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
     }                                    <button type=quot;submitquot;>Go</button>
                                        <p>
                                      </form>




     2007 A A RO N G U S TA F S O N          4 8/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     label {
       line-height: 2em;
     }
     input {
       border: 1px solid #c00;
       background: #ebebeb;
       margin: 0 .5em;
       padding: 2px 4px;              <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
     }                                    <label for=quot;search-queryquot;>Search this site for</label>
                                          <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
     input:focus {                        <button type=quot;submitquot;>Go</button>
                                        <p>
       background: #fff;              </form>

     }




     2007 A A RO N G U S TA F S O N          4 9/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            SEARCH BOX



     button {
       background: #c00;
       border: 0;
       color: #fff;
       cursor: pointer;
       font-size: .9em;
       font-weight: bold;
       letter-spacing: .1em;          <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;>
                                        <p>
       padding: 2px 8px;                  <label for=quot;search-queryquot;>Search this site for</label>
                                          <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; />
       text-transform:                    <button type=quot;submitquot;>Go</button>
                                        <p>
         uppercase;                   </form>

     }




     2007 A A RO N G U S TA F S O N          5 0/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                               AN EVENT APART 2007




                                      SIMPLE FORM:
                                      DATE SELECT




     2007 A A RO N G U S TA F S O N       5 1/ 88             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                          AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     Getting organized                <fieldset class=quot;datequot;>

                                       <!-- the rest will go here -->

                                      </fieldset>




     2007 A A RO N G U S TA F S O N       5 2/ 88                        E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                          AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     Not really a LABEL               <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>

                                        <!-- the rest will go here -->
                                      </fieldset>




     2007 A A RO N G U S TA F S O N          5 3/ 88                     E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     Not just a SELECT                <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
     we need some LABELing               <li>
                                           <label for=quot;date-dayquot;>Date</label>
                                           <select id=quot;date-dayquot; name=quot;dayquot;>
                                            <option>01</option>
                                            ...
                                            <option>31</option>
                                           </select>
                                         </li>
                                        </ol>
                                      </fieldset>




     2007 A A RO N G U S TA F S O N          5 4/ 88                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     And so on                        <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
                                          <li>
                                             <label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li>
                                           <label for=quot;date-monthquot;>Month</label>
                                           <select id=quot;date-monthquot; name=quot;monthquot;>
                                             <option value=quot;01quot;>January</option>
                                             ...
                                             <option value=quot;12quot;>December</option>
                                           </select>
                                          </li>
                                        </ol>
                                      </fieldset>




     2007 A A RO N G U S TA F S O N          5 5/ 88                                 E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     And so forth                     <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
                                          <li>
                                             <label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li>
                                             <label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li>
                                           <label for=quot;date-yearquot;>Year</label>
                                           <select id=quot;date-yearquot; name=quot;yearquot;>
                                             <option>2007</option>
                                             <option>2008</option>
                                           </select>
                                          </li>
                                        </ol>
                                      </fieldset>




     2007 A A RO N G U S TA F S O N          5 6/ 88                                 E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     body {
       background: #54af44;
        font: 62.5% quot;Lucida
        Sans Unicodequot;, quot;Lucida
        Grandequot;, sans-serif;
     }
     ol, ul, p, legend {
       font-size: 1.2em;              <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
       line-height: 1.5;                <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
     }                                       ...
                                          </li>
     legend {                             <li><label for=quot;date-monthquot;>Month</label>
                                             ...
       color: #000;                       </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
     }                                       ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          5 7/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date {
       border: 0;
       padding: 0;
     }
     .date ol {
       list-style: none;
       margin: 0 0 0 130px;
       padding: 0;                    <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
     }                                  <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
                                             ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          5 8/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date li {
       float: left;
     }




                                      <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
                                             ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          5 9/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date select {
       background: #e2efe0;
       margin: 0 .25em 0 0;
     }
     .date select:focus {
       background: #fff;
     }
                                      <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
                                             ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          6 0/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date label {
       position: absolute;
       left: -999em;
     }



                                      <fieldset class=quot;datequot;>
                                        <legend>Post Date</legend>
                                        <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
                                             ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          6 1/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                  AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date {
       border: 0;
       padding: 0;
       position: relative;
     }
     .date legend span {
       display: block;
       line-height: 1.6;              <fieldset class=quot;datequot;>

       text-align: right;               <legend><span>Post Date</span></legend>
                                        <ol>
       width: 120px;                      <li><label for=quot;date-dayquot;>Date</label>
                                             ...
       position: absolute;                </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
       top: 0;                               ...
                                          </li>
       left: 0;                           <li><label for=quot;date-yearquot;>Year</label>
                                             ...
     }                                    </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          6 2/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




            SIMPLE FORM:
            DATE SELECT



     .date legend
     span:after {
       content: quot;:quot;;
     }



                                      <fieldset class=quot;datequot;>
                                        <legend><span>Post Date</span></legend>
                                        <ol>
                                          <li><label for=quot;date-dayquot;>Date</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-monthquot;>Month</label>
                                             ...
                                          </li>
                                          <li><label for=quot;date-yearquot;>Year</label>
                                             ...
                                          </li>
                                        </ol>
                                      </fieldset>



     2007 A A RO N G U S TA F S O N          6 3/ 88                                  E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                              AN EVENT APART 2007




                                      MAKING
                                      THE MOST OF
                                      MESSAGES


     2007 A A RO N G U S TA F S O N       6 4/ 88            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                             AN EVENT APART 2007




                                      MESSAGING:
                                      REQUIRED




     2007 A A RO N G U S TA F S O N      6 5/ 88            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                       AN EVENT APART 2007




               MESSAGING:
               REQUIRED



     What is the * anyway?              <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                          <fieldset>
                                            <legend>Send us a message</legend>
     Well, it stands for something         <p>Required fields are marked
     else and in HTML, the closest to         <abbr title=quot;requiredquot;>*</abbr>.</p>
     that we have to convey that is        <ol>
                                             <li>
     the ABBR element.                          <label for=quot;contact-namequot;>
                                                 Name<abbr title=quot;requiredquot;>*</abbr>
                                               </label>
                                               <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
                                             </li>
                                             ...




     2007 A A RO N G U S TA F S O N           6 6/ 88                                             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




               MESSAGING:
               REQUIRED



     If you want to go all-           <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     out, you can                        <p>Required fields are marked
                                           <em><abbr title=quot;requiredquot;>*</abbr></em>.
     but that seems like overkill
                                         </p>
                                         <ol>
                                           <li class=quot;requiredquot;>
                                             <label for=quot;contact-namequot;>
                                                Name<em><abbr title=quot;requiredquot;>*
                                                </abbr></em>
                                             </label>
                                             <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
                                           </li>
                                           ...




     2007 A A RO N G U S TA F S O N         6 7/ 88                                             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               REQUIRED




                                      <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <p>Required fields are marked
                                             <abbr title=quot;requiredquot;>*</abbr>.</p>
                                          <ol>
                                            <li>
                                               <label for=quot;contact-namequot;>
                                                 Name<abbr title=quot;requiredquot;>*</abbr>
                                               </label>
                                               <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
                                            </li>
                                            ...




     2007 A A RO N G U S TA F S O N          6 8/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               REQUIRED



     abbr {
       cursor: help;
       font-style: normal;
       border: 0;
     }


                                      <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <p>Required fields are marked
                                             <abbr title=quot;requiredquot;>*</abbr>.</p>
                                          <ol>
                                            <li>
                                               <label for=quot;contact-namequot;>
                                                 Name<abbr title=quot;requiredquot;>*</abbr>
                                               </label>
                                               <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; />
                                            </li>
                                            ...




     2007 A A RO N G U S TA F S O N          6 9/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                             AN EVENT APART 2007




                                      MESSAGING:
                                      FORMATTING




     2007 A A RO N G U S TA F S O N      7 0/ 88            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                AN EVENT APART 2007




            MESSAGING:
            FORMATTING



     How should we                    ...
                                      <li>
                                        <label for=quot;contact-emailquot;>
     emphasize important                   Email<abbr title=quot;requiredquot;>*</abbr>
                                        </label>

     formatting info?
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
                                      </li>
                                      <li>
                                        <label for=quot;contact-phonequot;>
                                         Phone<em
                                          class=quot;msgquot;> format: 123-456-7890</em>
                                        </label>
                                        <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
                                      </li>
                                      <li>
                                        <label for=quot;contact-subjectquot;>
                                           Subject<abbr title=quot;requiredquot;>*</abbr>
                                        </label>
                                        <select id=quot;contact-subjectquot; name=quot;subjectquot;>
                                           <option value=quot;Errorquot;>I noticed a website error</option>
                                           ...




     2007 A A RO N G U S TA F S O N    7 1/ 88                                           E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            MESSAGING:
            FORMATTING




                                      ...
                                      <li>
                                        <label for=quot;contact-phonequot;>Phone<em
                                            class=quot;msgquot;> format: 123-456-7890</em></label>
                                        <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N    7 2/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            MESSAGING:
            FORMATTING



     label em.msg {
       font-size: .8em;
       font-style: normal;
       line-height: 2.5;
     }


                                      ...
                                      <li>
                                        <label for=quot;contact-phonequot;>Phone<em
                                            class=quot;msgquot;> format: 123-456-7890</em></label>
                                        <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N    7 3/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            MESSAGING:
            FORMATTING



     label{
       ...
       position: relative;
     }
     label em.msg {
       color: #aaa;
       font-size: .8em;
       font-style: normal;            ...
       line-height: 2.5;              <li>
                                        <label for=quot;contact-phonequot;>Phone<em
       position: absolute;                  class=quot;msgquot;> format: 123-456-7890</em></label>
                                        <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
       right: -266px;                 </li>
                                      ...
       top: 0;
     }



     2007 A A RO N G U S TA F S O N    7 4/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




            MESSAGING:
            FORMATTING




                                      ...
                                      <li>
                                        <label for=quot;contact-phonequot;>Phone<em
                                            class=quot;msgquot;> format: 123-456-7890</em></label>
                                        <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N    7 5/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                             AN EVENT APART 2007




                                      MESSAGING:
                                      ERRORS




     2007 A A RO N G U S TA F S O N      7 6/ 88            E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                               AN EVENT APART 2007




               MESSAGING:
               ERRORS


     How should we                    ...
                                      <li class=quot;errorquot;>
     strongly emphasize
                                        <label for=quot;contact-emailquot;>
                                          Email<abbr title=quot;requiredquot;>*</abbr>
                                            <strong class=quot;errquot;> You forgot to fill
     even more important                     in your email</strong>
     error advisories?
                                        </label>
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
                                      </li>
                                      ...



     How should we
     highlight the field?




     2007 A A RO N G U S TA F S O N    7 7/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               ERRORS




                                      ...
                                      <li class=quot;errorquot;>
                                        <label for=quot;contact-emailquot;>
                                          Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
                                          to fill in your email</strong>
                                        </label>
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N          7 8/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               ERRORS


     strong.err {
       color: #ffdfdf;
       display: block;
       padding-left: 5px;
       text-align: left;
     }

                                      ...
                                      <li class=quot;errorquot;>
                                        <label for=quot;contact-emailquot;>
                                          Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
                                          to fill in your email</strong>
                                        </label>
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N          7 9/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               ERRORS


     strong.err {
       color: #ffdfdf;
       display: block;
       line-height: 1.8;
       padding-left: 5px;
       text-align: left;
       white-space: nowrap;
       position: absolute;            ...
                                      <li class=quot;errorquot;>
       top: 0;                          <label for=quot;contact-emailquot;>
                                          Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
       left: 390px;                       to fill in your email</strong>
     }                                  </label>
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
     strong.err:before {              </li>
                                      ...
       content: quot;<quot;
     }


     2007 A A RO N G U S TA F S O N          8 0/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               ERRORS


     .error input {
       border: 2px solid #b00;
       background: #ffdfdf;
     }
     .error input:focus {
       background: #fff;
     }
                                      ...
                                      <li class=quot;errorquot;>
                                        <label for=quot;contact-emailquot;>
                                          Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot
                                          to fill in your email</strong>
                                        </label>
                                        <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; />
                                      </li>
                                      ...




     2007 A A RO N G U S TA F S O N          8 1/ 88                                          E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                     AN EVENT APART 2007




               MESSAGING:
               ERRORS


     How do we notify                 <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
     users of errors?                    <div id=quot;errorsquot;>
                                          <p>We encountered <strong>1 error</strong>
     It is best to be upfront about
                                           while trying to process this form:</p>
     errors encountered and to            <ol>
     say, in plain language, what           <li>You forgot to include <a
     the user needs to do to fix it           href=quot;#contact-emailquot;>your email
                                              address</a></li>
                                          </ol>
     and linking to the field with       </div>
     errors doesn't hurt                 <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
                                         ...




     2007 A A RO N G U S TA F S O N         8 2/ 88                                             E A S Y ! D E S I G N S , LLC
cc
LEARNING TO LOVE FORMS                                                      AN EVENT APART 2007




               MESSAGING:
               ERRORS




                                      <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <div id=quot;errorsquot;>
                                            <p>We encountered <strong>1 error</strong> while trying to process
                                              this form:</p>
                                            <ol>
                                              <li>You forgot to include <a href=quot;#contact-emailquot;>your email
                                                 address</a></li>
                                            </ol>
                                          </div>
                                          <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
                                          ...




     2007 A A RO N G U S TA F S O N          8 3/ 88                                          E A S Y ! D E S I G N S , LLC
cc
Learning To Love Forms (An Event Apart San Francisco '07)
Learning To Love Forms (An Event Apart San Francisco '07)
Learning To Love Forms (An Event Apart San Francisco '07)
Learning To Love Forms (An Event Apart San Francisco '07)
Learning To Love Forms (An Event Apart San Francisco '07)
Learning To Love Forms (An Event Apart San Francisco '07)

More Related Content

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?Paolo Missier
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 

Recently uploaded (20)

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 

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

  • 1. LEARNING TO LOVE FORMS AN EVENT APART 2007 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC cc
  • 2. LEARNING TO LOVE FORMS AN EVENT APART 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 2/88 E A S Y ! D E S I G N S , LLC cc
  • 3. LEARNING TO LOVE FORMS AN EVENT APART 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 3/88 E A S Y ! D E S I G N S , LLC cc
  • 4. LEARNING TO LOVE FORMS AN EVENT APART 2007 FORMS ARE A NECESSARY EVIL 2007 A A RO N G U S TA F S O N 4/88 E A S Y ! D E S I G N S , LLC cc
  • 5. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 5/88 E A S Y ! D E S I G N S , LLC cc
  • 6. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US FORM Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; establishes a form method=quot;postquot;> ACTION is the only required <!-- the rest of our form will go here --> attribute and should always </form> be a URI METHOD defaults to “get” NAME is depreciated; use ID instead 2007 A A RO N G U S TA F S O N 6/88 E A S Y ! D E S I G N S , LLC cc
  • 7. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> used to group related fields <legend>Send us a message</legend> <!-- the rest of our form will go here --> LEGEND Element </fieldset> </form> used to provide a caption for a FIELDSET 2007 A A RO N G U S TA F S O N 7/88 E A S Y ! D E S I G N S , LLC cc
  • 8. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Containing FORM <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> Controls <p><!-- form control --></p> <p><!-- form control --></p> <p><!-- form control --></p> P or DIV </fieldset> </form> sensible choices, but not very accurate (except in certain instances) <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> OL or UL <legend>Send us a message</legend> <ol> most forms are lists of <li><!-- form control --></li> <li><!-- form control --></li> questions or form controls, <li><!-- form control --></li> so these are better </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 8/88 E A S Y ! D E S I G N S , LLC cc
  • 9. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US INPUT Text Control <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> type=quot;textquot; is a basic text <ol> <li>Name input field <input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li> (also type=quot;passwordquot; for <li>Email <input type=quot;textquot; name=quot;emailquot; content you want hidden) id=quot;contact-emailquot; /></li> <li><!-- form control --></li> NAME vs. ID </ol> </fieldset> </form> NAME is for the back end ID is for the front end 2007 A A RO N G U S TA F S O N 9/88 E A S Y ! D E S I G N S , LLC cc
  • 10. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US TEXTAREA <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> a multiline text form control <ol> <li>Name <input type=quot;textquot; name=quot;namequot; id=quot;contact-namequot; /></li> <li>Email requires ROWS and COLS <input type=quot;textquot; name=quot;emailquot; id=quot;contact-emailquot; /></li> <li>Message attributes!!! <textarea name=quot;messagequot; id=quot;contact-messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 11. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Working with LABEL <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> this element provides to <ol> <li><label>Name means of associating its <input ... /></label></li> content with a form control: ... </ol> </fieldset> </form> implicit association LABEL wraps the form control and the text <form id=quot;contact-formquot; action=quot;/action-page.phpquot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> explicit association for=quot;contact-namequot;>Name</label> <li><label LABEL's FOR attribute is an <input id=quot;contact-namequot; ... /></li> ... ID reference to the form </ol> </fieldset> control </form> 2007 A A RO N G U S TA F S O N 1 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 12. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Buttons <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> trigger events in a form; use <ol> ... either INPUT or BUTTON </ol> <input type=quot;submitquot; value=quot;Goquot; /> element </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> reset – resets all form <ol> ... </ol> control values back to their <button type=quot;submitquot;>Go</button> defaults when the page </fieldset> </form> loaded 2007 A A RO N G U S TA F S O N 1 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 13. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIDEBAR: BUTTONS WINDOWS XP OS X INPUT BUTTON Mozilla IE 6/7 IE 6/7 Opera Safari Camino Firefox IE 5 Opera (XP) (classic) 2007 A A RO N G U S TA F S O N 1 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 14. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 15. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US body { font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p { <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> font-size: 1.2em; <fieldset> line-height: 1.5; <legend>Send us a message</legend> <ol> } <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 16. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US form, fieldset, legend { border: 0; padding: 0; margin: 0; } legend { font-size: 2em; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> } <fieldset> form ol, form ul { <legend>Send us a message</legend> <ol> list-style: none; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> margin: 0; <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> padding: 0; <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; } cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 17. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US form li { margin: 0 0 .75em; } label { display: block; } input, textarea { <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> width: 250px; <fieldset> } <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 18. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; float: left; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> line-height: 1.6; <legend>Send us a message</legend> <ol> margin-right: 10px; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> text-align: right; <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> width: 120px; <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; } cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 19. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } button { margin-left: 130px; cursor: pointer; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> } <legend>Send us a message</legend> <ol> <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; cols=quot;30quot;></textarea></li> </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 1 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 20. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US label:after { content: ':'; } input, textarea { background: #ddd; width: 250px; } input:focus, <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> textarea:focus { <legend>Send us a message</legend> <ol> background: #fff; <li><label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /></li> } <li><label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /></li> /* Some styles to get <li><label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; the baselines to cols=quot;30quot;></textarea></li> </ol> match & to unify the <button type=quot;submitquot;>Go</button> </fieldset> type used */ </form> 2007 A A RO N G U S TA F S O N 2 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 21. LEARNING TO LOVE FORMS AN EVENT APART 2007 body { label:after { font: 62.5% quot;Lucida Sans content: ':'; Unicodequot;, quot;Lucida Grandequot;, } sans-serif; input, textarea { SIMPLE FORM: } background: #ddd; ol, ul, p { font: 1em Arial, Helvetica, CONTACT US font-size: 1.2em; sans-serif; line-height: 1.5; padding: 1px 3px; } width: 250px; form, fieldset, legend { } border: 0; textarea { margin: 0; line-height: 1.3em; padding: 0; padding: 0 3px; } } legend { input:focus, textarea:focus { font-size: 2em; background: #fff; line-height: 1.8; } padding-bottom: .5em; button { } background: #ffd100; form ol, form ul { border: 2px outset #333; list-style: none; color: #333; margin: 0; cursor: pointer; padding: 0; font-size: .9em; } font-weight: bold; form li { letter-spacing: .3em; clear: both; margin-left: 130px; margin: 0 0 .75em; padding: .2em .5em; padding: 0; text-transform: uppercase; } } label { display: block; float: left; line-height: 1.6; margin-right: 10px; text-align: right; width: 120px; } 2007 A A RO N G U S TA F S O N 2 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 22. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 2 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 23. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US SELECTion Lists <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> allows selection of one or <ol> ... more OPTIONs <li><label for=quot;contact-subjectquot;>Subject</label> <select id=quot;contact-subjectquot; On OPTION elements, the name=quot;subjectquot;> VALUE attribute is optional <option value=quot;Errorquot;>I noticed a (contents are submitted by website error</option> <option value=quot;Questionquot;>I have a default) question</option> <option>Other</option> </select></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 2 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 24. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIDEBAR: OPTGROUPS <select id=quot;favorite-fruitquot; name=quot;favorite-fruitquot;> <optgroup label=quot;Applesquot;> <option value=quot;Golden Delicious Applesquot;>Golden Delicious</option> <option value=quot;Granny Smith Applesquot;>Granny Smith</option> <option value=quot;Macintosh Applesquot;>Macintosh</option> <option value=quot;Red Delicious Applesquot;>Red Delicious</option> </optgroup> <optgroup label=quot;Berriesquot;> <option>Blackberries</option> <option>Blueberries</option> <option>Raspberries</option> <option>Strawberries</option> </optgroup> </select> 2007 A A RO N G U S TA F S O N 2 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 25. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for=quot;contact-subjectquot;>Subject</label> <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> <option value=quot;Questionquot;>I have a question</option> <option>Other</option> </select></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 2 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 26. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US select { background: #ddd; width: 260px; /* width is *usually* the input width + input padding + 4px */ <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> } <fieldset> input:focus, <legend>Send us a message</legend> <ol> textarea:focus, ... <li><label for=quot;contact-subjectquot;>Subject</label> select:focus { <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> background: #fff; <option value=quot;Questionquot;>I have a question</option> <option>Other</option> } </select></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 2 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 27. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIDEBAR: SELECTS WINDOWS XP Mozilla IE 6/7 IE 6 Opera IE 7 (XP) (classic) (classic) OS X Camino Firefox Safari IE 5 Opera 2007 A A RO N G U S TA F S O N 2 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 28. LEARNING TO LOVE FORMS AN EVENT APART 2007 CUSTOM SELECTS FauxSelect code.google.com/p/ easy-designs/wiki/FauxSelect SELECT Something New easy-designs.net/articles/replaceSelect/ SELECT Something New Pt. 2 easy-designs.net/articles/replaceSelect2/ 2007 A A RO N G U S TA F S O N 2 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 29. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 2 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 30. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Nested FIELDSETs ... <li> a great way to organize radio <fieldset class=quot;radioquot;> <legend>I would prefer to be or checkbox groups contacted by</legend> <ul> The LEGEND is the question <li><label><input type=quot;radioquot; or statement name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; Lists organize the possible name=quot;methodquot; value=quot;phonequot; /> responses (OL or UL) phone</label></li> </ul> implicit LABELs provide an </fieldset> </li> easy way to style in IE6 ... 2007 A A RO N G U S TA F S O N 3 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 31. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> ... <li> <fieldset class=quot;radioquot;> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 3 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 32. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; } .radio label { <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> display: inline; ... width: auto; <li> <fieldset class=quot;radioquot;> margin: 0; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 3 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 33. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio { margin-left: 125px; } .radio ul { font-size: 1em; margin: .3em 0 0; } <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> .radio label:after { ... content: ''; <li> <fieldset class=quot;radioquot;> } <legend>I would prefer to be contacted by</legend> <ul> label input { <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> background: <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> transparent; </ul> </fieldset> width: auto; </li> ... } </form> 2007 A A RO N G U S TA F S O N 3 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 34. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio li { float: left; margin: 0; width: 48%; clear: none; } label input { width: auto; <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> ... position: relative; <li> <fieldset class=quot;radioquot;> top: 2px; <legend>I would prefer to be contacted by</legend> <ul> } <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 A A RO N G U S TA F S O N 3 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 35. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; max-width: 270px; width: 270px; } ... <fieldset class=quot;radioquot;> is an exceedingly long <legend>This <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</legend> <ul> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> ... 2007 A A RO N G U S TA F S O N 3 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 36. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class=quot;radioquot;> <legend><span>This is an exceedingly long <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</span></legend> <ul> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;emailquot; /> email</label></li> <li><label><input type=quot;radioquot; name=quot;methodquot; value=quot;phonequot; /> phone</label></li> </ul> </fieldset> ... 2007 A A RO N G U S TA F S O N 3 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 37. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 3 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 38. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US Confirmations <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> a little CLASSification goes a <ol> ... long way <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 3 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 39. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 3 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 40. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .confirm label { display: block; float: none; margin-left: 125px; text-align: left; width: 270px; } <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 4 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 41. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: CONTACT US .confirm { margin-bottom: 1.4em; } .radio label:after, .confirm label:after { content: ''; } <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Send us a message</legend> <ol> ... <li class=quot;confirmquot;> <input type=quot;hiddenquot; name=quot;mailing-listquot; value=quot;0quot; /> <label><input type=quot;checkboxquot; name=quot;mailing-listquot; value=quot;1quot; /> Please add me to your mailing list</label></li> ... </ol> <button type=quot;submitquot;>Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 4 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 42. LEARNING TO LOVE FORMS AN EVENT APART 2007 MORE FORMS OF FORMS 2007 A A RO N G U S TA F S O N 4 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 43. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX 2007 A A RO N G U S TA F S O N 4 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 44. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX POST vs. GET <form id=quot;search-formquot; action=quot;/action-page.phpquot; Search forms are traditionally method=quot;getquot;> GET requests to allow the action page (i.e. the results) <!-- the rest of our form will go here --> to be bookmarkable. </form> 2007 A A RO N G U S TA F S O N 4 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 45. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX You need something <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> Sometimes a FIELDSET is <!-- the rest of our form will go here --> unnecessary, but in XHTML, <p> </form> you need something to wrap the contents of a form 2007 A A RO N G U S TA F S O N 4 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 46. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX Easy-peasy <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> <p> </form> 2007 A A RO N G U S TA F S O N 4 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 47. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX It’s a BUTTON <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> <label for=quot;search-queryquot;>Search this site for</label> big shock, I know <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> <button type=quot;submitquot;>Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 4 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 48. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX body { background: #54af44; font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p { font-size: 1.2em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> line-height: 1.5; <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> } <button type=quot;submitquot;>Go</button> <p> </form> 2007 A A RO N G U S TA F S O N 4 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 49. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX label { line-height: 2em; } input { border: 1px solid #c00; background: #ebebeb; margin: 0 .5em; padding: 2px 4px; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> } <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> input:focus { <button type=quot;submitquot;>Go</button> <p> background: #fff; </form> } 2007 A A RO N G U S TA F S O N 4 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 50. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: SEARCH BOX button { background: #c00; border: 0; color: #fff; cursor: pointer; font-size: .9em; font-weight: bold; letter-spacing: .1em; <form id=quot;search-formquot; action=quot;/action-page.phpquot; method=quot;getquot;> <p> padding: 2px 8px; <label for=quot;search-queryquot;>Search this site for</label> <input type=quot;textquot; id=quot;search-queryquot; name=quot;queryquot; /> text-transform: <button type=quot;submitquot;>Go</button> <p> uppercase; </form> } 2007 A A RO N G U S TA F S O N 5 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 51. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT 2007 A A RO N G U S TA F S O N 5 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 52. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT Getting organized <fieldset class=quot;datequot;> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 5 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 53. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT Not really a LABEL <fieldset class=quot;datequot;> <legend>Post Date</legend> <!-- the rest will go here --> </fieldset> 2007 A A RO N G U S TA F S O N 5 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 54. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT Not just a SELECT <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> we need some LABELing <li> <label for=quot;date-dayquot;>Date</label> <select id=quot;date-dayquot; name=quot;dayquot;> <option>01</option> ... <option>31</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 55. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT And so on <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li> <label for=quot;date-dayquot;>Date</label> ... </li> <li> <label for=quot;date-monthquot;>Month</label> <select id=quot;date-monthquot; name=quot;monthquot;> <option value=quot;01quot;>January</option> ... <option value=quot;12quot;>December</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 56. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT And so forth <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li> <label for=quot;date-dayquot;>Date</label> ... </li> <li> <label for=quot;date-monthquot;>Month</label> ... </li> <li> <label for=quot;date-yearquot;>Year</label> <select id=quot;date-yearquot; name=quot;yearquot;> <option>2007</option> <option>2008</option> </select> </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 57. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT body { background: #54af44; font: 62.5% quot;Lucida Sans Unicodequot;, quot;Lucida Grandequot;, sans-serif; } ol, ul, p, legend { font-size: 1.2em; <fieldset class=quot;datequot;> <legend>Post Date</legend> line-height: 1.5; <ol> <li><label for=quot;date-dayquot;>Date</label> } ... </li> legend { <li><label for=quot;date-monthquot;>Month</label> ... color: #000; </li> <li><label for=quot;date-yearquot;>Year</label> } ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 58. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; } .date ol { list-style: none; margin: 0 0 0 130px; padding: 0; <fieldset class=quot;datequot;> <legend>Post Date</legend> } <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 59. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date li { float: left; } <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 5 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 60. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date select { background: #e2efe0; margin: 0 .25em 0 0; } .date select:focus { background: #fff; } <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 6 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 61. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date label { position: absolute; left: -999em; } <fieldset class=quot;datequot;> <legend>Post Date</legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 6 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 62. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date { border: 0; padding: 0; position: relative; } .date legend span { display: block; line-height: 1.6; <fieldset class=quot;datequot;> text-align: right; <legend><span>Post Date</span></legend> <ol> width: 120px; <li><label for=quot;date-dayquot;>Date</label> ... position: absolute; </li> <li><label for=quot;date-monthquot;>Month</label> top: 0; ... </li> left: 0; <li><label for=quot;date-yearquot;>Year</label> ... } </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 6 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 63. LEARNING TO LOVE FORMS AN EVENT APART 2007 SIMPLE FORM: DATE SELECT .date legend span:after { content: quot;:quot;; } <fieldset class=quot;datequot;> <legend><span>Post Date</span></legend> <ol> <li><label for=quot;date-dayquot;>Date</label> ... </li> <li><label for=quot;date-monthquot;>Month</label> ... </li> <li><label for=quot;date-yearquot;>Year</label> ... </li> </ol> </fieldset> 2007 A A RO N G U S TA F S O N 6 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 64. LEARNING TO LOVE FORMS AN EVENT APART 2007 MAKING THE MOST OF MESSAGES 2007 A A RO N G U S TA F S O N 6 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 65. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED 2007 A A RO N G U S TA F S O N 6 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 66. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED What is the * anyway? <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> Well, it stands for something <p>Required fields are marked else and in HTML, the closest to <abbr title=quot;requiredquot;>*</abbr>.</p> that we have to convey that is <ol> <li> the ABBR element. <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> ... 2007 A A RO N G U S TA F S O N 6 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 67. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED If you want to go all- <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> out, you can <p>Required fields are marked <em><abbr title=quot;requiredquot;>*</abbr></em>. but that seems like overkill </p> <ol> <li class=quot;requiredquot;> <label for=quot;contact-namequot;> Name<em><abbr title=quot;requiredquot;>* </abbr></em> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> ... 2007 A A RO N G U S TA F S O N 6 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 68. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> <ol> <li> <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> ... 2007 A A RO N G U S TA F S O N 6 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 69. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: REQUIRED abbr { cursor: help; font-style: normal; border: 0; } <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> <ol> <li> <label for=quot;contact-namequot;> Name<abbr title=quot;requiredquot;>*</abbr> </label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> ... 2007 A A RO N G U S TA F S O N 6 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 70. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING 2007 A A RO N G U S TA F S O N 7 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 71. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING How should we ... <li> <label for=quot;contact-emailquot;> emphasize important Email<abbr title=quot;requiredquot;>*</abbr> </label> formatting info? <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-phonequot;> Phone<em class=quot;msgquot;> format: 123-456-7890</em> </label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> <li> <label for=quot;contact-subjectquot;> Subject<abbr title=quot;requiredquot;>*</abbr> </label> <select id=quot;contact-subjectquot; name=quot;subjectquot;> <option value=quot;Errorquot;>I noticed a website error</option> ... 2007 A A RO N G U S TA F S O N 7 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 72. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 73. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING label em.msg { font-size: .8em; font-style: normal; line-height: 2.5; } ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 3/ 88 E A S Y ! D E S I G N S , LLC cc
  • 74. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING label{ ... position: relative; } label em.msg { color: #aaa; font-size: .8em; font-style: normal; ... line-height: 2.5; <li> <label for=quot;contact-phonequot;>Phone<em position: absolute; class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> right: -266px; </li> ... top: 0; } 2007 A A RO N G U S TA F S O N 7 4/ 88 E A S Y ! D E S I G N S , LLC cc
  • 75. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: FORMATTING ... <li> <label for=quot;contact-phonequot;>Phone<em class=quot;msgquot;> format: 123-456-7890</em></label> <input type=quot;textquot; id=quot;contact-phonequot; name=quot;phonequot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 5/ 88 E A S Y ! D E S I G N S , LLC cc
  • 76. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS 2007 A A RO N G U S TA F S O N 7 6/ 88 E A S Y ! D E S I G N S , LLC cc
  • 77. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS How should we ... <li class=quot;errorquot;> strongly emphasize <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr> <strong class=quot;errquot;> You forgot to fill even more important in your email</strong> error advisories? </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... How should we highlight the field? 2007 A A RO N G U S TA F S O N 7 7/ 88 E A S Y ! D E S I G N S , LLC cc
  • 78. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 8/ 88 E A S Y ! D E S I G N S , LLC cc
  • 79. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; padding-left: 5px; text-align: left; } ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... 2007 A A RO N G U S TA F S O N 7 9/ 88 E A S Y ! D E S I G N S , LLC cc
  • 80. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS strong.err { color: #ffdfdf; display: block; line-height: 1.8; padding-left: 5px; text-align: left; white-space: nowrap; position: absolute; ... <li class=quot;errorquot;> top: 0; <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot left: 390px; to fill in your email</strong> } </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> strong.err:before { </li> ... content: quot;<quot; } 2007 A A RO N G U S TA F S O N 8 0/ 88 E A S Y ! D E S I G N S , LLC cc
  • 81. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS .error input { border: 2px solid #b00; background: #ffdfdf; } .error input:focus { background: #fff; } ... <li class=quot;errorquot;> <label for=quot;contact-emailquot;> Email<abbr title=quot;requiredquot;>*</abbr><strong class=quot;errquot;> You forgot to fill in your email</strong> </label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> ... 2007 A A RO N G U S TA F S O N 8 1/ 88 E A S Y ! D E S I G N S , LLC cc
  • 82. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS How do we notify <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> users of errors? <div id=quot;errorsquot;> <p>We encountered <strong>1 error</strong> It is best to be upfront about while trying to process this form:</p> errors encountered and to <ol> say, in plain language, what <li>You forgot to include <a the user needs to do to fix it href=quot;#contact-emailquot;>your email address</a></li> </ol> and linking to the field with </div> errors doesn't hurt <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 8 2/ 88 E A S Y ! D E S I G N S , LLC cc
  • 83. LEARNING TO LOVE FORMS AN EVENT APART 2007 MESSAGING: ERRORS <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;> <fieldset> <legend>Send us a message</legend> <div id=quot;errorsquot;> <p>We encountered <strong>1 error</strong> while trying to process this form:</p> <ol> <li>You forgot to include <a href=quot;#contact-emailquot;>your email address</a></li> </ol> </div> <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p> ... 2007 A A RO N G U S TA F S O N 8 3/ 88 E A S Y ! D E S I G N S , LLC cc