Programs for automatically filling out forms. Autofill: what web developers don't know, but should know

• Translation

Many people know that in the mobile version of Safari you can scan your bank card. But how many developers know how to create forms that support this feature?

I'm willing to bet not many.

Complicating matters complete lack of documentation from Apple on how this function works. But there is one point. The bank card scanning function is a subset of autofill - a browser functionality that has long been ignored by web developers. It's clear why they didn't pay enough attention to it: when you regularly fill out a form with test data, autofill usually gets in the way. But for our users this is an important feature. Google found that when using autofill, users fill out forms 30% faster. So let's explore how autofill works, figure out how to create forms that support cross-browser autofill, and take advantage of new features like card scanning.

How does autocomplete work?

Until recently, there were no standards governing the implementation of autofill. Each browser did this differently, and there was very little documentation available describing the browser's mechanism for determining what content should be included in a given field.

Despite this anarchy, two main approaches can be distinguished:

1. Fields with pre-defined autocomplete

Chrome, Opera, and Safari detect the most important fields on a form and let you choose what data you want the browser to automatically fill in. For example, Opera can automatically fill in addresses and bank card details. This functionality is configured here:

Each of the three browsers has its own set of fields to which autofill can be applied, but support for the basic fields of payment forms is implemented almost everywhere.

Most users won't need to access these settings to use autofill. The browser monitors how a person fills out forms and, when it recognizes the fields for address and bank card details, asks whether the entered data should be saved for later use.

2. Autofill any fields

If the previous approach can be compared to a scalpel applied to pre-selected fields, then this one is akin to a chainsaw cutting everything in its path.

Microsoft Edge and Firefox, after submitting a completed form, save all entered data along with the value of the name attribute. If in the future the browser encounters a field with the same name attribute, autocomplete will be applied to it. In addition to name, Firefox also pays attention to the id attribute.

This approach has security and privacy concerns, so off has long been supported to disable autofill to prevent the browser from storing and autofilling sensitive information.

Which approach is better?

Although the second approach allows you to work with a large number of fields, as a developer I prefer the option with predefined fields. This makes it much easier to determine what information the browser should fill in, and it’s also easier to set up test profiles.

In addition, with the second approach, you need to first submit the completed form so that the browser stores the data for later autofill. Without sending, it will not remember the information you entered. I also hate to think that the browser could store my bank card details unencrypted if it doesn't detect the field type.

Of course, Microsoft and Mozilla are interested in security and privacy, and I'm sure they have some kind of protective mechanisms in place. But personally, I find it much calmer to see in the browser settings that it recognizes and clearly separates bank card data.

With all that said, I don't know the end users' preferences. The second system can be used more widely, but I've seen quite a few support calls where people are trying to remove autofill data from their browser history.

It will be interesting to see how Edge and Firefox change once they support the new autofill standard.

Behaviors to track

Sometimes browsers require more than one field of a certain type to offer you autocomplete options. For example, below shows how Safari will not automatically fill in a single field for the name of the bank card owner, but if there is a field nearby for the card number, the browser will prompt you to do it.

However, if only the card number field is present, Safari will prompt you to fill it out. In my experience, this browser behavior can make it difficult to test specific situations with single fields. One time during testing I encountered that Opera required three fields to apply autocomplete, but I was unable to reproduce this behavior again.

If your form is created with autocomplete support (more on this below), then users should not encounter such situations. I'm just mentioning this in case you also come across similar oddities while debugging and testing autocomplete.

Using standards when implementing autocomplete

Fortunately, the autofill situation is improving. HTML5 recently extended the autocomplete attribute to tell the browser what data to enter into different fields. This attribute has been around for several years and initially could take two values: on and off . By default, autocomplete is set to on , which means the browser can save the submitted data and automatically fill in the fields. But for some fields, autocomplete is not desirable. In this case, the autocomplete attribute can be set to off , which tells the browser that this field does not need to be filled in.

Recently new attribute values ​​were added - autofill detail tokens. These tokens help the browser understand what information is needed to fill out the field.

One type of token is called autofill field names. They tell the browser what type of information is being entered into a field. For example, one of the tokens of this type is organization. Here's what the HTML5 specification says about it:

The company name that refers to the person, address, or contact information in other fields associated with this field.

An example of a field with automatic completion of the organization name would look like this:

The HTML5 specification has a huge table that lists all 53 possible autocomplete field names, their purpose and the types of inputs with which they can be used.

This is the simplest form of autofill, but it gets more powerful and complex.

Delivery and billing

The value of the autocomplete attribute is a space-separated list of tokens. For example, if you want to collect data for the delivery of a product, then you need to add the shipping token before the attribute value:

The billing token works exactly the same as the shipping token.

Phones, email and nicknames in instant messengers

For phone numbers, email addresses and instant messenger nicknames, a different version of the token is used. For such cases, an optional token is provided, indicating that in the field you need to enter the number of your home, work, mobile phone, fax or pager.

For example:

General and specific names of autocomplete fields

For many types of information, the specification defines general (broad) and qualifying (narrow) names for autofill fields. Let's say, in addition to the single field for entering the phone number tel, you can use:

• tel-country-code
• tel-national
• tel-area-code
• tel-local
• tel-local-prefix
• tel-local-suffix
• tel-extension

The authors of the specification encourage us to use common names as often as possible:

In general, authors are advised to use general names rather than specific ones, since the latter impose Western standards. For example, in a number of countries it is customary to write the first name first and then the surname, while in many other countries it is customary to write it the other way around - first the surname, then the given name. There are also many countries where only one name (mononym) is used. Therefore, using a single input field is a more flexible approach.

I agree with this recommendation. In practical terms, this means that it is important to pay attention to the table of values ​​and choose the correct name for each field.

Sections

The final feature of the new autocomplete attribute tokens is the ability to assign custom sections to group fields. It is defined using a token starting with section- . After the hyphen you can write whatever you want. The specification provides the following example of sections:

Ship the blue gift to...

Address: City: Postal Code:

Ship the red gift to...

Address: City: Postal Code:

All tokens

So now we have a much more complex set of tokens for the autocomplete attribute. And here the order of the tokens is important.

First, you use either the on and off values, or the names of the autocomplete fields - you can't do both at the same time.

When using autofill tokens, they must appear in this order:

(optional) (optional) (optional)
Remember that tokens are only used for input fields for phone numbers, email addresses and nicknames.

The longest possible set of autocomplete tokens might look like this:

Mobile phone for delivery

Long live standards! That's all, right?

I'm afraid not. I'm hoping that eventually all browsers will support the extended autocomplete standard, but that's not the case yet. I tested mobile and desktop browsers to find out the current state of attribute support. Here are the results:

Browser	Version	OS	ID	Name	Autocomplete
Chrome	50	OS X 10.11.4	No	Yes	Yes
Opera	35	OS X 10.11.4	No	Yes	Yes
Firefox	46	OS X 10.11.4	Yes	Yes	No
Edge	25	Windows 10	No	Yes	No
Safari	9.1	OS X 10.11.4	Partially	Partially	Partially
Safari	9	iOS 9.3.1	Partially	Partially	Partially

So far, only Chrome and Opera explicitly support the new autofill capabilities. Safari appears to have partial support, but due to lack of documentation I can't tell if this is intentional or if autocomplete , name and other attributes are simply searched using regular expressions.

Safari strange behavior

Since the introduction of the bank card scanning feature in iOS 8, web developers have been reading the tea leaves, trying to determine what combination of features Safari is looking for. Some people think that the name attribute needs to have certain values. Others have found that the values ​​in ID are used. Even the label seems to matter:

The cardholder name field is especially tricky. We played with different IDs for a long time and almost gave up. We were unable to calculate an ID that would force Card Scan to fill in the details. After much frustration, we finally discovered that it's all about the content of the corresponding label element. Once we installed the “Name on card” label, everything magically worked.

I've done a lot of testing and I still can't say with certainty that I fully understand how Safari works. However, I still came to several main conclusions:

Autocomplete is supported in contact and address input fields

Safari recognizes the form I created that contains only autocomplete attributes. As soon as I start writing in the first field, the browser prompts me to fill out the form with my contact information.

Everything works as it should, but we need to make a couple of clarifications.

First, it's unclear what information Safari uses to decide whether to autofill my contacts from my Mac's address book. My position is listed here, but the company name is not.

Secondly, the browser does not offer options to choose from. My contacts have both home and work addresses, and Safari only fills in the home address. So I'll be out of luck if I want to order delivery to the office.

Autofill of payment forms is completely unreliable

Safari's behavior changes dramatically when it comes to payment fields. The autocomplete attribute is ignored. Instead, the browser uses some kind of magical heuristic. And since I'm not an Apple wizard, it was difficult for me to recognize what was actually going on:

Here's how I edited the names of the two fields. In both cases, autocomplete , name , and id were specified to make it easier for Safari to identify the fields. However, it didn't recognize them until I used Name on Card and Credit Card Number as labels. As mentioned, Safari requires more than one field to enable autofill. Then I tried changing the label to CCNumber, autocomplete continued to work. But with the CC Number signature everything broke down.

The list of values ​​that Safari searches for is not published anywhere. Luckily, Jacques Caron was able to extract this list of string values ​​from the iOS emulator:

• card number
• cardnumber
• cardnum
• ccnum
• ccnumber
• ccnum
• creditcardnumber
• credit card number
• newcreditcardnumber
• new credit card
• creditcardno
• credit card no
• card#
• card #
• security code
• card verification
• name on credit card
• name on card
• name card
• cardholder
• card holder
• name des karteninhabers
• card type
• cardtype
• cc type
• cctype
• payment type
• expiration date
• expiration date
• expdate
• month
• date m
• date mo
• date y
• date yr

According to my experience, in both cases:

And

Name on Card Credit Card Number
autofill works in Safari and the bank card scanning function in iOS works. But if you put the same values ​​in the autocomplete attribute, it won't work.

Creating a cross-browser autofill form

With all that said, is it really possible to create a form that supports autofill across different browsers? I think yes.

At the very least, you can get very close to this goal by following four steps:

1. Add autocomplete attributes

This is the future of autofill. If browsers don't recognize the values, they ignore them. This is a great example of progressive improvement.

2. Use standard values ​​for name attributes

When implementing autocomplete in Firefox and Edge, you just have to hope that the values ​​you choose for the name attribute match those that other developers use on their sites. To do this, you can analyze popular sites and see what values ​​are there. Or you could use the same values ​​as the autocomplete attribute, in the hope that as more web developers become familiar with the standards, they will be more likely to use the same names for their fields.

Unfortunately, there is no way to guarantee that Firefox and Edge users have previously visited a form that uses the same name values ​​as your form.

3. Add name and/or label values ​​according to the list used in Safari

Using Jacques Caron's extracted list, you can change the values ​​of the name attribute or label element to match Safari's expectations.

4. Add autocompletion to your test plan

Recently, I asked my listeners to raise their hands who had autocomplete in their testing plan. Nobody had it. I've been working in web development since 1996 and have yet to meet anyone who has autocomplete in their testing plan. This is probably some kind of blind spot for developers and designers. However, it is extremely important to test this functionality to ensure it works reliably.

Final form

Here's an example of a form that supports autofill in Chrome, Safari, Opera, Firefox, and Edge:

Name Job Title Organization Telephone Number Email

Shipping Address

Street Address City (Address Level 2) State/Province (Address Level 1) Country Name Postal Code

Do not use a real card

Name on Card Credit Card Number Expiration Month Expiration Year CVV

To see how it works, you need to, otherwise the browser will not fill in the bank card details. I also made a form with 53 fields to the autocomplete specification. No browser currently supports all of these fields.

The future of autofill and forms

Browser developers are actively working on the problem of web payments. Mozilla, Microsoft, Google and Facebook jointly created the Payment Request API. Apple participates in the Web Payments Working Group, where the Payment Request API is discussed. So Apple nominally also joined this project.

There are rumors that Apple Pay will be available on the mobile web in time for the holiday shopping season, so web payments could get a boost this time around.

The renewed interest in simplifying the payment process makes me hopeful that support for autofill detail tokens will improve in the near future. These tokens make it much easier to create forms that work with autofill.

And most importantly, autofill support will make filling out forms less tedious for our users, which will contribute to sales growth in the e-commerce segment.

Tags: Add tags

There are 2 ways to enter data on the registration pages of any sites: manually enter your login and password or use automatic filling of the fields. Autofilling forms in the Yandex browser is an assistant function that saves user data in the browser storage and, if necessary, retrieves information by inserting it on sites in the appropriate fields. When going to a page with login forms, Yandex Browser independently recognizes and fills them with suitable information.

The principle of operation of the function is extremely simple:

The introduction of user data into the fields of the login form occurs with a high degree of accuracy; any errors in the input are extremely rare. Incorrect data entry may be caused by having multiple accounts on the service, changing or restoring a forgotten password.

Is autofill safe in Yandex browser?

The answer to the question is ambiguous. If you look from a hacker’s point of view, all the data entered into the browser can actually be stolen. Trojan horses are used to steal personal data. The greatest risk is for users who use a computer in public places. When you log into the site, forms are automatically filled in; it’s not difficult to click on the “Show password” function and steal it. True, not all sites have such functionality.

If you compare the security of Yandex browser with other browsers, then there is an advantage - a secure password storage. Yandex has introduced the “Master Key” function into its product, which is a password for gaining access to the storage of information used to log into sites. Even if you gain access to your computer or steal a file with passwords from the system, you will have to enter a password to decrypt the records.

With modern Asics-based computers, cracking simple passwords takes a matter of seconds, but when setting: numbers, various symbols, letters of different case, with a password length of 12 characters or more, we are relatively safe. Deciphering such a complex password is an impossible task, it will take months, and the hacker will simply abandon the idea.

Important! The greatest danger of theft of logins and passwords occurs when a traffic interceptor enters the system, which sends data not only to the site, but also to the owner of the virus. Such a program easily bypasses blocking with a master key; the only way to combat it is to have an active antivirus in the system. Another point is that the master password must be set separately; it is not used by default.

To summarize: the function is relatively safe, but still has vulnerabilities; it is especially easy to bypass it when gaining physical access to the PC. To store important data, it is better not to use the built-in storage, but to remember passwords in your head or use more secure solutions, such as the LastPass extension.

How to add data for autofill?

By default, the data is automatically added to the browser storage; you just need to enter the data on any site. In the future, the substitution will occur automatically. If, after entering information into the browser, the login information has been changed, you will have to manually change the password. Contact information is also added manually.

Important! The browser has a function to save the card number. In general, it is convenient, but if other users have access to the computer, there is a risk of data theft.

Add a password to the Yandex browser:

Add the address:

Add a bank card number, both credit and debit will do:

1. Follow the section to add a map.
2. Click on the “Add card” button (screenshot above).
3. We indicate the name of the owner, hex code of the card and expiration date.
4. Click on “Ok”.

Add data to fill out the search phrase yourself:

How to change autofill data?

If the password was compromised or simply forgotten (had to be restored), it is also worth making the appropriate adjustments in the Yandex browser.

How to change your password:

When changing the card number or in case of changing company data, personal address, contact email, phone number, etc., we make adjustments to the data for implementation on web resources:

How to delete data for self-filling with Yandex browser?

Information gradually becomes outdated and requires updating or replacement. If outdated data is not promptly removed, it will begin to interfere with logging into websites and surfing. We decide for ourselves how often to update the information, but it needs to be done periodically.

The easiest way to delete all information used for autofill is to use the Clear History feature. We can go to the appropriate tab by pressing the hotkey combination Ctrl + Shift + Del or manually.

We clear user data for filling out web forms and search queries:

It’s even easier to delete templates for autofilling addresses and bank cards:

How to disable autofilling of forms in Yandex browser?

If the data on your computer is too valuable and it is important to prevent any risk of information theft, we recommend turning off the automatic addition of user data to web forms.

Disable the vulnerable autocomplete feature:

Alternative shutdown method:

We can also disable saving by being directly on the site, where we enter the password.

Hello! Today you will learn how to very simply and quickly disable auto-filling of forms in the Yandex browser. You've probably noticed that when you log into a website you visit often, the login form is automatically filled in with your details. That is, you do not need to constantly enter your data. The browser stores your data and provides it to you when needed.

Auto-fill can work during registration, checkout, reservation, etc. The feature is convenient, but you may want to disable it if you are using a work computer and someone else may be using your computer.

To configure this parameter, open the Yandex browser. At the top of the page on the right, click on the icon in the form of three horizontal lines. In the window that opens, click on the tab - Settings.

— Auto-fill forms with one click.

— Save passwords for sites.

— Enable phishing protection.

Note! You can configure auto-filling of forms. Next to this parameter, click on the button - Configure. A window will open. Here you can:

— Add your address.

— Add bank card details.

Further, On the add address page, you can add an address that will be automatically filled in forms. For example, when registering on the site or placing an order, etc. The same goes for card details.

All is ready! This is how quickly and easily you can enable or disable the auto-fill function in the Yandex browser!

Browsers can help you fill out fields and forms by storing the data you enter on web pages (logins, passwords, phone numbers). To prevent your browser from storing this data, disable this feature in your browser settings.

Internet Explorer

Determine browser version:

Note. To determine your browser version, simply go to

or use the instructions below.

In the browser menu, select Reference(Help). The menu bar may be hidden - press the key Alt to see her.

In the menu that opens, select About the program(About Internet Explorer).

In the window that opens, the version of the browser used can be seen in the field Version(Version).

Internet Explorer 10

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

Web Form Data(Form data) and Passwords Delete(Delete).

1. On the menu Service(Tools) select item Internet Options(Internet options).
2. On the tab Content(Content) in the block Autofill Options(Settings).

In the window Setting up autofill

3. Click the button OK to complete the setup.

To delete data that the browser has already remembered, click the button Delete autofill history(Delete AutoComplete history). Then check the boxes Web Form Data(Form data) and Passwords(Passwords) and click the button Delete(Delete).

Disable autofill:

1. On the menu Service(Tools) select item Internet Options(Internet Options).
2. On the tab Content(Content) in the block Autofill(AutoComplete) click item Options(Settings).
3. In the window Setting up autofill(AutoComplete Settings) uncheck the boxes corresponding to unnecessary data.
4. Click the button OK to complete the setup.

Removing data that the browser has already remembered:

1. On the menu Service(Tools) select item Internet Options(Internet Options).
2. On the tab Are common(General) press button Delete(Delete).
3. In the window Deleting review history(Delete Browsing History) check the boxes Web Form Data(Form data) and Passwords(Passwords).
4. Click the button Delete(Delete) to complete the deletion.

1. On the menu Service(Tools) select item Internet Options(Internet Options).
2. Go to the tab Content(Content) and in the block Autofill(AutoComplete) click button Options(Settings).
3. In the block Form(Forms) and
4. Click the button OK to complete the setup.

Clear forms(Clear Forms) and Clear passwords(Clear Passwords).

1. On the menu Service(Tools) select item Internet Options(Internet Options).
2. Go to the tab Content(Content) and in the section Personal information(Personal Information) click on the button Autofill(AutoComplete).
3. In the block Use autocomplete for(Use AutoComplete for) uncheck the boxes Form(Forms) and Usernames and passwords in forms(User names and passwords on forms).
4. Click the button OK to complete the setup.

To delete data that the browser has already remembered, in the autofill settings, click the buttons Clear forms(Clear Forms) and Clear passwords(Clear Passwords).

Firefox

Disable autofill:

Opera 10 and above

Opera 10, 11 and 12

To delete data that the browser has already saved, open the corresponding forms using the buttons Managing saved passwords And Manage autofill settings and delete individual entries.

Previous versions of Opera only allowed you to save passwords and some personal data for autofill. To disable this feature, follow the instructions provided.

To delete data that the browser has already remembered:

Chrome

Disable autofill:

To delete data that the browser has already remembered:

Safari

Select the Safari settings menu (the gear icon in the top right corner), then Settings. Go to section Autofill and uncheck the boxes From my card in the Address Book And Other forms.

To delete data that the browser has already remembered, click the button Edit(next to the field Other forms). IN

lines and click Delete, or delete the entire list at once using the button delete everything.