Создание функциональных форм с помощью HTML5

HTML5 Rocks

Введение

Интерес к формам невелик, однако в HTML5 реализованы существенные улучшения как для разработчиков, создающих их, так и для пользователей, их заполняющих. Новые элементы и атрибуты форм, типы элементов ввода, проверка на основе браузера, методики создания стилей CSS3 и объект FormData делают создание форм проще и приятнее.

There is even more up to date forms guidance on our new Web Fundamentals site.

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

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

Обзор нововведений

Новые элементы

В языке HTML5 представлено пять новых элементов, связанных с вводом данных и формами.

Элемент Назначение Примечания
progress Представляет ход выполнения задачи. Элемент progress может представлять состояние загрузки файла.
meter Представляет значение по шкале в известном диапазоне. Элемент meter можно использовать, например, для измерения температуры или веса.
datalist Представляет набор элементов option, которые могут использоваться в сочетании с новым атрибутом list для создания раскрывающихся меню. Когда пользователь переходит к вводу данных в области, связанной со списком данных, появляется раскрывающееся меню со значениями из перечня datalist.
keygen Элемент управления для создания пар ключей. При отправке формы в локальное хранилище заносится закрытый ключ, а на сервер отправляется открытый ключ.
output Отображает результаты расчета. Примером использования элемента output может служить вывод суммы значений двух введенных элементов.

Новые типы элементов ввода

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

Тип элемента ввода Назначение Примечания
tel Ввод номера телефона. Элемент tel не принуждает к вводу текста в определенном формате: для этого можно использовать элемент pattern или метод setCustomValidity(), осуществляющий дополнительную проверку.
search Предлагает пользователю ввести текст, который необходимо найти. Разница между search и text заключается в основном в оформлении. Для типа search поле ввода можно оформить в соответствии с полями поиска данной платформы.
url Ввод одного URL. Элемент url используется для ввода отдельного абсолютного URL, который представляет довольно широкий диапазон значений.
email Ввод одного адреса электронной почты или списка адресов. Если указан атрибут multiple, можно ввести несколько адресов электронной почты через запятую.
datetime Ввод даты и времени в часовом поясе UTC.
date Ввод даты без часового пояса.
month Ввод даты с указанием года и месяца, но без часового пояса.
week Ввод даты, состоящей из номера недели и года, но без часового пояса. Пример этого формата – 2011-W05 для пятой недели 2011 года.
time Ввод времени с указанием часов, минут, секунд и долей секунды, но без часового пояса.
datetime-local Ввод даты и времени без часового пояса.
number Ввод числовых данных. Допустимые значения – числа с плавающей запятой.
range Ввод числовых данных (в отличие от типа number само число не играет роли). Реализация этого элемента управления диапазона в большинстве поддерживающих его браузеров – ползунок.
color Выбор цвета с помощью цветового круга. Значение должно быть действительным простым цветом в нижнем регистре, например #ffffff.

Новые атрибуты ввода

В HTML5 также представлено несколько новых атрибутов для элементов ввода и формы.

Атрибут Назначение Примечания
autofocus Фокусирование ввода на элементе, когда страница загружена. Атрибут autofocus может применяться к элементам input, select, textarea и button.
placeholder Подсказка для пользователя о типе данных, которые необходимо ввести. Значение заполнителя отображается светлым текстом, пока элемент не будет выделен и пользователь не введет данные. Этот атрибут можно указывать в элементах input и textarea.
form Указание одной или нескольких форм, которым принадлежит элемент ввода. С помощью атрибута form элементы ввода можно размещать в любой части страницы, а не только в объекте формы. Кроме того, отдельный элемент можно связать с несколькими формами.
required Логический атрибут, который означает, что элемент обязателен. Атрибут required полезен при выполнении проверки на основе браузера без использования специального кода JavaScript.
autocomplete Позволяет указать, что в поле не должно использоваться автозаполнение и в него не следует подставлять значения, ранее введенные пользователем. Атрибут autocomplete полезен для таких полей, как номер кредитной карты или одноразовый пароль, которые не следует заполнять автоматически. По умолчанию атрибут autocomplete имеет состояние on ("вкл."). Чтобы отключить его, установите значение off ("выкл.").
pattern Проверка значения элемента на основе регулярного выражения. Если используется атрибут pattern, следует также указать значение title, описывающее для пользователя предполагаемый шаблон ввода.
dirname Предназначен для отправки сведений о направлении элемента управления вместе с формой. Например, если пользователь ввел текст справа налево, а элемент ввода содержит атрибут dirname, то вместе с введенным значением будет отправлен параметр направления.
novalidate Если в элементе формы указан этот атрибут, проверка ее отправки отключается.
formaction Переопределение атрибута action в элементе формы. Этот атрибут поддерживается в элементах input и button.
formenctype Переопределение атрибута enctype в элементе формы. Этот атрибут поддерживается в элементах input и button.
formmethod Переопределение атрибута method в элементе формы. Этот атрибут поддерживается в элементах input и button.
formnovalidate Переопределение атрибута novalidate в элементе формы. Этот атрибут поддерживается в элементах input и button.
formtarget Переопределение атрибута target в элементе формы. Этот атрибут поддерживается в элементах input и button.

Объект FormData

Одно из усовершенствований технологии 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", "The best part ever!");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);

Проверка на основе браузера

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

Новые атрибуты ввода, такие как required и pattern, в сочетании с селекторами псевдоклассов CSS, облегчают написание проверок и обратную связь с пользователями. Есть и другие усовершенствованные методы проверки, которые позволяют с помощью кода JavaScript задавать специальные правила и сообщения, а также определять недопустимость элемента и ее причины.

Атрибут required

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

<input type="email" id="email_addr" name="email_addr" required />

Атрибут pattern

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

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

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

:invalid {
  border: 2px solid #ff0000;
}

Атрибут formnovalidate

Атрибут formnovalidate можно применять к элементам input и button. Он включает проверку отправки формы. Ниже приведен пример, в котором для отправки формы с помощью кнопки "Отправить" требуется действительное значение, однако для ее отправки с помощью кнопки "Сохранить" оно не требуется.

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
       title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">

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

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

<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

Сборка

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

 990,00 р.

Код HTML и JavaScript для формы:

<form oninput="total.value = (nights.valueAsNumber * 99) + 
 ((guests.valueAsNumber - 1) * 10)">

  <label>Full name:</label>
  <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>

  <label>Email address:</label>
  <input type="email" id="email_addr" name="email_addr" required>

  <label>Repeat email address:</label>
  <input type="email" id="email_addr_repeat" name="email_addr_repeat" required 
   oninput="check(this)">

  <label>Arrival date:</label>
  <input type="date" id="arrival_dt" name="arrival_dt" required>
  
  <label>Number of nights (rooms are $99.00 per night):</label>
  <input type="number" id="nights" name="nights" value="1" min="1" max="30" required>

  <label>Number of guests (each additional guest adds $10.00 per night):</label>
  <input type="number" id="guests" name="guests" value="1" min="1" max="4" required>

  <label>Estimated total:</label>
  $<output id="total" name="total">99</output>.00
  <br><br>

  <label>Promo code:</label>
  <input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" 
   title="Promo codes consist of 6 alphanumeric characters.">

  <input type="submit" value="Request Reservation" /> 
</form>

<script>
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

CSS для кода формы:

:invalid { 
  border-color: #e88;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);
}

:required {
  border-color: #88a;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}

form {
  width:300px;
  margin: 20px auto;
}

input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border:1px solid #ccc;
  font-size:20px;
  width:300px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;

  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;
}

input[type=submit] {
  background:none;
  padding:10px;
}

Ссылки

Comments

0