1 / 102

Learning To Love Forms (The Ajax Experience West 2007)

Forms are the central component of most websites and all web applications, yet few people take the time to build them correctly. Getting it right could mean the difference between people finding your site or application useful and them leaving disappointed with the experience. In this session, design expert Aaron Gustafson explores forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You will learn:<br><br>• Basic form building blocks;<br>• Markup for common form components;<br>• Error, warning, and formatting messages;<br>• Form styling and its implications;<br>• Browser oddities with certain form controls;<br>• Best practices for form manipulation with JavaScript and Ajax.

AaronGustafson
Download Presentation

Learning To Love Forms (The Ajax Experience West 2007)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 2007 AARON GUSTAFSON AARON GUSTAFSON EASY! DESIGNS EASY! DESIGNS, LLC cc

  2. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 AARON GUSTAFSON AARON GUSTAFSON 2 2/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  3. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 FORMS ARE A NECESSARY EVIL EVIL 2007 AARON GUSTAFSON AARON GUSTAFSON 3 3/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  4. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US 2007 AARON GUSTAFSON AARON GUSTAFSON 4 4/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  5. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US FORM Element establishes a form <form id="contact-form" action="/action-page.php" method="post"> ACTION is the only required attribute and should always be a URI <!-- the rest of our form will go here --> </form> METHOD defaults to “get” NAME is depreciated; use ID instead 2007 AARON GUSTAFSON AARON GUSTAFSON 5 5/102 EASY! DESIGNS, LLC EASY! DESIGNS cc

  6. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US FIEDSET Element used to group related fields <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <!-- the rest of our form will go here --> LEGEND Element used to provide a caption for a FIELDSET </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 6 6/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  7. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US Containing FORM Controls <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <p><!-- form control --></p> <p><!-- form control --></p> <p><!-- form control --></p> </fieldset> </form> P or DIV sensible choices, but not very accurate (except in certain instances) <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><!-- form control --></li> <li><!-- form control --></li> <li><!-- form control --></li> </ol> </fieldset> </form> OL or UL most forms are lists of questions or form controls, so these are better 2007 AARON GUSTAFSON AARON GUSTAFSON 7 7/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  8. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US INPUT Text Control type="name" is a basic text input field <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li>Name <input type="text" name="name" id="contact-name" /></li> <li>Email <input type="text" name="email" id="contact-email" /></li> <li><!-- form control --></li> </ol> </fieldset> </form> (also type="password" for content you want hidden) NAME vs. ID NAME is for the back end ID is for the front end 2007 AARON GUSTAFSON AARON GUSTAFSON 8 8/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  9. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US TEXTAREA a multiline text form control <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li>Name <input type="text" name="name" id="contact-name" /></li> <li>Email <input type="text" name="email" id="contact-email" /></li> <li>Message <textarea name="message" id="contact-message" rows="4" cols="30"></textarea></li> </ol> </fieldset> </form> requires ROWS and COLS attributes!!! 2007 AARON GUSTAFSON AARON GUSTAFSON 9 9/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  10. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US Working with LABEL this element provides to means of associating its content with a form control: <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label>Name <input ... /></label></li> ... </ol> </fieldset> </form> implicit association LABEL wraps the form control and the text <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input id="contact-name" ... /></li> ... </ol> </fieldset> </form> explicit association LABEL's FOR attribute is an ID reference to the form control 2007 AARON GUSTAFSON AARON GUSTAFSON 10 10/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  11. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US Buttons trigger events in a form; use either INPUT or BUTTON element <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... </ol> <input type="submit" value="Go" /> </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... </ol> <button type="submit">Go</button> </fieldset> </form> reset – resets all form control values back to their defaults when the page loaded 2007 AARON GUSTAFSON AARON GUSTAFSON 11 11/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  12. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 12 12/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  13. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US body { font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { font-size: 1.2em; line-height: 1.5; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 13 13/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  14. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US form, fieldset, legend { border: 0; padding: 0; margin: 0; } legend { font-size: 2em; } form ol, form ul { list-style: none; margin: 0; padding: 0; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 14 14/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  15. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US form li { margin: 0 0 .75em; } label { display: block; } input, textarea { width: 250px; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 15 15/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  16. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; float: left; line-height: 1.6; margin-right: 10px; text-align: right; width: 120px; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 16 16/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  17. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } button { margin-left: 130px; cursor: pointer; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 17 17/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  18. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US label:after { content: ':'; } input, textarea { background: #ddd; width: 250px; } input:focus, textarea:focus { background: #fff; } /* Some styles to get the baselines to match & to unify the type used */ <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 18 18/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  19. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIDEBAR: BUTTONS BUTTONS WINDOWS XP WINDOWS XP OS X OS X INPUT BUTTON Mozilla IE 6/7 (XP) IE 6/7 (classic) Opera Safari Camino Firefox IE 5 Opera 2007 AARON GUSTAFSON AARON GUSTAFSON 19/102 19 EASY! DESIGNS EASY! DESIGNS, LLC cc

  20. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 body { font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { font-size: 1.2em; line-height: 1.5; } form, fieldset, legend { border: 0; margin: 0; padding: 0; } legend { font-size: 2em; line-height: 1.8; padding-bottom: .5em; } form ol, form ul { list-style: none; margin: 0; padding: 0; } form li { clear: both; margin: 0 0 .75em; padding: 0; } label { display: block; float: left; line-height: 1.6; margin-right: 10px; text-align: right; width: 120px; } label:after { content: ':'; } input, textarea { background: #ddd; font: 1em Arial, Helvetica, sans-serif; padding: 1px 3px; width: 250px; } textarea { line-height: 1.3em; padding: 0 3px; } input:focus, textarea:focus { background: #fff; } button { background: #ffd100; border: 2px outset #333; color: #333; cursor: pointer; font-size: .9em; font-weight: bold; letter-spacing: .3em; margin-left: 130px; padding: .2em .5em; text-transform: uppercase; } SIMPLE FORM: CONTACT US CONTACT US 2007 AARON GUSTAFSON AARON GUSTAFSON 20 20/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  21. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US 2007 AARON GUSTAFSON AARON GUSTAFSON 21 21/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  22. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US SELECTion Lists allows selection of one or more OPTIONs <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for="contact-subject">Subject</label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> <option value="Question">I have a question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> On OPTION elements, the VALUE attribute is optional (contents are submitted by default) 2007 AARON GUSTAFSON AARON GUSTAFSON 22/102 22 EASY! DESIGNS EASY! DESIGNS, LLC cc

  23. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 S I D E B A R : OPTGROUPS OPTGROUPS <select id="favorite-fruit" name="favorite-fruit"> <optgroup label="Apples"> <option value="Golden Delicious Apples">Golden Delicious</option> <option value="Granny Smith Apples">Granny Smith</option> <option value="Macintosh Apples">Macintosh</option> <option value="Red Delicious Apples">Red Delicious</option> </optgroup> <optgroup label="Berries"> <option>Blackberries</option> <option>Blueberries</option> <option>Raspberries</option> <option>Strawberries</option> </optgroup> </select> 2007 AARON GUSTAFSON AARON GUSTAFSON 23 23/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  24. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for="contact-subject">Subject</label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> <option value="Question">I have a question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 24 24/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  25. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US select { background: #ddd; width: 260px; /* width is *usually* the input width + input padding + 4px */ } input:focus, textarea:focus, select:focus { background: #fff; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li><label for="contact-subject">Subject</label> <select id="contact-subject" name="subject"> <option value="Error">I noticed a website error</option> <option value="Question">I have a question</option> <option>Other</option> </select></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 25 25/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  26. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIDEBAR: SELECTS SELECTS WINDOWS XP WINDOWS XP Mozilla IE 6/7 (XP) IE 6 Opera IE 7 (classic) (classic) OS X OS X Camino Firefox Safari IE 5 Opera 2007 AARON GUSTAFSON AARON GUSTAFSON 26 26/102 EASY! DESIGNS, LLC EASY! DESIGNS cc

  27. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US 2007 AARON GUSTAFSON AARON GUSTAFSON 27 27/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  28. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US Nested FIELDSETs a great way to organize radio or checkbox groups ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... The LEGEND is the question or statement Lists organize the possible responses (OL or UL) implicit LABELs provide an easy way to style in IE6 2007 AARON GUSTAFSON AARON GUSTAFSON 28 28/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  29. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 29 29/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  30. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; } .radio label { display: inline; width: auto; margin: 0; } <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 30 30/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  31. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .radio { margin-left: 125px; } .radio ul { font-size: 1em; margin: .3em 0 0; } .radio label:after { content: ''; } label input { background: transparent; width: auto; } <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 31 31/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  32. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .radio li { float: left; margin: 0; width: 48%; clear: none; } label input { width: auto; position: relative; top: 2px; } <form id="contact-form" action="#" method="post"> ... <li> <fieldset class="radio"> <legend>I would prefer to be contacted by</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> </li> ... </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 32 32/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  33. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .radio legend { font-size: 1em; line-height: 1.5; padding: 0 0 0 6px; margin: 0; max-width: 270px; width: 270px; } ... <fieldset class="radio"> <legend>This is an exceedingly long <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> ... 2007 AARON GUSTAFSON AARON GUSTAFSON 33 33/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  34. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .radio legend span { display: block; width: 270px; } ... <fieldset class="radio"> <legend><span>This is an exceedingly long <code>LEGEND</code> to demonstrate the odd behavior of <code>LEGEND</code>s</span></legend> <ul> <li><label><input type="radio" name="method" value="email" /> email</label></li> <li><label><input type="radio" name="method" value="phone" /> phone</label></li> </ul> </fieldset> ... 2007 AARON GUSTAFSON AARON GUSTAFSON 34 34/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  35. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US 2007 AARON GUSTAFSON AARON GUSTAFSON 35 35/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  36. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US Confirmations a little CLASSification goes a long way <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 36 36/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  37. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 37 37/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  38. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .confirm label { display: block; float: none; margin-left: 125px; text-align: left; width: 270px; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 38 38/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  39. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: CONTACT US CONTACT US .confirm { margin-bottom: 1.4em; } .radio label:after, .confirm label:after { content: ''; } <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> ... <li class="confirm"> <input type="hidden" name="mailing-list" value="0" /> <label><input type="checkbox" name="mailing-list" value="1" /> Please add me to your mailing list</label></li> ... </ol> <button type="submit">Go</button> </fieldset> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 39 39/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  40. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 MORE FORMS MORE FORMS FORMSOF 2007 AARON GUSTAFSON AARON GUSTAFSON 40 40/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  41. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX 2007 AARON GUSTAFSON AARON GUSTAFSON 41 41/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  42. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX POST vs. GET Search forms are traditionally GET requests to allow the action page (i.e. the results) to be bookmarkable. <form id="search-form" action="/action-page.php" method="get"> <!-- the rest of our form will go here --> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 42/102 42 EASY! DESIGNS, LLC EASY! DESIGNS cc

  43. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX You need something Sometimes a FIELDSET is unnecessary, but in XHTML, you need something to wrap the contents of a form <form id="search-form" action="/action-page.php" method="get"> <p> <!-- the rest of our form will go here --> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 43 43/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  44. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX Easy-peasy <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 44 44/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  45. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX It’s a BUTTON big shock, I know <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 45 45/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  46. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX body { background: #54af44; font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { font-size: 1.2em; line-height: 1.5; } <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 46 46/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  47. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX label { line-height: 2em; } input { border: 1px solid #c00; background: #ebebeb; margin: 0 .5em; padding: 2px 4px; } input:focus { background: #fff; } <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 47 47/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  48. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: SEARCH BOX SEARCH BOX button { background: #c00; border: 0; color: #fff; cursor: pointer; font-size: .9em; font-weight: bold; letter-spacing: .1em; padding: 2px 8px; text-transform: uppercase; } <form id="search-form" action="/action-page.php" method="get"> <p> <label for="search-query">Search this site for</label> <input type="text" id="search-query" name="query" /> <button type="submit">Go</button> <p> </form> 2007 AARON GUSTAFSON AARON GUSTAFSON 48 48/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  49. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT DATE SELECT 2007 AARON GUSTAFSON AARON GUSTAFSON 49 49/102 EASY! DESIGNS EASY! DESIGNS, LLC cc

  50. LEARNING LEARNING TO LOVE FORMS FORMS THE AJAX EXPERIENCE AJAX EXPERIENCE 2007 SIMPLE FORM: DATE SELECT DATE SELECT Getting organized <fieldset class="date"> <!-- the rest will go here --> </fieldset> 2007 AARON GUSTAFSON AARON GUSTAFSON 50/102 50 EASY! DESIGNS, LLC EASY! DESIGNS cc

More Related