This content originally appeared on DEV Community and was authored by Carlos Espada
The autocomplete attribute allows the user agent to automatically fill in certain form fields by obtaining the value from previous past values entered by the user, or from pre-configured values. It can be very useful for users with a cognitive disability, as well as for any user does not have to be repeating the same information over and over again in different forms.
<label for="first-name">First Name</label>
<input
id="first-name"
name=”first-name”
type="text"
autocomplete="given-name"
/>
<label for="last-name">Last Name</label>
<input
id="last-name"
name=”last-name”
type="text"
autocomplete="family-name"
/>
The W3C and MDN pages provide a complete list of the values that the autocomplete attribute can take. The more consistent the use of these values is throughout the entire site, the easier it will be for the user agent to use them correctly and usefully for the user.
In order to provide autocompletion, user-agents might require form fields (<input>, <select> and <textarea>) elements to:
- Have a name and/or
idattribute - Be descendants of a
<form>element - The form to have a submit button
There are form fields that you should be careful with when using autocomplete attribute, as they contain sensitive information, such as those related to credit cards.
Some of the values are based on US formats, so usage in other countries may be difficult to resolve for the user agent.
This content originally appeared on DEV Community and was authored by Carlos Espada
Carlos Espada | Sciencx (2022-01-17T07:41:44+00:00) A11y tips: autocomplete your form fields. Retrieved from https://www.scien.cx/2022/01/17/a11y-tips-autocomplete-your-form-fields/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.