FALLING IN LOVE WITH
FORMSAaron Gustafson
@AaronGustafson slideshare.net/AaronGustafson
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label>Your Name</label> <input name=“full_name”>
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>
FALLING IN LOVE WITH FORMS
Pattern 1: Label & Field
<label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>
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.
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. !
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. !
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. !
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. !
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>
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>
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>
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>
Screen Reader: Chrome Vox
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>
FALLING IN LOVE WITH FORMS
Rinse & Repeat
<label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>
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>
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>
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>
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>
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>
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>
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” >
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” >
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
FALLING IN LOVE WITH FORMS
Requesting numbers
<label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">
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 -->
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” >
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” >
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 >
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 >
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 >
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” >
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” >
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
FALLING IN LOVE WITH FORMS
Requesting dates & times
<label for="requested_tour_time">Tour Time Requested</label> <input id="preferred_dates" type="time" name=“preferred_dates">
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>
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>
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>
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>
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
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">
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
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
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>
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>
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>
FALLING IN LOVE WITH FORMS
Is it a list of questions?
form ol, form ul { list-style: none; margin: 0; padding: 0; }
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>
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>
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>
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>
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>
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“textarea”> <label for=“message”>Your Message</label> <textarea id="message" name=“message"></textarea> </li>
FALLING IN LOVE WITH FORMS
Control Group Classification
<li class=“buttons”> <button type=“submit”>Send My Message</button> </li>
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter
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>
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
<label> <input type=“checkbox” name=“newsletter” value=“yes”> Sign me up for this newsletter </label>
FALLING IN LOVE WITH FORMS
Pattern 3: Confirmations
input { /* Styles for most normal input types */ } !label input { /* Styles for checkbox and radio controls */ }
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>
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>
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available) !<label for="asus-nexus-7"> <input type="checkbox" name="device[]" id=“asus-nexus-7"> Asus Nexus 7 </label> !<!-- more options -->
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
Tablets (8 available) !<ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul>
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets (8 available)</legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset>
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS
Pattern 4: Multiple Choice
<li class=“grouped checkboxes”> <fieldset> <legend>Tablets <em>(8 available)</em></legend> <ul> <li><!-- Asus Nexus 7 --></li> <!-- more options --> </ul> </fieldset> </li>
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>
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>
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>
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); }
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>
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>
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>
Screen Reader: Chrome Vox
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>
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>
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input type="radio" name="experience" value=“1"> </td> <!-- etc. --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <td></td> <th id=“value-1”>Poor</th> <!-- Headings continue --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <td> <input … aria-labelledby=“experience value-1”> </td> <!-- etc. --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table>
FALLING IN LOVE WITH FORMS
Pattern 7: The dreaded table<table> <thead> <tr> <!-- Headings before --> <th id=“value-3”>Good</th> <!-- Headings after --> </tr> </thead> <tbody> <tr> <th id=“experience”>How would you rate your experience with Foo Bar Title from initial contact to closing?</th> <!-- values 1 & 2 --> <td><input … aria-labelledby=“experience value-3”></td> <!-- values 4 & 5 --> </tr> </tbody> </table>
Screen Reader: Chrome Vox
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
FALLING IN LOVE WITH FORMS
Tap-friendly hit targets
.confirm label,
.radios label,
.checkboxes label { margin: -1em 0; padding: 1em 0; }
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%; }
FALLING IN LOVE WITH FORMS
No layout before its time.form-control label, .form-control input { display: block; margin-bottom: .328em; }
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 */ }
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
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%; } !}
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
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>
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>
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>
Screen Reader: Chrome Vox
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>
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>
Screen Reader: Chrome Vox
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>
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>
Screen Reader: Chrome Vox
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. !
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]*” >
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}” >
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}” >
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
FALLING IN LOVE WITH FORMS
Custom error messages
var field = document.getElementById(‘test’); field.setCustomValidity( ‘My custom error message’ );
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” >
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>
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>
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>
Screen Reader: Chrome Vox
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>
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>
FALLING IN LOVE WITH FORMS
Provide field-level help
<li class="text validation-error"> <label for=“email">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>
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; }
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
FALLING IN LOVE WITH FORMS
Provide field-level help
.validation-error label::before { content: "x "; font-family: Verdana, sans-serif; speak: none; /* The future! */ }
Screen Reader: Chrome Vox