Расскажу об одной особенности автозаполнения браузеров, которая мешает сделать форму входа

О чем речь

Допустим, у нас есть некоторая форма входа, что-нибудь такое:

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

Получится что-то такое:

Большинство сервисов в интернете делает именно так. Я пособирал немного форм входа из разных сервисов. Вот:

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

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

Специальный джаваскрипт-код проверяет значения обоих полей, и если в обоих что-то вписано - включает кнопку входа.

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

Кажется, что теперь все хорошо:

В чем проблема

Есть ещё вторая проблема блокировки формы входа - проблема сломанного Яндекса

Но здесь суровая реальность вмешивается в дизайн. Если в Хроме сработает автозаполнение, то поля будут заполнены (хром подсветит автозаполненные поля желтым), но кнопка будет заблокирована:

WTF? Что происходит?

Это сработала система безопасности в Хроме. Если включено автоматическое заполнение полей, то Хром заполняет поля, но доступа к их значениям через джаваскрипт не будет. Доступ к значениям полей будет заблокирован до тех пор, пока пользователь явно не повзаимодействует со страницей, например, не кликнет куда-нибудь мышкой. Так они защищаются от кражи данных на плохо сделанных сайтах, где есть XSS-уязвимости.

Вот задача в баг-трекере Хрома: bugs.chromium.org/p/chromium/issues/detail?id=163072 .

Причём если пользователь кликнет по заблокированной кнопке входа, то защита сразу отключится, джаваскрипт получит содержимое полей, включит кнопку и она даже успеет нажаться тем же самым кликом! Т. е. форма на самом деле будет работать. Никто только в здравом уме не будет кликать по заблокированной кнопке.

Как можно выкрутиться

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

1. Отлавливать автозаполнение поля

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

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

2. Дать нажать, но не показывать две красных надписи

Второй способ - не блокировать кнопку, но при этом не показывать два красных сообщения «Дорогой пользователь, нам жаль, что вы не способны справиться с заполнением двух полей». Можно обойтись с отправкой пустой формы более изящно. Например, можно потрясти формой входа, как это делает Цеплин (http://app.zeplin.io).

3. Поменять дизайн так, чтобы защита Хрома отключалась

Третий вариант - переделать дизайн так, чтобы пользователь был вынужден повзаимодействовать со страницей. В этом случае Хром отключит защиту и блокировка-разблокировка формы будет сработать корректно.

Например, на сайте Студии Лебедева вход находится во всплывающем окне, поэтому к тому моменту, как появится форма входа Хром отключит все защиты и автозаполнение не помешает.

Эппл показывает поле пароля только после клика по полю логина, и к этому моменту паранойя браузеров спадает, автозаполнение тоже срабатывает:

Вот такие пироги.

Каждый день пользователям интернета приходится заполнять различные формы на сайтах, в интернет-магазинах. И это часто отнимает наше драгоценное время.

Возьмем, к примеру сайт одного туроператора. Как много полей, неправда ли?

И надо сказать, что достаточно обременительно заходить в каждое и выбирать. Особенно, если приходится это делать несколько раз.

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

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

Особенности программы XWeb Human Emulator

• Автозаполнение форм и текстовых полей.
• Запись и повтор работы с любым элементом сайта.
• Сбор, сравнение, хранение и отправка данных.
• Есть встроенный планировщик задач, который можно запускать в назначенное вами время.
• Во время работы можно свернуть ее в систрэй. Это никак не скажется на производительности других приложений.

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

А теперь, я на примере покажу, как можно автоматизировать процесс заполнения формы на сайте.

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

В адресную строку (выделено желтым маркером). Ниже, в правой части окна программы, подгружается веб-страница с формой для поиска и бронирования туров.

2. Выбираем в главном меню раздел «Макрос» и нажимаем на «Запись». Тоже самое можно сделать, нажав горячие клавиши Ctrl+Shift+R . Теперь программа будет записывать все наши действия в отдельный макрос.

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

Использование автозаполнения

Для использования введенного ранее значения:

1. Введите несколько первых символов записи в поле формы. Firefox отобразит выпадающий список с совпадающими по начальным символам значениями, которые вы вводили сюда ранее.
   • Вы можете увидеть список всех записей, сохранённых для определенного поля формы, нажав клавишу ↓ , когда поле является пустым.
2. Нажмите клавишу ↓ для выбора записи, которую вы хотите повторно использовать. Когда подходящая запись будет подсвечена, нажмите Enter Return . Текст записи появится в поле формы. Также Вы можете выбрать нужное значение щелчком мыши.

Удаление отдельных запомненных значений

Если вы хотите убрать из списка автозаполнения какое-либо значение:

1. Установите курсор в поле формы и нажмите ↓ для отображения всех запомненных значений. Также вы можете уточнить выбор, введя несколько первых символов.
2. С помощью указателя мыши или клавиши ↓ подсветите нужное значение.
3. Нажмите Shift + Delete . Запись будет удалена.

Повторите процесс для каждой записи, которую вы хотели бы удалить.

Очистка истории заполнения форм

Если вы хотите, чтобы Firefox удалил все ранее введённые записи в формы:

Как отключить автозаполнение и запретить Firefox запоминать дальше введенные в формы значения

Если Вы хотите чтобы Firefox не запоминал значения введенные в поля форм, вы можете отключить функцию автозаполнения форм:

Запрет на запоминание введенных значений также отключит историю поиска в Панели поиска в панели навигации.

Устранение проблем

Если Вы обнаружили, что Firefox не запоминает значения, введенные в поля форм, либо Вы не можете их выбрать, прочтите, пожалуйста, статью

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

Многим пользователям такая система нравится, но часто смущает именно наличие функции автозаполнения. Её возможно полностью отключить, а как именно это делается, пользователи смогут узнать сейчас.

Как выключить автозагрузку на браузере, особенности настроек google chrome

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

Автозаполнение – где находится этот параметр и как его изменить

Гугл хром – это достаточно быстрый браузер, которым пользуются больше 80% людей, имеющих дело с компьютерной техникой. Система использует автозагрузку, чтобы облегчить пользователю жизнь, сэкономить его время, ввести данные правильно с первого раза. Если человеку необходимо по каким-то причинам удалить именно эту настройку, ему стоит поступить следующим образом:

Удаление функции автозаполнения, владельцами персональных компьютерных устройств и мобильных гаджетов, должно производиться по одинаковому алгоритму. Чтобы удалить автозаполнение, пользователю понадобится всего несколько минут, настройка автозаполнения может производиться и следующим образом:

• пользователь должен зайти в меню общих настроек своего компьютера или мобильного устройства;
• пролистав полностью меню, он должен найти пункт «управление программами или приложениями»;
• посетив этот пункт, человек должен выбрать именно значок хрома и найти в его настройках автозагрузку;
• после того, как пользователь осуществит вход в этот пункт, он должен удалить данные и перезагрузить chrome.

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

Chrome – как заново настроить автозапуск

Автозаполнение в chrome – это функция, которую пользователь получает вместе с установкой браузера. После того, как пользователем отключалось автозаполнение, он может самостоятельно восстановить эту функцию. Для того чтобы снова активировать автозаполнение, пользователю необходимо поступить следующим образом:

• на главной инструментальной панели выбрать меню настроек;
• зайти в расширенные настройки браузера и выбрать пункт «управление настройками»;
• найти подраздел «пароли и формы», при помощи нажатия на кнопку активации, запустить автозагрузку.

После произведения этих действий, для успешного изменения настроек, человеку стоит перезапустить компьютер или мобильное устройство. Автозапуск в браузере chrome – это стандартная системная настройка. Её изменение не занимает много времени, не требует усилий и подключения к интернету.

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

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

Восстановить автозапуск возможно таким же образом, как и произвести удаление автозаполнения. Проверить правильность произведённых действий пользователь сможет в меню настроек браузера или общих настройках устройства.

Люди ненавидят заполнять формы, особенно на мобильных устройствах. Формы могут быть длинными и пугающими, часто содержат большое количество шагов и проверок, и их заполнение может вызывать у пользователя недовольство и раздражение. Чтобы упростить этот процесс, браузеры уже довольно давно добавили возможность автозаполнения полей от имени пользователя. Хром сделал это 2011 году, представив Автозаполнение (Autofill) , которое может заполнить всю форму целиком, используя данные из профиля пользователя в Autofill.

В следующей версии Хрома (M43) мы сделаем заполнение форм ещё проще и быстрее: мы расширим поддержку данных с кредитных карт и адресов с карт Google. Это означает, что одни и те же данные можно будет использовать и для покупок в Google Play, и на внешних сайтах. Если вы будете использовать стандартные атрибуты автозаполнения , можете быть уверены, что пользователям будет удобно иметь дело с формами на вашем сайте, потому что автозаполнение Хрома сможет заполнить их со стопроцентной точностью.

Атрибуты автозаполнения - это способ для вас как для разработчика управлять тем, как именно браузер должен заполнить конкретное поле. Например, если вы ожидаете, что пользователь введёт название улицы, с помощью autocomplete="address-line1" вы можете подсказать браузеру какие именно данные вы ожидаете получить. Это помешает браузеру неверно угадывать и заполнять поля форм, что было бы неудобно для пользователя.

Наши наблюдения показывают, что при правильном использовании атрибутов автозаполнения в формах пользователи заполняют их примерно на 30% быстрее. А так как автозаполнение является частью стандарта WHATWG HTML , мы надеемся, что другие браузеры начнут поддерживать его в ближайшем будущем.

В прошлом многие разработчики добавляли autocomplete="off" в поля форм, чтобы заблокировать любые действия браузера, связанные с автозаполнением. В то время как Хром по-прежнему использует этот атрибут для автодополнения , он не будет использовать его для автозаполнения . Когда же следует использовать autocomplete="off" ? Например, если вы сделали свою собственную версию автодополнения для поиска. Или у вас на сайте есть формы, в которые пользователи вводят различные данные, которые браузеру помнить не обязательно.

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

Основные атрибуты

Имя

Почта

Адрес

Телефон

Атрибуты автозаполнения могут быть дополнены именем раздела, например:

• shipping - имя
• billing - адрес улицы

Пример формы оплаты

Полезные привычки при работе с формами

Используйте лейблы для полей ввода и убедитесь, что они отображаются, когда поле в фокусе. Элемент label подсказывает пользователю какую информацию нужно ввести в поле. Лейбл может быть связан с текстовым полем путём размещения поля внутри элемента label . Применение лейблов для элементов формы также позволяет удобнее вводить данные: пользователь может кликнуть как на текстовое поле, так и на его лейбл, чтобы установить фокус на поле и начать вводить текст.

Используйте плейсхолдеры как подсказки для полей ввода. Атрибут placeholder подсказывает пользователю какое содержимое ожидается в текстовом поле. Как правило, подсказки показываются светлым текстом, пока пользователь не начнёт печатать, и исчезают, как только пользователь начинает вводить текст. Таким образом, плейсхолдеры не являются заменой для лейблов, и должны быть использованы скорее как подсказки, чтобы сориентировать пользователя относительно содержимого поля и его формата.

Демо

Оригинальная статья: Help users checkout faster with Autofill Статью вычитывали: SilentImp , greybax , yoksel , FMRobot