How to turn off HTML input form field suggestions?

Question

By suggestions, I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:

For example, when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.

How can this be turned off?

Sialkot

autocomplete="off" – Paraffin

It doesn't do the job. I've added it and still when I start typing suggestions will appear. <input type="text" className="form-control" autocomplete="off" {...title} />(it's React) – Sialkot

Have you used it in form tag or in input tag? – Fanaticize

If you are using chrome read this – Fanaticize

I've used it in form tag. – Sialkot

Great! I figure that out. it should be autoComplete with capital C. – Sialkot

Try setting a random Id for your inputs. That does the trick for me. – Epanorthosis

Is there a way to turn it off directly from Chrome (or any other browser)? – Nottage

Answer 1

What you want is to disable HTML autocomplete Attribute.

Setting autocomplete="off" here has two effects:

It stops the browser from saving field data for later autocompletion on similar forms though heuristics that vary by browser. It stops the browser from caching form data in session history. When form data is cached in session history, the information filled in by the user will be visible after the user has submitted the form and clicked on the Back button to go back to the original form page.

Read more on MDN Network

Here's an example how to do it.

<form action="#" autocomplete="off">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

If it's on React framework then use as follows:

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

Link to react docs

Update 1

Here's an update to fix some browsers skipping "autocomplete=off" flag.

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

Update 2

Still working on Chrome Version 119.0.6045.200 (Official Build) (64-bit) / Tested on 12/12/2023.

Cobelligerent

this method seems not working anymore. Is there now another solution for now? – Materially

@webfacer, now google chrome ignore this flag and some password managing apps also ignores this. However, this could achieve through JavaScript if you're interested.? – Cobelligerent

i know but we decided not to use JS because of what if it is turned off? that´s why we decided to use native html. Hmm autocomplete should be always turned off also because of the security issue. see this twitter twitter.com/anttiviljami/status/816585860661518336 – Materially

I see @webfacer. That is a serious privacy concern indeed. :/ – Cobelligerent

Autocomplete off is not working on my side. it stills shows the suggestions and fills it – Arius

Every one of these examples is still showing the auto-suggestions for me on Chrome 78. – Bier

autocomplete="off" works in vue project. Thank You! – Hygroscopic

Answer 2

On Chrome, the only method we could identify which prevented all form fills was to use autocomplete="new-password". Apply this on any input which shouldn't have autocomplete, and it'll be enforced (even if the field has nothing to do with passwords, e.g. SomeStateId filling with state form values). See this link on the Chromium bugs discussion for more detail.

Note that this only consistently works on Chromium-based browsers and Safari - Firefox doesn't have special handlers for this new-password (see this discussion for some detail).

Update: Firefox is coming aboard! Nightly v68.0a1 and Beta v67.0b5 (3/27/2019) feature support for the new-password autocomplete attribute, stable releases should be coming on 5/14/2019 per the roadmap.

Update in 2022: For input fields with a type of password, some browsers are now offering to generate secure passwords if you've specified autocomplete="new-password". There's currently no workaround if you want to suppress that behavior, but I'll update if one becomes available.

Rokach

Answer 3

Adding the two following attributes turn off all the field suggestions (tested on Chrome v85, Firefox v80 and Edge v44):

<input type="search" autocomplete="off">

Converted

This worked for me on Vue-2 as of September of 2022 – Enrichetta

This combination is the only thing that worked for me. Tested on Chrome v115 – Carpous

Answer 4

use autocomplete="off" attribute

Quote:IMPORTANT

Put the attribute on the <input> element, NOT on the <form> element

Desperation

Answer 5

I know it's been a while but if someone is looking for the answer this might help. I have used autocomplete="new-password" for the password field. and it solved my problem. Here is the MDN documentation.

Norval

This worked for me in 2021, autocomplete="off" not working with chrome auto saved passwords. For example you have a register form with the same id of "email" and "password" and you saved your credentials in the login window, it offers the user and password in the register form, This "new-password" solved it. – Sidonius

Answer 6

This solution worked for me: Add readonly attribute.

Here's an update to fix some browsers skipping the "autocomplete=off" flag.

<input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

Arva

This is not the best answer (see qslabs), but it is a very clever solution that inspires thought. +1 for that. – Impeachment

Answer 7

<input type="text" autocomplete="off"> is in fact the right answer, though for me it wasn't immediately clear.

According to MDN:

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.

The attribute does prevent the future saving of data but it does not necessarily clear existing saved data. Thus, if suggestions are still being made even after setting the attribute to "off", either:

• rename the input
• clear existing data entries

Additionally, if you are working in a React context the attribute naturally becomes autoComplete.

Cheers!

Capability

Answer 8

autocomplete = "new-password" does not work for me.

I built a React Form. Google Chrome will autocomplete the form input based on the name attribute.

 <input 
  className="scp-remark" 
  type="text" 
  name="remark"
  id='remark'
  value={this.state.remark} 
  placeholder="Remark" 
  onChange={this.handleChange} 
/>

It will base on the "name" attribute to decide whether to autofill your form. In this example, name: "remark". So Chrome will autofill based on all my previous "remark" inputs.

<input 
  className="scp-remark" 
  type="text" 
  name={uuid()} //disable Chrome autofill
  id='remark'
  value={this.state.remark} 
  placeholder="Remark" 
  onChange={this.handleChange} 
/>

So, to hack this, I give name a random value using uuid() library.

import uuid from 'react-uuid';

Now, the autocomplete dropdown list will not happen. I use the id attribute to identify the form input instead of name in the handleChange event handler

handleChange = (event) => {
    const {id, value} = event.target;
    this.setState({
        [id]: value,
    })
}

And it works for me.

Herod

Answer 9

I had similar issue but I eventually end up doing

<input id="inp1" autocomplete="off" maxlength="1" /> i.e., autocomplete = 'off' and suggestions will be disappeared.

Dacy

Answer 10

If you are using ReactJS. Then make this as autoComplete="off"

<input type="text" autoComplete="off" />

Roomer

Answer 11

I ended up changing the input field to

<textarea style="resize:none;"></textarea>

You'll never get autocomplete for textareas.

Avruch

When mobile I prefer my keyboard to change depending on input ie. <input type="email"/> – Linettelineup