Quick Tip: How To Disable Autocomplete on Form Inputs

Autocomplete is a feature that can save users’ time by suggesting previously entered information when filling out forms. Although it can be a helpful feature, sometimes it can be a privacy concern, especially when users share devices or work on public computers. In this case, users may want to disable the autocomplete feature for specific input fields or forms. In this article, we will discuss how to disable autocomplete for input elements.

UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets

DOWNLOAD NOW

The autocomplete attribute

The autocomplete attribute is used to control this feature. This attribute can be applied to different form elements, including input tags. It takes two values: “on” and “off.” By default, the browser sets the value to “on” for input tags. When set to “off,” the browser will not suggest previously entered values for that particular input field.

Disabling autocomplete for a specific input field

To disable auto-complete for a specific input field, you can use the following code:

<input type="text" name="username" autocomplete="off">

In the above code, we have added the autocomplete attribute to an input tag and set its value to “off.” This will disable it for that particular input field. You can apply this attribute to other input tags as well, including password fields, email fields, and search fields.

Disabling autocomplete for a whole form

If you want to disable it for a whole form, you can add the attribute to the form element and set its value to “off.” The following code demonstrates this:

<form method="post" action="/submit-form" autocomplete="off">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

In the above code, we have added the autocomplete attribute to the form element and set its value to “off.” This will disable it for all the input fields within the form.

Best practices

When disabling autocomplete, it is essential to keep in mind that it can impact the user experience. Some users may appreciate the feature, as it can save time and make filling out forms easier. Therefore, it is recommended to disable it only when necessary, such as when the user is working on a public computer.

Another best practice is to use the attribute only for specific input fields, such as search fields or email fields, to provide a better user experience.