Autofill forms on a site
Autofill in Yandex Browser enables users to quickly and safely enter bank card numbers, passwords, and other personal data (such as contacts information) in forms. This can make it easier to place orders, encouraging users to order more often. Yandex research and experiments to improve autofill in order forms have shown that the conversion of orders is 5–10% higher on sites where this function works correctly.
For details, see Autofill forms.
To check autofill on a site:
Step 1. Complete your profile in Yandex Browser
- Click browser://personal/contacts.or open the page
- Open Personal data.
- Click Add and fill out the form.
- To add other fields to the form, click Add field.
- Click Save.
If forms on the site have Passwords and Bank cards fields, enter this data as well.
Step 2. Check autofill in the form
Click all the fields of the form on your site and check whether the autofill hints are displayed correctly.
Step 3. Make any necessary edits
If there aren't any hints or the hints are displayed incorrectly, make sure the form markup follows the recommendations below.
Markup recommendations
Make sure that:
- The form markup meets HTML standards.
- The input element has the autocomplete attribute with a valid value.
Examples:
Name input field<input placeholder="Имя" autocomplete="given-name">
Email input field<input autocomplete="email">
For details, see HTML Living Standard and MDN.
- Data input elements are child elements of the form tag. For details, see Submitting forms.
- Data input elements have intuitive attributes, for example:
Attribute Field type Possible name options id Name first_name, name_first, fname, firstname, given_name, givenname name Phone phone, phoneCity, telephone, tel placeholder Organization org, organization, company Attribute Field type Possible name options id Name first_name, name_first, fname, firstname, given_name, givenname name Phone phone, phoneCity, telephone, tel placeholder Organization org, organization, company Example of code that is understandable for autofill<form action=""> <input id="first_name"> <input id="last_name"> <input name="email"> <textarea placeholder="Введите адрес"></textarea> </form>
Example of incorrect code<form> <!-- The browser recognizes the field as unknown. --> <input id="xdia_13"> <!-- The browser recognizes the field as an address, because the field falls under the definitions of both an address and email. --> <input name="email address"> <!-- An ambiguous designation that can be recognized as an email, delivery address, or site URL. --> <textarea placeholder="Address"></textarea> </form>
- The value of the for attribute of the label tag unambiguously refers to the input element that it was intended for.Example of the label tag that is understandable for autofill
<form> <div id="customer"> <label for="fname">Name</label> <input type="text" id="fname"> ... </div> </form>
Example of incorrect code<form> <div id="customer"> <label for="">Name</label> <div name="klw21"> <div name="md-12"> <input type="text"> </div> </div> ... </div> </form>
Submitting forms
The browser recognizes most of the data entered by the user during the form submission process. When the form doesn't have the form tag on the site and there is no explicit submit event to submit a form, the data stored in the browser and autofill may not work correctly.
Several mechanisms are used to recognize the submission. The simplest one is processing a submit JavaScript event. There are also heuristics that analyze the filling in of form fields, save the entered data, and respond to:
- Navigation on the site.
- AJAX requests.
- Deleting iframes that a form was completed inside of.
- Deleting or hiding filled elements.
Heuristics sometimes cause a false trigger and may save incorrect data. The process becomes especially complicated if the form tag is missing. The browser is forced to find fields, consider them a single form, and analyze their completion.
In order for the browser to save the entered data so that the user can fill out the form with one click on the next visit to the site, it is important to prepare the submission form correctly: use the form tag and inside it define input type="submit".
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
<div>
<input type="text">
<input type="text">
<input type="submit">
</div>
<div>
<input type="text">
<input type="text">
<div>Button</div>
</div>
How to disable autofill on the site
If you only want to disable autofill because it doesn't work correctly, contact the Yandex Browser team at browser-autofill@support.yandex.ru. Our experts will help you get autofill set up. If you have other reasons for disabling it, try the following non-standard solution:
Any invalid value of the autocomplete attribute signals the browser to disable autofill. In addition to none, you can use the values nope, all-off, smth, or any other arbitrary set of letters.
The Yandex Browser team doesn't guarantee that this method works in any environment. To see if you disabled autofill, click the form fields and make sure that there are no hints.