falling in love with forms - aaron-gustafson.com · falling in love with forms pattern 1: label...
TRANSCRIPT
![Page 1: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/1.jpg)
FALLING IN LOVE WITH
FORMSAaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
![Page 2: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/2.jpg)
Forms suck.
![Page 3: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/3.jpg)
They are incredibly tedious to create.
![Page 4: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/4.jpg)
They are undeniablyannoying to fill in.
![Page 5: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/5.jpg)
They can be frustrating to test.
![Page 6: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/6.jpg)
They require logic.
![Page 7: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/7.jpg)
Forms suck.
![Page 8: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/8.jpg)
Forms suck.can
![Page 9: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/9.jpg)
Forms suck.don’t have to
![Page 10: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/10.jpg)
Forms suck.can
a lot less
![Page 11: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/11.jpg)
Forms can be… easy to build predictable
effortless to use and accessible
![Page 12: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/12.jpg)
It’s all in how you look at them.
![Page 13: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/13.jpg)
HELPFUL HINT
Break large,complex forms into
smaller, simpler, reusable patterns
![Page 15: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/15.jpg)
How about acommon example?
Let’s lookat a contact form.
![Page 18: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/18.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input type=“text” name=“full_name”>
![Page 19: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/19.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”>
![Page 20: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/20.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”/>
![Page 21: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/21.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
Your Name <input name=“full_name”>
![Page 22: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/22.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label>Your Name</label> <input name=“full_name”>
![Page 23: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/23.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
![Page 24: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/24.jpg)
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
![Page 25: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/25.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 26: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/26.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 27: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/27.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 28: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/28.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 29: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/29.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 30: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/30.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 31: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/31.jpg)
Browsers ignore what they don’t
understand
![Page 32: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/32.jpg)
Progressive Enhancement
![Page 33: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/33.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em> We will only use your email address to respond to your message. </em>
![Page 34: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/34.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em class=“note”> We will only use your email address to respond to your message. </em>
![Page 35: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/35.jpg)
FALLING IN LOVE WITH FORMS
Pattern 2: Label, Field & Note
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em>
![Page 36: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/36.jpg)
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“subject”>Purpose of Your Message</label> <select id="subject" name="subject"> <option>Question/Comment</option> <option>Article Error</option> <option>Website Bug Report</option> <option>Ask the Sherpas a question</option> </select>
![Page 37: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/37.jpg)
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
![Page 38: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/38.jpg)
FALLING IN LOVE WITH FORMS
Buttons
<input type=“submit” value=“Send My Message”>
![Page 39: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/39.jpg)
FALLING IN LOVE WITH FORMS
Buttons
<button type=“submit”>Send My Message</button>
![Page 40: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/40.jpg)
HELPFUL HINT
A button element can contain pretty
much anything (within reason)
![Page 41: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/41.jpg)
FALLING IN LOVE WITH FORMS
Buttons
<button type="submit" value=“basic"> <h3>Basic Plan</h3> <p>You get 20 <abbr title="gigabytes">GB</abbr> of storage and a single domain name for <strong>$2.99 <abbr title=“per month”>/mo</abbr></strong></p> </button>
![Page 42: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/42.jpg)
That new email field looks cool, can we see more of that
fancy HTML5 stuff?
![Page 43: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/43.jpg)
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 44: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/44.jpg)
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 45: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/45.jpg)
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 46: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/46.jpg)
FALLING IN LOVE WITH FORMS
Requesting URLs
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 47: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/47.jpg)
FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 48: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/48.jpg)
HELPFUL HINT
Placeholders are just that: placeholders for actual content.
They are not labels!
![Page 49: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/49.jpg)
FALLING IN LOVE WITH FORMS
Providing hints
<label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>
![Page 50: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/50.jpg)
FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >
![Page 51: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/51.jpg)
FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >
![Page 52: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/52.jpg)
FALLING IN LOVE WITH FORMS
Requesting phone numbers
<label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >
![Page 53: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/53.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
![Page 54: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/54.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” > <!-- Note: pattern ensures Safari Mobile gives a keypad -->
![Page 55: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/55.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for=“volume">How Loud is Spinal Tap?</label> <input id="volume" type=“range" name=“volume” min=“0” max=“11” step=“1” >
![Page 56: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/56.jpg)
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” min=“0” max=“9” >
![Page 57: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/57.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
![Page 58: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/58.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
![Page 59: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/59.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required >
![Page 60: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/60.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required min=“2014-09-10” max=“2014-12-19” >
![Page 61: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/61.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="preferred_dates">Preferred Date to Visit</label> <input id="preferred_dates" type="date" name=“preferred_dates" required min=“2014-09-10” max=“2014-12-19” >
![Page 62: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/62.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
![Page 63: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/63.jpg)
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="requested_tour_time" type="time" name=“requested_tour_time">
![Page 64: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/64.jpg)
FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </datalist>
![Page 65: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/65.jpg)
FALLING IN LOVE WITH FORMS
Mentalism
<label for="state">State</label> <input id="state" name="state" list="states"> <datalist id="states"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <!-- options continue --> </datalist>
![Page 66: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/66.jpg)
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks<label for=“state" id=“state_label”>State</label> <datalist id=“states”>
<select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select>
If other, please specify
</datalist> <input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
![Page 67: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/67.jpg)
FALLING IN LOVE WITH FORMS
Based on work by Jeremy Keith: http://adactio.com/journal/4272
Mentalism: smart fallbacks<label for=“state" id=“state_label”>State</label> <datalist id=“states”>
<select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select>
If other, please specify
</datalist> <input id="state" name="state" list="states">
![Page 68: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/68.jpg)
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks<label for=“state" id=“state_label”>State</label> <datalist id=“states”>
<select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select>
If other, please specify
</datalist> <input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
![Page 69: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/69.jpg)
FALLING IN LOVE WITH FORMS
Mentalism: smart fallbacks<label for=“state" id=“state_label”>State</label> <datalist id=“states”>
<select name=“state” aria-labelledby=“state_label”> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> <option>Arkansas</option> <!-- options continue --> </select>
If other, please specify
</datalist> <input id="state" name="state" list="states">
Based on work by Jeremy Keith: http://adactio.com/journal/4272
![Page 70: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/70.jpg)
Ok, I get it: forms in HTML5 are awesome.
But how should we organize our forms?
![Page 71: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/71.jpg)
FALLING IN LOVE WITH FORMS
Do we divide it up?
<div> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </div>
![Page 72: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/72.jpg)
FALLING IN LOVE WITH FORMS
Do paragraphs make sense?
<p> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </p>
![Page 73: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/73.jpg)
FALLING IN LOVE WITH FORMS
Is it a list of questions?
<ol> <li> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li> </ol>
![Page 74: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/74.jpg)
FALLING IN LOVE WITH FORMS
Is it a list of questions?
form ol, form ul { list-style: none; margin: 0; padding: 0; }
![Page 75: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/75.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
![Page 76: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/76.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“form-control form-control--text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
![Page 77: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/77.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“text”> <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required> </li>
![Page 78: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/78.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“email”> <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em> </li>
![Page 79: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/79.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“select”> <label for=“subject”>Purpose of Your Message</label> <select id="subject" name="subject"> <option>Question/Comment</option> <option>Article Error</option> <option>Website Bug Report</option> <option>Ask the Sherpas a question</option> </select> </li>
![Page 80: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/80.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
![Page 81: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/81.jpg)
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
![Page 82: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/82.jpg)
Makes sense. What about more
complex form constructs?
![Page 83: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/83.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
![Page 84: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/84.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> <label for=“newsletter”>Sign me up for this newsletter</label>
![Page 85: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/85.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
![Page 86: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/86.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
input { /* Styles for most normal input types */ }
label input { /* Styles for checkbox and radio controls */ }
![Page 87: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/87.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label for=“newsletter”> <input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> Sign me up for this newsletter </label>
![Page 88: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/88.jpg)
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<li class=“confirm”> <label for=“newsletter”> <input type=“checkbox” name=“newsletter” value=“yes” id=“newsletter”> Sign me up for this newsletter </label> </li>
![Page 89: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/89.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (9 available)
<label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label>
<!-- more options -->
![Page 90: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/90.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available)
<ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>
![Page 91: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/91.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets (9 available)</legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
![Page 92: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/92.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets <em>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
![Page 93: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/93.jpg)
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(9 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
![Page 94: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/94.jpg)
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
Requested Day and Time
<label for="requested_date">Requested Day</label> <select id=“requested_date" name=“requested_date" required=“”> <!-- options —> </select> <label for="requested_time">Requested Time</label> <select id="requested_time" name=“requested_time" required=""> <!-- options —> </select>
![Page 95: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/95.jpg)
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<fieldset> <legend>Requested Day and Time</legend>
<label for="requested_date">Requested Day</label> <select id=“requested_date" name="requested_date" required=“”><!-- options --></select> <label for="requested_time">Requested Time</label> <select id="requested_time" name=“requested_time" required=""> <!-- options --></select>
</fieldset>
![Page 96: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/96.jpg)
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
<li class=“grouped date-time-selects”> <fieldset> <legend>Requested Day and Time</legend>
<label for="requested_date">Requested Day</label> <select id=“requested_date" name="requested_date" required=“”><!-- options --></select> <!-- continued… -->
</fieldset> </li>
![Page 97: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/97.jpg)
FALLING IN LOVE WITH FORMS
Pattern 5: Related Entry
/* Hide the labels in an accessible way */ form .date-time-selects label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6 & IE7 */ clip: rect(1px, 1px, 1px, 1px); }
![Page 98: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/98.jpg)
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend>
<label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select>
<!-- continued… -->
</fieldset> </li>
![Page 99: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/99.jpg)
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”> <fieldset> <legend>Select a date</legend>
<label for="month">Month</label> <select name="month" id=“month”><!-- options --> </select>
<!-- continued… -->
</fieldset> </li>
![Page 100: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/100.jpg)
FALLING IN LOVE WITH FORMS
Pattern 6: Multiple Labels
<li class=“grouped year-month-day-selects”> <fieldset> <legend id=“select_date”>Select a date</legend>
<label for=“month" id=“month_label”>Month</label> <select name="month" id=“month” aria-labelledby=“select_date month_label” ><!-- options --> </select>
<!-- continued… --> </fieldset> </li>
![Page 101: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/101.jpg)
HELPFUL HINT
Focus onmaking the form
read naturally and easily.
![Page 102: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/102.jpg)
HELPFUL HINT
You can’t always make an interface
perfect, but you can make it usable.
![Page 103: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/103.jpg)
Ok, I think I’m getting it, but
small screens stillscare me a little.
![Page 104: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/104.jpg)
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
![Page 105: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/105.jpg)
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
![Page 106: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/106.jpg)
FALLING IN LOVE WITH FORMS
No layout before its time
.form-control { clear: both; } .form-control label, .form-control input { float: left; width: 34%; } .form-control input { width: 63%; }
![Page 107: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/107.jpg)
FALLING IN LOVE WITH FORMS
No layout before its time.form-control label, .form-control input { display: block; margin-bottom: .328em; }
![Page 108: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/108.jpg)
FALLING IN LOVE WITH FORMS
No layout before its time.form-control label, .form-control input { display: block; margin-bottom: .328em; }
@media only screen and (min-width: 60em) { /* Side by Side layout */ }
YMQMV
![Page 109: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/109.jpg)
FALLING IN LOVE WITH FORMS
No layout before its time
@media only screen and (min-width:30em) {
form .grouped ul li { float: left; width: 50%; }
} YMQMV
![Page 110: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/110.jpg)
Makes sense. Could we talk a bit about validation?
![Page 111: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/111.jpg)
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required> </p>
![Page 112: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/112.jpg)
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required> </p>
![Page 113: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/113.jpg)
FALLING IN LOVE WITH FORMS
Requiring a field
<p>Fields marked with a * are <strong id="required">required</strong>.</p> <p> <label for=“first_name"> First Name <abbr title=“required” aria-labelledby=“required”>*</abbr> </label> <input id="first_name" name="first_name" required> </p>
![Page 114: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/114.jpg)
FALLING IN LOVE WITH FORMS
Requiring a field
<p tabindex="0">Fields marked with a * are required.</p> <p> <label for=“first_name"> First Name <abbr title=“required">*</abbr> </label> <input id="first_name" name="first_name" required aria-required="true"> </p>
![Page 115: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/115.jpg)
HELPFUL HINT
Focus onmaking the form
read naturally and easily.
![Page 116: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/116.jpg)
FALLING IN LOVE WITH FORMS
Native validation
<label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.
![Page 117: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/117.jpg)
FALLING IN LOVE WITH FORMS
Non-native format validation
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name=“test” pattern=“[0-9]*” >
![Page 118: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/118.jpg)
FALLING IN LOVE WITH FORMS
Non-native format validation
<label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“\d{3}[a-zA-Z]{2}” >
![Page 119: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/119.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
![Page 120: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/120.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
![Page 121: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/121.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
![Page 122: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/122.jpg)
github.com/easy-designs/jquery.easy-validation.js
![Page 123: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/123.jpg)
A dead simple polyfill for HTML5
forms & custom validation messages.
![Page 124: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/124.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
<label for=“test">Enter three numbers followed by two letters</label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“\d{3}[a-zA-Z]{2}” data-validation-error-empty=“You forgot to enter text here” data-validation-error-invalid=“Whoops, that’s not right” >
![Page 125: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/125.jpg)
FALLING IN LOVE WITH FORMS
Custom error messages
<form … data-validation-error-empty=“You forgot to enter text here” data-validation-error-invalid=“Whoops, that’s not right” >
<label for=“test">Enter three numbers followed by two letters </label> <input id="test" name=“test” placeholder=“e.g. 123ab” pattern=“\d{3}[a-zA-Z]{2}” data-validation-error-invalid=“Why not try 111aa?” >
</form>
![Page 126: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/126.jpg)
HELPFUL HINT
Don’t forget about server-side
validation either.
![Page 127: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/127.jpg)
FALLING IN LOVE WITH FORMS
Provide a list of errors
retreats4geeks.com/contact
![Page 128: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/128.jpg)
FALLING IN LOVE WITH FORMS
Provide a list of errors
<div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
![Page 129: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/129.jpg)
FALLING IN LOVE WITH FORMS
Provide easy access to them
<div role=“alert”> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
![Page 130: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/130.jpg)
FALLING IN LOVE WITH FORMS
Provide easy access to them
<label for=“message”> Message <abbr title=“required">*</abbr> </label> <textarea id="message" name="message" required></textarea>
![Page 131: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/131.jpg)
FALLING IN LOVE WITH FORMS
Provide field-level help
<li class="text validation-error"> <label for=“email”>Your Email <abbr title=“required">*</abbr> </label> <input id="email" type="email" name="email" required=“" aria-required=“true” aria-invalid="true" aria-describedby=“email-error" > <strong id="email-error" class=“validation-error-message"> Your email address is required</strong> </li>
![Page 132: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/132.jpg)
FALLING IN LOVE WITH FORMS
Provide field-level help
li.validation-error { color: #922026; }
li.validation-error input, li.validation-error textarea, li.validation-error select { border-color: #922026; }
![Page 133: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/133.jpg)
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before { content: “Please Enter "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
![Page 134: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/134.jpg)
One More Thing…
![Page 135: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/135.jpg)
![Page 136: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/136.jpg)
Forms suck.
![Page 137: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/137.jpg)
Forms suck.can
a lot less
![Page 138: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/138.jpg)
Forms can be… easy to build predictable
effortless to use and accessible
![Page 139: Falling in Love with Forms - aaron-gustafson.com · FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name](https://reader033.vdocuments.us/reader033/viewer/2022051922/6010350235cb1b726e58625e/html5/thumbnails/139.jpg)
Thank you!
@AaronGustafson aaron-gustafson.com
slideshare.net/AaronGustafson