Identifying input purpose
Overview – Identifying input purpose
When a form input field collects personal information such as the user’s name, phone number, email and street addresses, programmatically define its semantics with the autocomplete attribute. Assistive technologies leverage the autocomplete attribute value to automatically complete forms, drawing on past user input stored in the browser. This saves the user from having to type the information. Assistive technologies also leverage the autocomplete value to pair input fields with icons, for users who prefer using images for communication.
The attribute value takes one of 53 potential field names from WCAG’s list of Input Purposes for User Interface Components. The field names are either broad or narrow. For instance, regarding the user’s name, it’s possible to identify an input’s purpose as full name, given name, family name, or nickname. You can further refine the purpose by adding space-separated autofill detail tokens to the autocomplete value:
shippingbillinghomeworkmobilefaxpager
Use autocomplete on <input> elements that take a text or numeric value as input, <textarea> elements and <select> elements. The HTML5 specification lists the appropriate elements to match with each autocomplete field name.
Good example: Using the autocomplete attribute
This is a simple form that identifies contact information from the user with the autocomplete attribute. The autocomplete field names use tokens to distinguish between billing and shipping, and land line and mobile phone.
The fields only auto-populate if the browser has saved values for the field names (e.g., given-name, family-name) from a previous form submission. To test, enter some values and press "Populate browser" to store values for the field names in the browser. The data is not submitted, and we don't store any of it.
Example begins
Example ends
View HTML (simplified)
This markup has been simplified by removing grouping <div> elements and class attributes.
Code begins
<form method="post" action="step1">
<label for="fname">First name</label>
<input id="fname" type="text" autocomplete="given-name">
<label for="lname">Last name</label>
<input id="lname" type="text" autocomplete="family-name">
<label for="jobtitle">Job title</label>
<input type="text" id="jobtitle" autocomplete="organization-title">
<label for="org">Organization</label>
<input type="text" id="org" autocomplete="organization">
<fieldset>
<legend>Shipping address</legend>
<label for="ship-st">Street</label>
<input type="text" id="ship-st" autocomplete="shipping street-address">
<label for="ship-city">City</label>
<input type="text" id="ship-city" autocomplete="shipping address-level2">
<label for="ship-prov">Province</label>
<input type="text" id="ship-prov" autocomplete="shipping address-level1">
<label for="ship-mobile-phone">Mobile phone for delivery</label>
<input type="tel" id="ship-mobile-phone" autocomplete="shipping mobile tel-national">
<label for="ship-email">Email</label>
<input type="email" id="ship-email" autocomplete="shipping email">
</fieldset>
<fieldset>
<legend>Billing address</legend>
<label for="bill-st">Street</label>
<input type="text" id="bill-st" autocomplete="billing street-address">
<label for="bill-city">City</label>
<input type="text" id="bill-city" autocomplete="billing address-level2">
<label for="bill-prov">Province</label>
<input type="text" id="bill-prov" autocomplete="billing address-level1">
<label for="bill-phone">Phone</label>
<input type="tel" id="bill-phone" autocomplete="billing tel-national">
<label for="bill-email">Email</label>
<input type="email" id="bill-email" autocomplete="billing email">
</fieldset>
<input type="submit" value="Populate browser">
</form>Code ends