I have a form that I would like to have chrome autofill or prefill (I'm using Mac Chrome 26.0.1410.65 on Mountain Lion). The purpose of this is to demonstrate the autocomplete standards: I'd like to show either the fields prefilled on load, or if the user starts typing their first name it will auto-fill both names.
I'm using autocomplete and the entire page is below, with just two fields.
I submit, then the next time I visit the page, I have to start typing into each field to get the drop-down for auto-complete. No matter what I do on the first field, I have to tab to the second and start typing there.
I'd like it to fill in all the fields (well, both) when I accept a value in the first field. How do I get that? I see it happening in commercial websites, where starting to type in a single field and it pre-fills many other fields. (even if there is a yellow background)
<!DOCTYPE html>
<html>
<head><title>Autofill test</title></head>
<body>
<form name="nameform" action="?go" method="POST">
<input type="text" name="givenname" autocomplete="given-name">
<input type="text" name="familyname" autocomplete="family-name">
<button type="submit">Save values</button>
</form>
</body>
</html>
I've seen the other questions that indicate I have to use POST, and there cannot be hyphens in the name. I have also tried x-autocompletetype and autocomplete. I've also tried without the DOCTYPE (I'm getting desperate), and renaming the fields "fname" or "firstname" etc. Nothing appears to work.
Is there something I'm missing?
Related
Lately, we have added a custom React components library to our app (company standart). It has a limitation - doesn't allow to set name or autocomplete attribute. So, some of our inputs lost name attribute after an update.
After update our rendered input looks like this:
<div class="search-input">
<div class="sc-bYwzuL dnjiBM">
<input data-test-id="navigation_customer-search-input" placeholder="Search for a customer" rows="1" value="">
</div>
</div>
And Chrome started to autofill it with credit cards info:
Maybe someone is aware of what can cause such behavior?
I was sure that credit cards autofill is only available when correct name or autocomplete attributes are provided (like described here).
Additional details:
Before the library update input had no issue with autocomplete and was rendered like this:
<div class="search-input-container">
<input type="text" name="search" placeholder="Search for a customer" data-test-id="search__search-input__input" value="">
</div>
Also, when I'm deploying exactly the same version to a different environment with a different domain (which I wasn't using for a while) - I don't see an autofill issue.
According to this thread Chrome uses crowdsourcing (when many people entered the first name into the field - Chrome will classify it as a first name) to identify how to autocomplete the field.
However, if your input has the correct name and/or autocomplete attribute - it will work accordingly to that attributes.
After applying this fix and testing I can say, that it was probably the only way to fix the issue.
Minimal repro example (jsfiddle, you need a credit card saved in your browser to see this issue):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="Test.html" autocomplete="off">
<div>
<label>Basisnummer</label>
<input type="text" />
<input type="text" />
<br>
<label>Markenname</label>
<input type="text" />
</div>
</form>
</body>
</html>
Both Chrome 85.0.4183.121 and Edge 85.0.564.63 think that this is a credit card form and decide to helpfully allow my users to enter their credit card data, which is not at all helpful (since this is not a credit card form) and confuses the heck out of my users:
I am aware of the following workarounds:
Obfuscating the first label:
<label>Basisnum<span style="display:none">x</span>mer</label>
That works, but I'd be a lot of work to implement this in our application (the labels are not hard-coded since they can be localized).
autocomplete="cc-csc" works (i.e., disables auto-completion), but it's semantically completely wrong (it's not a CC-CSC field!), so I'd rather avoid that to prevent further trouble down the road when browsers decide to do something "helpful" to cc-csc fields. For example, setting it as cc-csc could make mobile browsers show a numeric-only keyboard (makes sense, since a csc is always numeric), and I definitely don't want that.
In any case, I'd rather work with the browser than against it, hence my question:
Why does this happen? (Since it occurs in both Chrome and "new" Edge, it must be some Chromium issue, and since Chromium is open-source, we should be able to see what happens here, right?)
Bonus question: How can I (officially) tell Chromium that this is not a credit card form?
Notes:
autocomplete="nope" (or autocomplete="...some random data...") doesn't make a difference.
This is just a minimal example - the full page has names, classes, ids and whatnot.
I am grateful for people suggesting workarounds in the comments. I would, however, prefer to understand why it happens rather than trying random workarounds (if that is possible, of course...).
It's because Chome's auto-detection of German-language credit card forms is too aggressive. In particular, your form contains
three or more fields,
one of which is labeled as a ...nummer, and
another one is labeled as a ...name.
Here is an even simpler minimal example that reproduces the same issue with the current canary version of Chrome (87.0.4278.0):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Nummer</label>
<input type="text" />
<input type="text" />
<br>
<label>Name</label>
<input type="text" />
</div>
</body>
</html>
Looking at the source of Chromium, we can see that the following regex is used to detect credit card number fields (components/autofill/core/common/autofill_regex_constants.cc):
const char kCardNumberRe[] =
"(add)?(?:card|cc|acct).?(?:number|#|no|num|field)"
"|(?<!telefon|haus|person|fødsels)nummer" // de-DE, sv-SE, no
"|カード番号" // ja-JP
"|Номер.*карты" // ru
"|信用卡号|信用卡号码" // zh-CN
"|信用卡卡號" // zh-TW
"|카드" // ko-KR
// es/pt/fr
"|(numero|número|numéro)(?!.*(document|fono|phone|réservation))";
We can see that (almost) every field labeled with "...nummer" (= German for "number") is considered a credit card number field!
Once a credit card number field is found, a subsequent field labeled "...name" is treated as a credit card name field (credit_card_field.cc):
// Sometimes the cardholder field is just labeled "name". Unfortunately
// this is a dangerously generic word to search for, since it will often
// match a name (not cardholder name) field before or after credit card
// fields. So we search for "name" only when we've already parsed at
// least one other credit card field and haven't yet parsed the
// expiration date (which usually appears at the end).
if (fields > 0 && !credit_card_field->expiration_month_ &&
ParseField(scanner, base::UTF8ToUTF16(kNameOnCardContextualRe),
&credit_card_field->cardholder_,
{log_manager, "kNameOnCardContextualRe"})) {
continue;
Unfortunately, there is no "official" way to tell Chrome that "this is really not a credit card field". The most common workaround is autocomplete="cc-csc", but this is semantically completely backwards (mis-labeling a field as a certain type of credit card field to prevent credit card field auto-detection).
I have submitted a bug report for this, let's hope it helps:
https://bugs.chromium.org/p/chromium/issues/detail?id=1133769
You can explicitly set autocomplete values to the closest approximations from the The HTML autocomplete attribute
I used "tel" for Basisnummer and "organization" for Markenname:
<form method="post" action="Test.html" autocomplete="off">
<div>
<label>Basisnummer</label>
<input type="text" autocomplete="tel"/>
<input type="text" />
<br>
<label>Markenname</label>
<input type="text" autocomplete="organization"/>
</div>
</form>
It does disable card number autocomplete.
JSfiddle
I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>
I have an input tag which acts as a search box. But before that I have two input tags through which the credentials is given which gets saved in chrome browser. Now when the search box gets rendered it gets rendered with the autofill value of the username which was saved in the browser previously. My requirement is the autofill for the search input tag should not take place. I had used the following attributes for the search input tag but still it is not getting resolved.
<input type="text" spellcheck="false" autocomplete="off" name="my_custom_name">
Can anyone please provide me with a solution?
The latest way to do this is,Just simply use type search
<input type="search" />
autocomplete="off" toggles the application auto complete. Chrome browser has "Auto-fill" feature, where users can enable/disable. Hope you are not talking about this.
I was under the impression that the server code (or at least PHP) that parses the POST of an HTML form cannot distinguish between a POST from a form with a checkbox whose value is not "checked" versus a POST from a form that doesn't include a checkbox by that name at all.
For example, take the following 3 forms. If they were all submitted as is, with no manual entry, just using the inital values, then forms f2 and f3 would send the same results:
<form name="f1">
<input type="text" name="txt_1" value="Hello">
<input type="checkbox" name="chk_1" checked="checked">
</form>
<form name="f2">
<input type="text" name="txt_1" value="Hello">
<input type="checkbox" name="chk_1">
</form>
<form name="f3">
<input type="text" name="txt_1" value="Hello">
</form>
In my real application, I'm submitting forms of the type f3, with a checkbox deliberately omitted (different checkboxes in different situations). For any checkbox I left missing, I wanted the back-end to just ignore it -- don't treat it as On or Off, just do nothing related to that field.
After I built it, I was almost going to throw out my work before testing, when I remembered that the back-end would treat a missing chk_1 exactly like it would an existing chk_1 that was unchecked -- and would turn Off the related value in the back-end.
But I went and tried it out, and IT WORKED! And I tried different variations, and they all work. They correctly disregard the fields related to missing checkboxes (while processing the fields related to existing checkboxes).
So, that's great, but I don't know how it's done (or whether it might stop working -- say on another browser, etc.). In PHP, I know that the code isset($_POST['chk_1']) will get the value of the checkbox, and it returns false in both cases: unchecked checkbox or missing checkbox. Is there a way in other server languages to distinguish? Why is this working?
The short answer is that PHP only gets what the Browser sends it. It doesn’t know or care about the form itself, just the data from the browser. The data comes as a collection of name=data values.
Among other factors, the browser will only send a button if
it has a name, and
it has been selected
If the button has no name, or if it was not selected, then PHP will never hear of it. This applies to
normal buttons (<button> or <input type="submit">)
radio buttons (where only one in a group can be selected: if none is selected, then this, too, will be absent)
checkboxes (only selected checkboxes are sent)
So, the short answer is that PHP will never know whether a checkbox is missing or simply unchecked, because neither will be sent to the server.