Как улучшить предложения автозаполнения браузера, не отключая их?

Question

Здесь десять нитей gazillion. как отключить поведение автозаполнения браузера, например Как отключить автозаполнение браузера в поле веб-формы / входном теге? . Я не хочу установить autocomplete="off" для моих полей формы. В документации MDN о том, как это сделать, говорится:

Важно знать, что при отключении автозаполнения вы нарушаете [правило WCAG 1.3.5]

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

Как так, я могу Выясните, почему многие разработчики (или их руководители / клиенты) хотят полностью избавиться от этой функции. Например, когда я добавил <input name="title"> на совершенно не связанный веб-сайт, который я разрабатывал локально, мой браузер неожиданно начал предлагать мне случайную выборку вопросов, которые я задавал / редактировал на нескольких сайтах StackExchange в течение нескольких лет:

Как я могу помочь браузеру улучшить взаимодействие с пользователем здесь? Какие факторы используют браузеры при выборе текста для предложения?

• ясно, что домен не принимается во внимание, если мое тестирование с помощью localhost не вызывает более случайного автозаполнения, чем обычно?
• очевидно, по крайней мере один браузер считает, что атрибут name поля имеет универсальное значение semanti c, поскольку Chrome предлагает контент, который я набрал на других сайтах, которые также использовали name="title" в своих формах.
• влияют ли какие-либо метаданные на самой форме на предложения? Например, если бы я обернул этот ввод в <form id="my-particular-form-has-nothing-to-do-with-qa-sites-btw">, некоторые браузеры могли бы использовать автозаполнение, чтобы предлагать только предыдущие name="title" записи в my-particular-form…?

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

(Или, для начала, я неправильно понимаю цель autocomplete? Предназначено ли оно только для случаев использования, таких как учетные данные для входа, адреса доставки, номер кредитной карты и т. Д. c. И я должен использовать autocomplete="off" для всего остального?)

Answer 1

Текущее поведение автозаполнения - беспорядок!

Браузер использует различные методы для определения необходимости автозаполнения поля.

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

Они также проверяют атрибут name и атрибут type, чтобы попытаться определить, нужно ли заполнять поле автоматически.

Наконец, в зависимости от браузера, они также ищите поля, которые они ожидают увидеть вместе, и используйте связанные метки, чтобы выяснить, какие поля какие (именно поэтому важно правильно связать метки с полями формы!).

Ярким примером этого могут служить кредитные карты, на которых они ожидают увидеть имя владельца карты, номер кредитной карты, срок действия и т. Д. c.

Без по крайней мере 2 из этих элементов автозаполнение не будет работать (опять же, зависит от того, какой браузер вы используете).

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

Домен не рассматривается, как вы уже подозревали.

Однако есть несколько вещей, которые вы можете сделать: -

«Старый» способ (текущий способ)

Придайте вводу необычный атрибут имени (например, name="xA123IIasd").

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

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

Вы также можете попробовать присвоить полю немного другую метку, чем стандартная, если это не влияет удобство использования (т. е. «Ваше имя» вместо «Имя»).

Новый (лучший) способ [не поддерживается полностью]

Используйте новые опции автозаполнения, часть последнего «уровня жизни».

Поддержка неясна (то есть не могу найти их на caniuse.com, только «выключен»), но я знаю, что это работает в Google Chrome и Opera, вроде работает в Safari (некоторые элементы поддерживаются, некоторые нет) ), это лучше, чем ничего!

Вот список полных 53 опций , которые вы можете использовать.

Добавляя их к своим входам, вы можете контролировать, какие Браузер будет отображаться как опции для автозаполнения.

Для любого другого браузера выбор за вами, сниффер браузера и отключите автозаполнение или просто оставьте его как «ожидаемое поведение» (даже если это не очень удачный опыт) .

Еще одна интересная функция

Еще одна последняя функция, которую имеет новое автозаполнение, - это «секции».

Это позволяет вам «охватывать» автозаполнение определенным набором. полей.

Например: -

<fieldset>
    <legend>Package One Ship To</legend>
    <label> Address:     <textarea name="pack1Add1" autocomplete="section-packageone shipping street-address"></textarea> </label>
    <label> City:        <input name="pack1Add2" autocomplete="section-packageone shipping address-level2"> </label>
    <label> Post Code: <input name="pack1Postcode" autocomplete="section-packageone shipping postal-code"> </label>
</fieldset>
<fieldset>
    <legend>Package Two Ship To:</legend>
    <label> Address:     <textarea name="pack2Add1" autocomplete="section-packagetwo shipping street-address"></textarea> </label>
    <label> City:        <input name="pack2Add2" autocomplete="section-packagetwo shipping address-level2"> </label>
    <label> Postal Code: <input name="pack2Postcode" autocomplete="section-packagetwo shipping postal-code"> </label>
</fieldset>

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

Вы также заметите, что я использую «доставку» В случае автозаполнения, чтобы диктовать использование адреса доставки, другой вариант здесь - «выставление счетов» (это только два варианта для типов адресов на момент написания).