SlideShare a Scribd company logo
1 of 67
Download to read offline
LEARNING TO LOVE FORMS                THE AJAX EXPERIENCE 2007




cc   2007 A A RO N G U S TA F S O N                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                 THE AJAX EXPERIENCE 2007




                                      AARON GUSTAFSON
                                      EASY! DESIGNS, LLC




cc   2007 A A RO N G U S TA F S O N          2/67                    E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                           THE AJAX EXPERIENCE 2007




                                      FORMS ARE
                                      A NECESSARY

                                      EVIL
cc   2007 A A RO N G U S TA F S O N       3/67                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                               THE AJAX EXPERIENCE 2007




                                      SIMPLE FORM:
                                      CONTACT US




cc   2007 A A RO N G U S TA F S O N       4/67                     E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                   THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

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

     METHOD defaults to “get”

     NAME is depreciated; use ID
     instead



cc   2007 A A RO N G U S TA F S O N       5/67                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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




cc   2007 A A RO N G U S TA F S O N             6/67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

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

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

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

cc   2007 A A RO N G U S TA F S O N          7/67                                             E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

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




cc   2007 A A RO N G U S TA F S O N          8/67                                         E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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




cc   2007 A A RO N G U S TA F S O N          9/67                                             E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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



cc   2007 A A RO N G U S TA F S O N          1 0/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


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

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

cc   2007 A A RO N G U S TA F S O N          1 1/ 67                                      E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                                     THE AJAX EXPERIENCE 2007




                                                      SIDEBAR:
                                                      BUTTONS

                                  WINDOWS XP                                  OS X

                                                      INPUT

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




cc   2007 A A RO N G U S TA F S O N                     1 2/ 67                                E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                       THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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




cc   2007 A A RO N G U S TA F S O N        1 3/ 67                               E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          1 4/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

                                          <button type=quot;submitquot;>Go</button>
                                        </fieldset>
                                      </form>


cc   2007 A A RO N G U S TA F S O N          1 5/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          1 6/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          1 7/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          1 8/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

        match & to unify the              <button type=quot;submitquot;>Go</button>
                                        </fieldset>
        type used */                  </form>


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

cc   2007 A A RO N G U S TA F S O N          2 0/ 67                                   E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                               THE AJAX EXPERIENCE 2007




                                      SIMPLE FORM:
                                      CONTACT US




cc   2007 A A RO N G U S TA F S O N       2 1/ 67                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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




cc   2007 A A RO N G U S TA F S O N          2 2/ 67                                      E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                                           THE AJAX EXPERIENCE 2007




                                                     SIDEBAR:
                                                     SELECTS

                                                    WINDOWS XP



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




                                                         OS X



                                      Safari    Camino    Firefox      IE 5       Opera




cc   2007 A A RO N G U S TA F S O N                      2 3/ 67                               E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US




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

cc   2007 A A RO N G U S TA F S O N          2 4/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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

cc   2007 A A RO N G U S TA F S O N          2 5/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                                THE AJAX EXPERIENCE 2007




                                                    CUSTOM
                                                    SELECTS

                                                     FauxSelect

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




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

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


cc   2007 A A RO N G U S TA F S O N                     2 6/ 67                     E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                               THE AJAX EXPERIENCE 2007




                                      SIMPLE FORM:
                                      CONTACT US




cc   2007 A A RO N G U S TA F S O N       2 7/ 67                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                               THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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




cc   2007 A A RO N G U S TA F S O N    2 8/ 67                       E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US




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


cc   2007 A A RO N G U S TA F S O N          2 9/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          3 0/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          3 1/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N          3 2/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                           THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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


cc   2007 A A RO N G U S TA F S O N       3 3/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                        THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
             CONTACT US



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



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



cc   2007 A A RO N G U S TA F S O N    3 4/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                               THE AJAX EXPERIENCE 2007




                                      SIMPLE FORM:
                                      DATE SELECT




cc   2007 A A RO N G U S TA F S O N       3 5/ 67                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                   THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



     Getting organized                <fieldset class=quot;datequot;>

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

                                      </fieldset>




cc   2007 A A RO N G U S TA F S O N       3 6/ 67                       E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                          THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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

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




cc   2007 A A RO N G U S TA F S O N          3 7/ 67                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                               THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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




cc   2007 A A RO N G U S TA F S O N          3 8/ 67                               E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                               THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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




cc   2007 A A RO N G U S TA F S O N          3 9/ 67                               E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                               THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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




cc   2007 A A RO N G U S TA F S O N          4 0/ 67                                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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



cc   2007 A A RO N G U S TA F S O N          4 1/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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



cc   2007 A A RO N G U S TA F S O N          4 2/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



     .date li {
       float: left;
     }




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



cc   2007 A A RO N G U S TA F S O N          4 3/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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



cc   2007 A A RO N G U S TA F S O N          4 4/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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



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



cc   2007 A A RO N G U S TA F S O N          4 5/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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

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



cc   2007 A A RO N G U S TA F S O N          4 6/ 67                                      E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




            SIMPLE FORM:
            DATE SELECT



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



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



cc   2007 A A RO N G U S TA F S O N          4 7/ 67                                  E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                              THE AJAX EXPERIENCE 2007




                                      MAKING
                                      THE MOST OF
                                      MESSAGES


cc   2007 A A RO N G U S TA F S O N       4 8/ 67                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                             THE AJAX EXPERIENCE 2007




                                      MESSAGING:
                                      REQUIRED




cc   2007 A A RO N G U S TA F S O N      4 9/ 67                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                                THE AJAX EXPERIENCE 2007




               MESSAGING:
               REQUIRED



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




cc   2007 A A RO N G U S TA F S O N           5 0/ 67                                             E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               REQUIRED



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




cc   2007 A A RO N G U S TA F S O N         5 1/ 67                                             E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                               THE AJAX EXPERIENCE 2007




               MESSAGING:
               REQUIRED




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




cc   2007 A A RO N G U S TA F S O N          5 2/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                               THE AJAX EXPERIENCE 2007




               MESSAGING:
               REQUIRED



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


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




cc   2007 A A RO N G U S TA F S O N          5 3/ 67                                           E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                             THE AJAX EXPERIENCE 2007




                                      MESSAGING:
                                      ERRORS




cc   2007 A A RO N G U S TA F S O N      5 4/ 67                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                        THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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



     How should we
     highlight the field?




cc   2007 A A RO N G U S TA F S O N    5 5/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS




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




cc   2007 A A RO N G U S TA F S O N          5 6/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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

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




cc   2007 A A RO N G U S TA F S O N          5 7/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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


cc   2007 A A RO N G U S TA F S O N          5 8/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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




cc   2007 A A RO N G U S TA F S O N          5 9/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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




cc   2007 A A RO N G U S TA F S O N         6 0/ 67                                             E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS




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




cc   2007 A A RO N G U S TA F S O N          6 1/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


     #errors {
       background: #ffdfdf;
       border: 2px solid #b00;
       color: #333;
       margin: .5em 0 1em;
       padding: 10px;
     }
                                      <form id=quot;contact-formquot; action=quot;test.phpquot; method=quot;getquot;>
                                        <fieldset>
                                          <legend>Send us a message</legend>
                                          <div id=quot;errorsquot;>
                                            <p>We encountered <strong>1 error</strong> while trying to process
                                              this form:</p>
                                            <ol>
                                              <li>You forgot to include <a href=quot;#contact-emailquot;>your email
                                                 address</a></li>
                                            </ol>
                                          </div>
                                          <p>Required fields are marked <abbr title=quot;requiredquot;>*</abbr>.</p>
                                          ...




cc   2007 A A RO N G U S TA F S O N          6 2/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


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




cc   2007 A A RO N G U S TA F S O N          6 3/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                              THE AJAX EXPERIENCE 2007




               MESSAGING:
               ERRORS


     #errors a {
       color: #b00;
     }




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




cc   2007 A A RO N G U S TA F S O N          6 4/ 67                                          E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                      THE AJAX EXPERIENCE 2007




                                          PARTING
                                          ADVICE



     •treat forms like any other piece of (X)HTML

     •be aware of browser inconsistencies & make accommodations (when possible)

     •break a complex form into bite-size chunks

     •look for ways to provide richer meaning/a better experience

     •apply your CSS layout knowledge for the rest of the page to a form

     •don't over-complicate form design

     •learn to love forms

cc   2007 A A RO N G U S TA F S O N          6 5/ 67                       E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                              THE AJAX EXPERIENCE 2007




                                      FORMS ARE

                                      NOT
                                      NECESSARILY

                                      EVIL
cc   2007 A A RO N G U S TA F S O N       6 6/ 67                 E A S Y ! D E S I G N S , LLC
LEARNING TO LOVE FORMS                                       THE AJAX EXPERIENCE 2007




                                  http://slideshare.net/AaronGustafson

cc   2007 A A RO N G U S TA F S O N                                        E A S Y ! D E S I G N S , LLC

More Related Content

Similar to Learning To Love Forms [The Ajax Experience East 2007]

Cordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingCordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingBinu Paul
 
Falling in Love with Forms [Accessibility Summit 2014]
Falling in Love with Forms [Accessibility Summit 2014]Falling in Love with Forms [Accessibility Summit 2014]
Falling in Love with Forms [Accessibility Summit 2014]Aaron Gustafson
 
Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Shashikant Bhongale
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processorsdhoman
 

Similar to Learning To Love Forms [The Ajax Experience East 2007] (6)

Rails <form> Chronicle
Rails <form> ChronicleRails <form> Chronicle
Rails <form> Chronicle
 
Cordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingCordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processing
 
Falling in Love with Forms [Accessibility Summit 2014]
Falling in Love with Forms [Accessibility Summit 2014]Falling in Love with Forms [Accessibility Summit 2014]
Falling in Love with Forms [Accessibility Summit 2014]
 
Capstone Website Code
Capstone Website CodeCapstone Website Code
Capstone Website Code
 
Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16Angular js form validation shashi-19-7-16
Angular js form validation shashi-19-7-16
 
LESS CSS Processor
LESS CSS ProcessorLESS CSS Processor
LESS CSS Processor
 

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

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
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024TopCSSGallery
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationZilliz
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKUXDXConf
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfEasyPrinterHelp
 
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
 

Recently uploaded (20)

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
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
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
 

Learning To Love Forms [The Ajax Experience East 2007]

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