Jump to main content

The autocomplete attribute

Almost every browser today has a built in helper to help users fill in forms. For example it can autofill the users address based on data from other forms the user has filled in. This is of course a nice feature for every user, but it's a vital feature for users who for example uses an Eye tracker to input text. These user otherwise might need to look at a virtual keyboard and blink their eyes for each letter the wish to type.

So how is it done? Easy! You just need to add the autocomplete attribute to the input fields. The value of the attribute (called "token") is used to detect if the user has filled in a field before with the same token. The token can be anything you like, you can prefix the token with the websites name to isolate the autocomplete data for your web. But best is to common tokens for the fields. W3C has a list of suggestions. You isn't limited to a single token either, you can use multiple tokens e.g. for separating shipping addresses from billing addresses. Here is how it can look in html:

<form>
	<label for="fullname">Full name</label>
	<input type="text" id="fullname" name="fullname" autocomplete="name" />
	
	<label for="username">Username</label>
	<input type="text" id="username" name="username" autocomplete="username" />
	
	<label for="email">Email</label>
	<input type="email" id="email" name="email" autocomplete="email" />
</form>
<form>
	<fieldset>
		<legend>Shipping address</legend>
		
		<label for="shipping-address">Address</label>
		<textarea name="shipping-address" id="shipping-address" autocomplete="shipping street-address"></textarea> 
		
		<label for="shipping-city">City</label>
		<input type="text" id="shipping-city" name="shipping-city" autocomplete="shipping address-level2" />
		
		<label for="shipping-postal-code">Postal code</label>
		<input type="text" id="shipping-postal-code" name="shipping-postal-code" autocomplete="shipping postal-code" />
	</fieldset>
</form>

Read more / sources: