Главная > Формы > Применяем атрибут Autocompletetype в HTML-формах

Применяем атрибут Autocompletetype в HTML-формах


27 марта 2013, 14:30. Разместил: Design FactoRy
На большинстве сайтов в интернете можно видеть формы, предназначенные для различных целей, будь то регистрация пользователей, прием заказов, бронирование билетов, либо просто ввод имени. Для большинства пользователей заполнение всяческих форм кажется очень утомительным и надоедливым занятием, и они не всегда вводят имя, email-адрес, домашний адрес, почтовый индекс или номер телефона.

Применяем атрибут Autocompletetype в HTML-формах
(Image by Pawel Kadysz)

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

Атрибут autocomplete?

Автоматическое заполнение – это не новшество. У нас уже давно была возможность использовать эту функцию при помощи старого атрибута autocomplete. Эти два атрибута – autocomplete и autocompletetype – в общем, выполняют одну и ту же задачу. Единственное различие заключается в дизайне.

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

Как утверждается в предложении, на данный момент существующие функции автоматического заполнения основаны на контексте: атрибутах name attribute, input, или текст placeholder, которые позволяют определить, какой тип данных должен быть введен в ту или иную форму (и такой метод не подходит в некоторых ситуациях).

Применение AutocompleteType

На момент написания этой статьи, этот атрибут указывался следующим образом: x-autocompletetype, и принимал типы данных для необходимой в онлайн-форме информации вроде full-name, street-address, city, postal-code и country-name.

Следующий отрывок кода демонстрирует нам пример реализации.

<form method="get" accept-charset="utf-8">
<label for="namadepan">Nama Depan</label>
<input id="namadepan" type="text" name="namadepan" value="" x-autocompletetype="given-name">
<label for="namabelakang">Nama Belakang:</label>
<input type="text" name="namabelakang" value="" x-autocompletetype="family-name">
<label for="email">Email</label>
<input id="email" type="text" name="email" value="" x-autocompletetype="email">
<label for="telp">Telp.</label>
<input id="telp" type="text" name="telephone" value="" x-autocompletetype="tel">
<label for="fax">Fax</label>
<input id="fax" type="text" name="fax" value="" x-autocompletetype="fax">
</form>

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

В завершение

Можем ли мы уже сейчас использовать этот атрибут? Вкратце, да! Браузеры или приложения, которые не поддерживают этот атрибут, будут просто игнорировать его. Конечно же, браузеры вроде Google Chrome позволяют нам извлечь все преимущества из этого новшества.

Тем не менее, на данный момент атрибут находится в экспериментальной стадии, и лично мы не стали бы применять его в серьезных проектах. Конечно же, в будущем все может измениться и, как сообщается в Google Webmaster Central: «Как и в любом предложении на начальной стадии, мы ожидаем, что в ближайшее время подход положительно зарекомендует себя, и в него будут внесены необходимые изменения и улучшения, чтобы получить отзывы от сообщества».
Вернуться назад