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

Модуль поиска не установлен.

Надежда Баловсяк

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

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

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

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

IE Scripter

Сайт разработчика: www.iescripter.com
Размер дистрибутива: 1,2 Мб
Статус: Shareware

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

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

Кроме этого способа заполнения, вы можете сохранить в базе данных IE Scripter стандартный набор значений, который программа будет использовать при заполнении встреченных на веб-страницах форм. Эти параметры следует задать в окне настроек программы. Следует заметить, что набор стандартных параметров недостаточный, и их не всегда хватает для заполнения форм. Эти параметры можно загрузить из набора, сохраненного в настройках Internet Explorer. Кроме того, в программе отсутствует возможность редактирования списка ключевых слов, по которым определяется тип поля в веб-форме.

Программа обладает гибкими настройками. Настройки можно сохранить в специальном файле. Среди дополнительных возможностей программы можно отметить инструмент генерации паролей и просмотр cookies.

iNetFormFiller

Сайт разработчика: www.inetformfiller.com
Размер дистрибутива: 2,8 Мб
Статус: Shareware

После установки и обязательной регистрации программы iNetFormFiller в системном трее будет размещен ее значок.

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

В браузер Internet Explorer после установки программы встраивается дополнительная панель инструментов iNEtFormFiller.

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

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

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

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

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

RoboForm

Сайт разработчика: www.roboform.com
Размер дистрибутива: 1,8 Мб
Статус: Shareware

Функциональные возможности RoboForm выделяют эту программу из аналогов, делая ее одной из лучших в своей категории.

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

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

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

Следует отметить широкие возможности настройки программы. Например, RoboForm позволяет полностью настроить состав контекстного меню Internet Explorer, также доступна настройка комбинаций клавиш, применяемых программой для заполнения форм.

WebM8

Сайт разработчика: www.m8software.com
Размер дистрибутива: 1,59 Мб
Статус: Shareware

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

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

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

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

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

Итак, приступим.

Как установить менеджер автозаполнения по умолчанию

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

Оттуда прокрутите вниз и коснитесь записи «Система», а затем нажмите «Языки и ввод» на странице «Система».

На странице «Языки и ввод» есть только несколько вариантов, но Вам нужно нажать «Расширенные настройки», чтобы открыть остальные.

В разделе «Помощь при вводе» коснитесь опции «Автозаполнение».

Если у Вас нет другого подходящего приложения, единственным вариантом, который Вы увидите здесь, будет «Автозаполнение от Google». Однако, если у Вас установлены совместимые приложения, они будут перечислены здесь. Вы можете видеть, что я выбрал публичную бета-версию LastPass, о которой я упоминал ранее, и она использует новый API автозаполнения.

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

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

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

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

Приложение ВКонтакте уже поддерживает автозаполнение и вот как это выглядит:

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

Данные для подстановки мы заранее указываем с помощью JavaScript. Затем активируем плагин для определенного поля.

Плюс решения в том, что можно использовать разные переменные для нескольких полей.

C какими полями использовать автозаполнение?

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

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

Главная задача сводится к заполнению переменной данными, которые будут подставляться в поле формы.

Как предоставить данные для выбора?

Для этого мы воспользуемся JavaScript. Если вы не обладаете навыками программирования на этом языке, не расстраивайтесь, они вам не понадобятся. Просто следуйте инструкции. Откройте любой текстовый редактор, подойдет даже "Блокнот":

После готовности страницы, определим массив city и добавим в него список городов через запятую:

$(document).ready(function(){ var city = new Array("Москва", "Санкт-Петербург", "Хабаровск"); });

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

Не закрывайте и не сохраняйте файл в блокноте. В следующем пункте мы добавим в него инициализацию плагина.

Подключение плагина jquery.autocomplete.pack

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

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

Для корректного отображения нам понадобятся и CSS стили. Добавьте следующие стили в CSS интернет магазина:

Ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; } .ac_loading { background: white url("/img/indicator.gif") right center no-repeat; } .ac_odd { background-color: #eee; } .ac_over { background-color: #0A246A; color: white; }

Также добавьте в папку /img изображение indicator.gif .

Теперь давайте вернемся к нашему блокноту:

Теперь сохраняем наш файл. Я назвал его ac-city.txt. и задал кодировку UTF-8:

Конечно, мы не можем использовать файл с расширением.txt как скрипт, поэтому нажмите по кнопке "Переименовать" напротив файла и измените расширение на.js: