What is Autocomplete?
Many browsers contain features that can help users fill in web forms automatically. For example, they could prefill the user's address or contact details based on previously filled-in forms. Users can also set up their own autocomplete settings in a number of browsers.
In consideration for these types of form respondents, autocomplete gives you the ability to hint to browsers which information should be filled into which fields in your form. You can even state that a particular field should not be prefilled with autocomplete.
Additionally, using autocomplete will allow your form to be more accessible and adhere to WCAG 2.1 AA compliance.
Which field types allow Autocomplete?
Currently, FormAssembly allows the autocomplete attribute on the following fields:
- Text Input
- Text Area
- Drop-down Menu
- Multi-Select List
Autocomplete Setup
First, let's create a simple lead form with First Name, Last Name and Email Address fields.
For the first name field, we are going to click the blue Options button. On the left sidebar, we will expand the Autocomplete section and select "Given-Name" for the First Name field.
For the last name field, we are going to click the blue Options button. On the left sidebar, we will expand the Autocomplete section and select "Family-Name" for the Last Name field.
For the email field, we are going to click the blue Options button. On the left sidebar, we will expand the Autocomplete section and select "email" for the Email field.
Then click save.
Now when your respondent goes to fill out your form, if their browser has any saved information it will help them prefill those inputs. In addition to the prefill, this will also allow your form to be more accessible and adhere to WCAG 2.1 AA compliance.
What attributes can I assign and what do they mean?
Here is a list of some of the most popular attributes which can be assigned to your fields and what they mean. You can also view more attributes here.
"off"
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.
"on"
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgment.
"name"
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use other autocomplete values if you do need to break the name down into its components.
"given-name"
The given (or "first") name.
"additional-name"
The middle name.
"family-name"
The family (or "last") name.
"email"
An email address.
"organization"
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
"street-address"
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
"address-line1", "address-line2", "address-line3"
Each individual line of the street address. These should only be present if the "street-address" is not present.
"address-level4"
The finest-grained administrative level, in addresses which have four levels.
"address-level3"
The third administrative level, in addresses with at least three administrative levels.
"address-level2"
The second administrative level, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
"address-level1"
The first administrative level in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
"country"
A country or territory code.
"postal-code"
A postal code (in the United States, this is the ZIP code).
"cc-name"
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
"cc-number"
A credit card number or other number identifying a payment method, such as an account number.
"cc-exp"
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
"cc-exp-month"
The month in which the payment method expires.
"cc-exp-year"
The year in which the payment method expires.
"cc-csc"
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
"cc-type"
The type of payment instrument (such as "Visa" or "Master Card").
"bday"
A birth date, as a full date.
"tel"
A full telephone number, including the country code.