Learning To Love Forms (WebVisions '07)

Slide 1: LEARNING TO LOVE FORMS WEBVISIONS 2007 2007 A A RO N G U S TA F S O N E A S Y ! D E S I G N S , LLC cc

Slide 2: LEARNING TO LOVE FORMS WEBVISIONS 2007 AARON GUSTAFSON EASY! DESIGNS, LLC 2007 A A RO N G U S TA F S O N 2/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 3: LEARNING TO LOVE FORMS WEBVISIONS 2007 FORMS ARE A NECESSARY EVIL 2007 A A RO N G U S TA F S O N 3/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 4: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US 2007 A A RO N G U S TA F S O N 4/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 5: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FORM Element <form id="contact-form" action="/action-page.php" establishes a form method="post"> ACTION is the only required <!-- the rest of our form will go here --> attribute and should always </form> be a URI METHOD defaults to “get” NAME is depreciated; use ID instead 2007 A A RO N G U S TA F S O N 5/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 6: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US FIEDSET Element <form id="contact-form" action="/action-page.php" method="post"> <fieldset> used to group related fields <legend>Send us a message</legend> <!-- the rest of our form will go here --> LEGEND Element </fieldset> </form> used to provide a caption for a FIELDSET 2007 A A RO N G U S TA F S O N 6/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 7: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Containing FORM <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> Controls <p><!-- form control --></p> <p><!-- form control --></p> <p><!-- form control --></p> P or DIV </fieldset> </form> sensible choices, but not very accurate (except in certain instances) <form id="contact-form" action="/action-page.php" method="post"> <fieldset> OL or UL <legend>Send us a message</legend> <ol> most forms are lists of <li><!-- form control --></li> <li><!-- form control --></li> questions or form controls, <li><!-- form control --></li> so these are better </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 7/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 8: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US INPUT Text Control <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> type="name" is a basic text <ol> <li>Name input field <input type="text" name="name" id="contact-name" /></li> (also type="password" for <li>Email <input type="text" name="email" content you want encrypted) id="contact-email" /></li> <li><!-- form control --></li> NAME vs. ID </ol> </fieldset> </form> NAME is for the back end ID is for the front end 2007 A A RO N G U S TA F S O N 8/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 9: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US TEXTAREA <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> a multiline text form control <ol> <li>Name <input type="text" name="name" id="contact-name" /></li> <li>Email requires ROWS and COLS <input type="text" name="email" id="contact-email" /></li> <li>Message attributes!!! <textarea name="message" id="contact-message" rows="4" cols="30"></textarea></li> </ol> </fieldset> </form> 2007 A A RO N G U S TA F S O N 9/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 10: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Working with LABEL <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> this element provides to <ol> <li><label>Name means of associating its <input ... /></label></li> content with a form control: ... </ol> </fieldset> </form> implicit association LABEL wraps the form control and the text <form id="contact-form" action="/action-page.php" method="post"> <fieldset> <legend>Send us a message</legend> <ol> explicit association for="contact-name">Name</label> <li><label LABEL's FOR attribute is an <input id="contact-name" ... /></li> ... ID reference to the form </ol> </fieldset> control </form> 2007 A A RO N G U S TA F S O N 10/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 11: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US Buttons <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> trigger events in a form; use <ol> ... either INPUT or BUTTON </ol> <input type="submit" value="Go" /> element </fieldset> </form> Common TYPEs submit – submits the form; default button type <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> reset – resets all form <ol> ... </ol> control values back to their <button type="submit">Go</button> defaults when the page </fieldset> </form> loaded 2007 A A RO N G U S TA F S O N 11/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 12: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US <form id="contact-form" action="#" method="post"> <fieldset> <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 12/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 13: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US body { font: 62.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ol, ul, p { <form id="contact-form" action="#" method="post"> font-size: 1.2em; <fieldset> line-height: 1.5; <legend>Send us a message</legend> <ol> } <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 13/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 14: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form, fieldset, legend { border: 0; padding: 0; margin: 0; } legend { font-size: 2em; <form id="contact-form" action="#" method="post"> } <fieldset> form ol, form ul { <legend>Send us a message</legend> <ol> list-style: none; <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> margin: 0; <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> padding: 0; <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" } cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 14/ 75 E A S Y ! D E S I G N S , LLC cc

Slide 15: LEARNING TO LOVE FORMS WEBVISIONS 2007 SIMPLE FORM: CONTACT US form li { margin: 0 0 .75em; } label { display: block; } input, textarea { <form id="contact-form" action="#" method="post"> width: 250px; <fieldset> } <legend>Send us a message</legend> <ol> <li><label for="contact-name">Name</label> <input type="text" id="contact-name" name="name" /></li> <li><label for="contact-email">Email</label> <input type="text" id="contact-email" name="email" /></li> <li><label for="contact-message">Message</label> <textarea id="contact-message" name="message" rows="4" cols="30"></textarea></li> </ol> <button type="submit">Go</button> </fieldset> </form> 2007 A A RO N G U S TA F S O N 15/ 75 E A S Y ! D E S I G N S , LLC cc

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