Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nikolai-shabalin opened this issue Nov 29, 2017 · 7 comments
Open

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

nikolai-shabalin opened this issue Nov 29, 2017 · 7 comments

Comments

@nikolai-shabalin
Copy link
Contributor

nikolai-shabalin commented Nov 29, 2017

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

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

Я думаю пользователю очень понравится, когда сайт предложит ему автозаполнить стандартную форму - имя, 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">
@pepelsbey
Copy link
Member

@asuhoverhova, что думаешь? Кажется, что добавить подраздел «Автозаполнение» в раздел «Формы ввода» — хорошая идея.

@nikolai-shabalin
Copy link
Contributor Author

Здесь спрошу.
@pepelsbey , weblind.ru всё же про помощь слепым или про то как сделать доступнее?

@pepelsbey
Copy link
Member

У нас есть изначальная идея, с которой сайт запустился, и планы по развитию. Мне бы хотелось, чтобы задача стала шире. Чтобы мы рассказали про то, как сделать сайты контрастнее, доступнее для нарушений моторики и т.п. То есть речь не только о незрячих и слабовидящих.

@nikolai-shabalin
Copy link
Contributor Author

Тогда при перевёрстке надо не забыть про тексты. Сейчас складывается впечатление, что он исключительно для слепых или с нарушениями по зрению.

@userAlexander
Copy link

userAlexander commented Dec 1, 2017 via email

@pepelsbey
Copy link
Member

@userAlexander, обсудить можно в Слаке Веб-стандартов, почитать на сайте Inclusive Components.

@userAlexander
Copy link

userAlexander commented Dec 1, 2017 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants