Chrome autocomplete thinks my "firstName" field is a credit card

Question

The question have been asked somewhere else, but not answered. Google Chrome thinks my input

<input name="firstName" id="firstName" type="text" placeholder="John" font-size="16" class="sc-fznKkj XyZMK">

is a credit card, as shown in the autocomplete field inspector (the experimental flag thingy) and by an autocomplete that offers saved Credit Card.

It does that on the lastName field too and another number type field somewhere in another form.

What I do not get is that it just work as expected in our dev environment, and gets nuts only in staging (both are pretty much the same deployment process, same s3 + cloudfront hosting, same code of the same build).

Any clues?

It gets weirder: changing the name field to first-name instead of firstName fixes it. I don't need to change both input name, only the first one does it. But I should be able to name my field however I please, no?

Answer 1

In HTML forms, the autocomplete attribute is used to tell browsers what type of data should go into a particular input.

(More info at MDN web docs.)

For a first name, for example, you should use autocomplete="given-name", and for a last name, use autocomplete="family-name".

Adding these attributes to the inputs which are being recognised incorrectly should solve your problem.

---

As to why some inputs don't have an autocomplete attribute yet are still recognised correctly: when no autocomplete attribute is found, the browser tries to decide 'intelligently' what should be put into this field.

To do this, the name attribute is most commonly used. If it is username or password for example, the browser will probably recognise these words as they are very common input descriptions. If it is myinput6, then the browser won't be able to recognise anything.

In your case, it seems that the browser recognised name="first-name", but had trouble recognising the slightly different name="firstName". However, as you said, you should be able to give your name attributes any value you want, and to do this, you should use the autocomplete attribute.