How can I write a form that assists my browser's auto-complete feature?

HTML forms can leverage browser autocomplete to improve user experience by providing appropriate hints about what data each field expects. The autocomplete attribute tells browsers how to pre-fill form fields based on previously entered data.

The autocomplete Attribute

The HTML5 specification defines the autocomplete attribute to help browsers understand field purposes. When set to "on", browsers use heuristics based on field names, DOM position, and other factors to suggest appropriate values.

Common Autocomplete Values

Use specific autocomplete values to provide clear hints to browsers:

Example Form with Autocomplete

<form>
    <label for="fullName">Full Name:</label>
    <input type="text" id="fullName" name="fullName" autocomplete="name">
    
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" autocomplete="given-name">
    
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" autocomplete="family-name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" autocomplete="email">
    
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" autocomplete="tel">
    
    <button type="submit">Submit</button>
</form>

Disabling Autocomplete

To disable autocomplete for sensitive fields like passwords or credit card numbers, use autocomplete="off":

<input type="password" name="tempPassword" autocomplete="off">
<input type="text" name="captcha" autocomplete="off">

Best Practices

Use appropriate input types along with autocomplete values. For example, type="email" with autocomplete="email" provides the best user experience and validation.

Conclusion

The autocomplete attribute improves form usability by helping browsers suggest relevant data. Use specific values like "email" and "given-name" for better autocomplete accuracy.