Skip to content

Автозаполнение форм #48

@nikolai-shabalin

Description

@nikolai-shabalin

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

Если честно, я не знаю как поможет автозаполнение слепому человеку, но доступность точно повысит. Поэтому всё-таки предложу добавить текст про автозаполнение форм.

Я думаю пользователю очень понравится, когда сайт предложит ему автозаполнить стандартную форму - имя, email, номер телефона, адрес в целом те поля, которые часто используются. Я вспомнил только четыре.
Автозаполнение снижает вероятность ошибки при вводе.

Сами же браузеры предлагают сохранить данные о "своем хозяине" - https://support.google.com/chrome/answer/142893 , нам остаётся только подсказать браузеру, о чём тот или иной input.

Для подсказки следует использовать атрибуты name и autocomplete.

В спецификации даётся длинющий список:

  • "name"
  • "honorific-prefix"
  • "given-name"
  • "additional-name"
  • "family-name"
  • "honorific-suffix"
  • "nickname"
  • "username"
  • "new-password"
  • "current-password"
  • "organization-title"
  • "organization"
  • "street-address"
  • "address-line1"
  • "address-line2"
  • "address-line3"
  • "address-level4"
  • "address-level3"
  • "address-level2"
  • "address-level1"
  • "country"
  • "country-name"
  • "postal-code"
  • "cc-name"
  • "cc-given-name"
  • "cc-additional-name"
  • "cc-family-name"
  • "cc-number"
  • "cc-exp"
  • "cc-exp-month"
  • "cc-exp-year"
  • "cc-csc"
  • "cc-type"
  • "transaction-currency"
  • "transaction-amount"
  • "language"
  • "bday"
  • "bday-day"
  • "bday-month"
  • "bday-year"
  • "sex"
  • "url"
  • "photo"

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

тип контента name autocomplete
Имя name fname mname lname name (полное имя), given-name (имя), additional-name (отчество), family-name (фамилия)
Адрес эл. почты email email
Адрес address city postal country street-address, postal-code, country
Телефон phone mobile country-code area-code exchange suffix ext tel

из таблицы следует, что инпут должен получится вот таким

<label for="name">Введите ваше имя</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Введите адрес электронной почты</label>
<input type="email" id="email" name="email" autocomplete="email">

<label for="tel">Введите номер мобильного телефона</label>
<input type="tel" id="tel" name="mobile" autocomplete="tel">

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions