Создание форм сказочных с HTML5

  1. Вступление
  2. Поддержка браузера
  3. Новые типы ввода
  4. Проверка
  5. Атрибуты ограничения проверки
  6. Обязательный атрибут
  7. Атрибуты min, max и step
  8. Атрибут maxlength
  9. Атрибут novalidate
  10. API ограничения проверки
  11. Неверное событие
  12. Элемент Datalist
  13. Атрибут автозаполнения
  14. Атрибут автофокуса
  15. Атрибут заполнителя
  16. Стилизация с помощью CSS3
  17. Собираем все вместе
  18. Резюме

Вступление

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

Существует еще более актуальная форма руководства на нашем новом Основы Сети сайт.

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

Одно исследование Установлено, что простое предоставление встроенной проверки увеличивает успешное завершение на 22% и сокращает время до завершения на 42%.

Поддержка браузера

В настоящее время поддержка новых форм и элементов ввода широко распространена в современных браузерах, хотя часто существует некоторое различие в способе отображения некоторых средств выбора на рабочем столе. Мобильные браузеры относительно последовательно показывают правильную клавиатуру в зависимости от выбранного типа ввода. Для получения самой последней информации, проверьте состояние Особенности формы HTML5 на CanIUse.com или же Текущее состояние форм HTML5 из Wufoo.

Новые типы ввода

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

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

Тип ввода Описание URL Для ввода URL. Он должен начинаться с правильной схемы URI (например, http: //, ftp: // или mailto :). тел для ввода телефонных номеров. Он не применяет определенный синтаксис для проверки, поэтому, если вы хотите обеспечить определенный формат, вы можете использовать шаблон , электронная почта Для ввода адресов электронной почты. По умолчанию это будет только один, но если указан атрибут несколько, список адресов электронной почты через запятую действителен. поиск Поле ввода текста, стилизованное так, чтобы оно соответствовало полю поиска платформы. число Для числового ввода может быть любое рациональное целое число или значение с плавающей запятой. цвет Для выбора цвета. диапазон Для ввода чисел, но в отличие от типа ввода чисел, значение менее важно. Он отображается пользователю в виде ползунка управления. datetime Для ввода даты и времени, когда часовой пояс указан как GMT. datetime-local Для ввода значения даты и времени, где указанным часовым поясом является местный часовой пояс. дата Для ввода даты (только) без указания часового пояса. время Для ввода времени (только) без указания часового пояса. неделя Для ввода даты, состоящей из номера недели и года и номера недели, но без часового пояса. месяц Для ввода даты с указанием года и месяца, но без часового пояса.

Проверка

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

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

Атрибуты ограничения проверки

Атрибут шаблона

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

<input type = "text" id = "partNumber" pattern = "[AZ] {3} [0-9] {4}" />

Обязательный атрибут

Если обязательный атрибут присутствует, то поле должно содержать значение, прежде чем форма может быть отправлена. Например, чтобы сделать номер детали в предыдущем примере обязательным, мы просто добавили бы обязательный атрибут.

<input type = "text" обязательный id = "partNumber" pattern = "[AZ] {3} [0-9] {4}" />

Атрибуты min, max и step

Для числовых типов ввода, таких как число или диапазон, вы можете указать минимальное и максимальное значения, а также то, насколько они должны увеличиваться / уменьшаться при регулировке с помощью ползунка или счетчика.

<input type = "number" id = "qty" min = "0" max = "100" step = "1" />

Вы также можете использовать атрибуты min и max для любого типа ввода даты.

Атрибут maxlength

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

<input type = "text" id = "83filename" maxlength = "12" />

Атрибут novalidate

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

<form role = "form" novalidate> <label for = "inpEmail"> Адрес электронной почты </ label> <input type = "email" id = "inpEmail" placeholder = "Введите адрес электронной почты"> </ form>

API ограничения проверки

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

API Use willValidate Свойство, которое возвращает true или false, если элемент является кандидатом на проверку. validity Свойство, которое возвращает объект ValidityState, представляющий состояния достоверности элемента. validationMessage Свойство, которое возвращает строку с причиной, по которой объект не прошел тест проверки. checkValidity () Возвращает true, если элемент удовлетворяет всем его ограничениям, и false в противном случае. setCustomValidity () Устанавливает для пользовательского сообщения проверки и свойства customError объекта ValidityState значение true.

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

var elem = document.getElementById ("email_addr_confirm"); elem.addEventListener ("размытие", verifyEmail); function verifyEmail (input) {input = input.srcElement; if (input.value! = document.getElementById ('email_addr'). value) {// предоставленное значение не соответствует первичному адресу электронной почты input.setCustomValidity ('Два адреса электронной почты должны совпадать.'); } else {// вход действителен - сбросьте сообщение об ошибке input.setCustomValidity (''); }}

Смотрите статью на Проверка ограничений для получения дополнительной информации и дополнительного использования.

Неверное событие

В дополнение к API-интерфейсам JavaScript возникает недействительное событие, когда checkValidity () возвращает false, что позволяет вам предоставлять пользовательские сообщения. Например, вы можете установить innerText элемента-брата в validationMessage, предоставляя пользователям больше информации о том, почему проверка ввода не удалась.

input.addEventListener ("invalid", function (evt) {var elem = evt.srcElement; elem.nextSibling.innerText = elem.validationMessage;});

Элемент Datalist

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

<label for = "inpChocType"> Chocolates </ label> <input type = "text" id = "inpChocType" list = "chocType"> <datalist id = "chocType"> <option value = "white" /> <option value = "milk" /> <option value = "dark" /> </ datalist>

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

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

Атрибут автозаполнения

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

<input type = "number" id = "pinNum" min = "0" max = "9999" autocomplete = "off" />

Атрибут автофокуса

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

<input type = "text" id = "partNum" pattern = "[AZ] {3} [0-9] {4}" автофокус />

Атрибут заполнителя

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

<input type = "text" id = "partNum" pattern = "[AZ] {3} [0-9] {4}" placeholder = "XXX9999" />

Стилизация с помощью CSS3

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

  • : valid и: invalid - явно устанавливает стиль для элемента, когда ввод действителен / недействителен.
  • : обязательный и: необязательный - устанавливает стиль для элементов, которые являются обязательными или необязательными.
  • : in-range и: out-of-range - стилизация для элементов, которые поддерживают атрибут min и max

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

ввод: неверный {контур: 2px сплошной красный; } input: focus: invalid {color: red; }

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

ввод: нет (: фокус): неверно {контур: 2px сплошной красный; } вход: фокус: неверный {контур: 2px сплошной синий; }

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

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

Использование API .stepUp ()
.stepDown () Для числового ввода и ввода даты можно использовать функции stepUp () и stepDown (), чтобы настроить значение для следующего логического шага. .valueAsNumber Свойство, которое возвращает значение в виде числа, полезно для числовых входов вместо необходимости выполнять parseInt (element.value, 10) или parseFloat (element.value, 10). .valueAsDate Свойство, которое возвращает значение в виде объекта Date, полезно для ввода даты вместо того, чтобы анализировать их вручную.

Одним из улучшений XMLHttpRequest является введение объекта FormData. С помощью объекта FormData вы можете создавать и отправлять набор пар ключ / значение и, необязательно, файлы, используя XMLHttpRequest. При использовании этого метода данные отправляются в том же формате, как если бы вы отправили их через метод submit () формы с типом кодирования multipart / form-data.

FormData дает вам возможность создавать HTML-формы на лету с помощью JavaScript, а затем отправлять их с помощью XMLHttpRequest.send (). Вот простой пример:

var formData = new FormData (); formData.append ("part_num", "123ABC"); formData.append ("part_price", 7.95); formData.append ("part_image", somefile) var xhr = new XMLHttpRequest (); xhr.open ("POST", "http: //some.url/"); xhr.send (FormData);

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

var formElement = document.getElementById ("someFormElement"); var formData = new FormData (formElement); formData.append ("part_description", "Лучшая часть в истории!"); var xhr = new XMLHttpRequest (); xhr.open ("POST", "http: //some.url/"); xhr.send (FormData);

Собираем все вместе

Попробуйте демонстрация и обязательно попробуйте на мобильном устройстве ( http://goo.gl/nXbMQq )

Резюме

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

Ресурсы

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

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

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

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

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта