Autofill forms on a site

Step 1. Complete your profile in Yandex Browser

1. Install Yandex Browser.
2. Click  → Passwords and cards or open the page browser://personal/contacts.
3. Open Personal data.
4. Click Add and fill out the form.
5. To add other fields to the form, click Add field.
6. 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".

Example of a simple and clear submission form

<form>
  <input type="text">
  <input type="text">
  <input type="submit">
</form>

Example of a complex but understandable submission form

<div>
  <input type="text">
  <input type="text">
  <input type="submit">
</div>

Example of a submission form that is not understandable to the browser

<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:

autocomplete="none"

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.