—»     —»   Применяем атрибут Autocompletetype в HTML-формах
  Раздел: Формы   Нет комментариев  

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



На большинстве сайтов в интернете можно видеть формы, предназначенные для различных целей, будь то регистрация пользователей, прием заказов, бронирование билетов, либо просто ввод имени. Для большинства пользователей заполнение всяческих форм кажется очень утомительным и надоедливым занятием, и они не всегда вводят имя, 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: «Как и в любом предложении на начальной стадии, мы ожидаем, что в ближайшее время подход положительно зарекомендует себя, и в него будут внесены необходимые изменения и улучшения, чтобы получить отзывы от сообщества».
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 10800   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930