dario's.blog

Autofill is a handy feature that can save time and effort when filling out forms on websites. Most modern web browsers include an autofill feature that automatically fills in fields like username or email, password, even address and phone number based on information you've previously entered. Some browsers also allow you to save login credentials for websites you visit frequently, making it easy to log in without having to enter your username and password each time.

What if you as a developer have implemented a form, but for some strange reason the autofill doesn't work on that form?

There could be several reasons for that.

Let's start with the most obvious ones first:

1. Browser doesn't support autocomplete. Some older browsers or mobile browsers may not support the autocomplete feature, or may not support it for certain types of form fields.
2. Autocomplete is disabled. The browser's autocomplete feature may be turned off. Check the browser settings to make sure that autocomplete is enabled.
3. A browser extension prevents autofill. Try opening the site in incognito mode when all the browser extensions are disabled - if it works, this means a browser extension is causing the problem.

The non-obvious reasons are related to how the form is implemented. If you've checked all the points above, especially if autofill works normally in other websites, then the problem might be in one or more following points:

1. The form does not use the POST action. The default action of the HTML form element is GET. Try changing it to POST, which should be the form's action anyway if your action produces any side effects (like logging in a user).

   <form action="/login" method="post">
     ...
   </form>
   

2. Submitting the form does not change the URL. This happens more often in single-page applications than in multi-page applications, especially if you've overridden the onSubmit event. Overriding the onSubmit event by preventing its default behavior through e.preventDefault() should not cause any problems, however try implementing the form in a way so that the user is navigated to a different URL upon submission. That is the more likely cause of the issue. If you don't want to change the URL, then you might try using the HTML5 history API to push something on the history, tricking the browser that you have navigated inside your single-page application after form submission.

3. The form does not have a button of type submit. It's always a good idea from the accessibility standpoint to have a button of type submit in your form, and have that button act as the primary button for submitting the form.

   <form action="/login" method="post">
     <button type="submit">Submit the form</button>
   </form>
   

4. The autocomplete attribute is not used properly. Although some browsers will be able to autofill text fields even if they don't have the autocomplete attribute, using it might be a good idea to help the browser understand the type of autofill they should use. Unless you want to turn off autocomplete by using autocomplete="off", you can use a variety of autocomplete values to describe the nature of the text fields, such as autocomplete="username" and autocomplete="password". The autocomplete attribute is especially necessary if your fields' IDs and names are autogenerated, and the browser has no way of understanding the type of data they contain.

   <form action="/login" method="post">
     <input type="text" autocomplete="username" name="username" id="username" />
     <input type="password" autocomplete="password" name="password" id="password" />
   </form>
   

5. The name and ID attributes are not used properly. If the autocomplete attribute is not used, then the browser will most likely use the names of the name and ID attributes to determine if they are autofillable, so try using understandable names like username, password, email, etc. Also make sure that these names and/or IDs do not conflict with other form elements on the page.

Different browsers use different heuristics when deciding on whether to use the autofill feature, which can sometimes lead to inconsistencies or unexpected behavior. If you are experiencing issues with autofill not working in an HTML form, I hope the above tips helped you troubleshot and fix the problem. If not, shoot me a message and we can troubleshoot together.