I’ll tell you about one feature of browser autofill that prevents you from creating a login form

What are we talking about?

Let's say we have some login form, something like this:

If you click the button right now, the form will be submitted. The login and password are not specified, so the standard validation for the service usually works, and the form somehow informs that two fields need to be filled out.

You'll get something like this:

Most services on the Internet do exactly this. I collected a few login forms from different services. Here:

When submitting a blank form, one or two error texts are shown. Many may think that this is not very polite.

In order not to force validation of an empty form, you can disable the login button until something is filled in both fields. Validating that both fields are empty will simply never work.

A special JavaScript code checks the values ​​of both fields, and if something is entered in both, it turns on the login button.

Strictly speaking, in order for the login form to work for people with javascript disabled, it is better to do this: when the page loads, the button is active, then javascript turns the button off, and another one turns it back on when the fields are filled. If the user does not have javascript, the button will be enabled and he will be able to submit the form.

Everything seems to be fine now:

What is the problem

There is also a second problem with blocking the login form - the problem of broken Yandex

But here harsh reality interferes with the design. If autofill works in Chrome, the fields will be filled in (Chrome will highlight autofill fields in yellow), but the button will be blocked:

WTF? What's happening?

It was the security system in Chrome that triggered. If automatic filling of fields is enabled, then Chrome fills in the fields, but there will be no access to their values ​​through JavaScript. Access to field values ​​will be blocked until the user explicitly interacts with the page, for example, by clicking somewhere with the mouse. This protects them from data theft on poorly designed sites with XSS vulnerabilities.

Here is the issue in the Chrome bug tracker: bugs.chromium.org/p/chromium/issues/detail?id=163072.

Moreover, if the user clicks on a blocked login button, the protection will immediately turn off, the javascript will receive the contents of the fields, enable the button, and it will even have time to click with the same click! That is, the form will actually work. No one in their right mind would click on a blocked button.

How can you get out

To get away from the problem, you can always return to the behavior that was originally - do not block the button and let it be pressed. But if you don’t want to do that, here are some other options:

1. Catch field autocomplete

In fact, an autofilled field can be distinguished from empty ones. If the application understands that autofill was triggered, then the login button is enabled, even if the javascript says that the login and password fields are empty.

I'm not a real front-end developer, but the solution smells like crutches. Use methods that are not intended for this - The best way get a regression error the next time you update Chrome. I don’t want to use such a solution in production.

2. Allow to press, but do not show two red inscriptions

The second way is not to block the button, but at the same time not to show two red messages “Dear user, we are sorry that you are not able to cope with filling out two fields.” You can handle submitting an empty form in a more elegant way. For example, you can shake the login form, as Zeplin does (http://app.zeplin.io).

3. Change the design so that Chrome protection is disabled

The third option is to redesign it so that the user is forced to interact with the page. In this case, Chrome will disable the protection and blocking/unblocking the form will work correctly.

For example, on the Lebedev Studio website, the login is in a pop-up window, so by the time the login form appears, Chrome will have disabled all protections and autofill will not interfere.

Apple shows the password field only after clicking on the login field, and by this point the paranoia of browsers subsides, autofill also works:

These are the pies.

Every day, Internet users have to fill out various forms on websites and online stores. And this often takes away our precious time.

Let's take, for example, the website of one tour operator. So many fields, isn't it?

And I must say that it is quite cumbersome to go into each one and choose. Especially if you have to do this several times.

After all, the selection of a tour according to the parameters you set is not always available and you have to adjust the conditions. But if you definitely decide to find a tour that 100% meets your requirements, and despite the fact that there are not always places available, then re-entering the same search parameters every time will be a fairly routine task.

A program will help us with this - a constructor of scripts that allows you to automate any actions in the browser, which is called . To give you an idea about this program, I will list only the basic functionality.

Features of the XWeb Human Emulator program

• Autofill forms and text fields.
• Record and repeat work with any element of the site.
• Collection, comparison, storage and sending of data.
• There is a built-in task scheduler that can be launched at the time you designate.
• While working, you can roll it up into a systray. This will not affect the performance of other applications in any way.

As you can see, even this is enough to call the program functionally rich.

And now, I’ll show you with an example how you can automate the process of filling out a form on a website.

Autofill form

In the address bar (highlighted with a yellow marker). Below, on the right side of the program window, a web page with a form for searching and booking tours is loaded.

2. Select the “Macro” section in the main menu and click on “Record”. The same can be done by pressing the hot keys Ctrl+Shift+R. Now the program will record all our actions in a separate macro.

Firefox can remember what you type in forms on web pages, also known as text fields. Once you have entered something into such a form on a web page (such as a search field), the next time you visit the page, the previously entered values ​​will be available for reuse. This article describes how to use automatic function filling out forms and how to clear form entries or prevent it from remembering form entries.

Using AutoComplete

To use the previously entered value:

1. Enter the first few characters of the entry in the form field. Firefox will display a drop-down list with the starting characters matching the values ​​you entered here earlier.
   • You can see a list of all records saved for a specific form field by pressing the ↓ key when the field is empty.
2. Press the ↓ key to select the entry you want to reuse. When the matching entry is highlighted, click EnterReturn. The text of the entry will appear in the form field. You can also select the desired value by clicking the mouse.

Deleting individual stored values

If you want to remove any value from the autocomplete list:

1. Place the cursor in the form field and press ↓ to display all stored values. You can also refine your selection by entering the first few characters.
2. Use the mouse pointer or the ↓ key to highlight the desired value.
3. Click Shift + Delete. The entry will be deleted.

Repeat the process for each entry you would like to delete.

Clearing form history

If you want Firefox to delete all previously entered form entries:

How to disable autofill and prevent Firefox from remembering further values ​​entered into forms

If you want Firefox not to remember the values ​​entered into form fields, you can disable the form autofill feature:

Disabling the remembering of entered values ​​will also disable search history in the Search Bar in the navigation bar.

Troubleshooting

If you find that Firefox does not remember the values ​​entered into form fields, or you cannot select them, please read the article

For everyone personal computers, laptops, mobile devices With operating system Android Chrome browser installed. It is the main unit for viewing various Internet resources.

Many users like this system, but it is the presence of the autofill function that often confuses them. It is possible to disable it completely, and users will be able to find out exactly how this is done now.

How to turn off autoloading on a browser, features of google chrome settings

The polarity of the chrome browser opens up thanks to its advanced features. The system is convenient to use for searching information, downloading different files, watching videos, listening to audio. Chrome has quite a lot of useful properties, but not everyone likes the autofill function. If a person wants to remove this setting from the browser in order to be able to enter all data manually, he should pay attention to the following tips.

Autofill - where is this setting and how to change it

Google Chrome is enough fast browser, which is used by more than 80% of people dealing with computer equipment. The system uses autoloading to make the user's life easier, save time, and enter data correctly the first time. If a person needs to delete this particular setting for some reason, he should do the following:

Removing the autofill function by owners of personal computer devices and mobile gadgets should be carried out using the same algorithm. To remove autofill, the user will only need a few minutes; autofill can be configured as follows:

• the user must go to the general settings menu of his computer or mobile device;
• Having scrolled through the entire menu, he should find the item “manage programs or applications”;
• having visited this item, a person must select the chrome icon and find startup in its settings;
• After the user logs into this item, he must delete the data and restart chrome.

Both methods are suitable for the user to remove startup and erase unnecessary data.

Chrome - how to re-configure autorun

Autofill in chrome is a feature that the user receives along with the installation of the browser. After the user has disabled autofill, he can independently restore this function. In order to reactivate autofill, the user must do the following:

• on the main toolbar, select the settings menu;
• go to the advanced browser settings and select “manage settings”;
• find the “passwords and forms” subsection, by clicking on the activation button, start autoloading.

After performing these steps, to successfully change the settings, a person should restart the computer or mobile device. Autostart in chrome browser– this is standard system setting. Changing it does not take much time, does not require effort or an Internet connection.

Removing startup on a computer or mobile Chrome browser is only possible if the user visits the settings menu. If, after changing the main parameters, the system continues to operate in the previous mode, it means that the user forgot to reboot his device.

If your computer or phone restarts after deleting autofill, the problem lies in the fact that it hasn’t been updated for a long time software. It is possible to work correctly with program settings only if they are regularly updated to new versions. In all other cases, the user can remove startup very quickly and productively.

It is possible to restore autorun in the same way as deleting autofill. The user can check the correctness of the actions performed in the browser settings menu or general device settings.

People hate filling out forms, especially on mobile devices. Forms can be long and intimidating, often contain many steps and checks, and filling them out can be frustrating and frustrating for the user. To make this process easier, browsers have been adding the ability to autofill fields on behalf of the user for quite some time now. Chrome did this in 2011 by introducing Autofill, which can fill out an entire form using data from a user's Autofill profile.

In the next version of Chrome (M43), we will make filling out forms even easier and faster: we will expand support for data from credit cards and addresses from Google Maps. This means that the same data can be used for purchases in Google Play, and on external sites. If you use standard attributes autofill, you can be sure that users will have a great time interacting with the forms on your site because Chrome's autofill can fill them out with 100% accuracy.

Autocomplete attributes are a way for you as a developer to control how exactly the browser should fill a specific field. For example, if you expect the user to enter a street name, you can use autocomplete="address-line1" to tell the browser what kind of data you expect to receive. This will prevent the browser from guessing incorrectly and filling out form fields, which would be inconvenient for the user.

Our observations show that when autocomplete attributes are used correctly in forms, users complete them approximately 30% faster. And since autocompletion is part of the WHATWG HTML standard, we hope that other browsers will start supporting it in the near future.

In the past, many developers added autocomplete="off" to form fields to block any browser action related to autocomplete. While Chrome still uses this attribute for autocompletion, he won't use it for autofill. When should you use autocomplete="off" ? For example, if you made your own version of autocomplete for search. Or you have forms on your website in which users enter various data that the browser does not need to remember.

Most Common Attributes autofill are shown in the table below, and they are also described in Web Basics.

Basic Attributes

Name

Mail

Address

Telephone

Autocomplete attributes can be supplemented with the section name, for example:

• shipping- Name
• billing- Street address

Example of payment form

Useful habits when working with forms

Use labels for input fields and make sure they show up when the field is in focus. The label element prompts the user what information to enter in the field. A label can be associated with a text field by placing the field inside a label element. Using labels on form elements also makes data entry more convenient: the user can click on both a text field and its label to set focus to the field and begin typing.

Use placeholders as tooltips for input fields. The placeholder attribute tells the user what content is expected in the text field. Typically, tooltips appear in light text until the user starts typing, and disappear as soon as the user starts typing. Thus, placeholders are not a replacement for labels, and should be used rather as hints to guide the user regarding the contents of the field and its format.

Demo

Original article: Help users checkout faster with Autofill Article proofread by: SilentImp, greybax, yoksel, FMRobot