Помогите избежать повторного ввода данных¶

Сделать заполнение форм более удобным для пользователей.

После изучения элемента форма и способов создания интерактивной формы давайте посмотрим, как можно помочь пользователям избежать повторного ввода данных.

Используйте автозаполнение по максимуму¶

Заполнение форм может отнимать много времени. Например, повторное введение адреса на каждом сайте, где вы хотите что-то купить, - не лучший способ совершения покупок.

Здесь вам поможет автозаполнение. Вы вводите свой адрес один раз. С этого момента браузер предложит вам возможность автоматически вводить тот же адрес в другие формы.

Вы переехали в другой город? Не беспокойтесь о том, что старый адрес навсегда останется в качестве опции. Вы можете отредактировать сохраненные браузером адресные данные, чтобы сохранить их в актуальном состоянии.

Браузеры также помогают запоминать данные. Вы регистрируетесь на каком-либо сайте. В поле для ввода пароля вам предлагается сгенерировать и сохранить надежный пароль. Если впоследствии вы захотите войти на тот же сайт, браузер предложит вам ввести сохраненный пароль.

Как работает автозаполнение в браузере?¶

На разных сайтах адресное поле может выглядеть совершенно по-разному. Как браузер определяет, что это поле адреса?

Браузеры используют эвристику для идентификации адресного поля. Каковы значения атрибутов name, type и id? Присутствует ли на элементе управления формы атрибут автозаполнение?

На основе этой информации браузеры могут предложить возможность автозаполнения поля ранее введенными данными того же типа. Браузеры могут даже предложить автозаполнение всей формы.

Помощь браузерам с автозаполнением¶

Давайте посмотрим, что можно сделать, чтобы браузеры предлагали правильные варианты автозаполнения.

Используйте разумные значения атрибутов¶

Как вы уже узнали, браузеры могут определять тип данных, глядя на атрибуты элемента управления формы.

<label for="email">Email</label>
<input type="email" name="email" id="email" />

У вас есть поле, в которое пользователи должны вводить свой адрес электронной почты? Используйте email в качестве значения для атрибутов name, id и type. Три подсказки браузеру, что это поле электронной почты.

Атрибут автозаполнения¶

Существуют и другие примеры, в которых браузеру может быть сложно определить тип данных только по атрибутам name, id и type. Здесь можно помочь, используя атрибут autocomplete.

Вводили ли вы ранее имя в используемом браузере? Вероятно, в демонстрационном примере браузер предложит вам ввести его снова для этого поля.

Подробнее об использовании autocomplete и autofill вы можете узнать в одном из следующих модулей.

Ресурсы¶

Источник — Help users avoid re-entering data in forms