Формы в HTML5: Разметка
Содержание цикла статей "Формы в HTML 5":
Часть 1 Формы в HTML5: Разметка
Часть 2 Формы в HTML5: CSS
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм
Это первая статья из серии в трех частях о веб-формах на HTML5. Мы рассмотрим основы разметки перед тем, как перейти к дизайну и использованию API с помощью JavaScript.
Я рекомендую вам эту статью к прочтению, даже если вы уже знакомы с формами - вы найдете здесь множество новых атрибутов и выявите много подводных камней!
Да, HTML довольно приземленная вещь, но она необходима для большинства веб-сайтов и приложений. В HTML4 поля ввода ограничивались следующим списком:
- input type="text";
- input type="checkbox";
- input type="radio";
- input type="password";
- input type="hidden" — для скрытых от пользователя данных;
- input type="file" — для загрузок на сервер;
- textarea — для ввода длинных текстовых строк;
- select — для ниспадающих списков;
- button — обычно используется для подтверждения ввода данных в форму. Также могут использоваться input type="submit" и input type="image".
И еще в HTML4:
- ограничены возможности CSS, которые могут быть применены к формам ввода;
- пользовательские элементы управления, такие как выбор цвета и даты необходимо разрабатывать в коде;
- проверка на стороне клиента требует использования JavaScript.
Дополнительные поля ввода в HTML5
Множество новых типов input были представлены в HTML5. Они обеспечены собственной поддержкой и проверяют входные данные без написания кода на JavaScript:
| Тип | Описание |
| Для ввода email адреса | |
| Tel | Для ввода номера телефона — никакого строгого синтаксиса не применяется, но удаляются разрывы строк |
| url | Для ввода URL-адреса |
| Search | Для ввода поискового запроса, автоматически удаляются разрывы строк |
| Number | Для ввода числа размерности floating point |
| Range | Элемент управления для ввода приближенного значения. Как правило, представлен в виде слайдера |
| Date | Для ввода даты (день, месяц, год) |
| Datetime | Для ввода даты (день, месяц, год, час, минута, секунда и микросекунды, основанные на данных UTC) |
| datetime-local | Для ввода даты и времени без временной зоны |
| Month | Для ввода месяца и года без временной зоны |
| Week | Для ввода номера недели без временной зоны |
| Time | Для ввода времени без временной зоны |
| Color | Для выбора цвета |
Атрибуты ввода
Если не указано иное, поле ввода может иметь любой из следующих атрибутов. Атрибуты типа Boolean не требуют ввода значений, например, как здесь:
<input type="email" name="email" required />также
<input type="email" name="email" required="required" />Прошу заметить, что поле date использует формат YYYY-MM-DD для атрибутов value, min и max.
В следующем примере форма содержит поле обязательного ввода адреса, который обязан заканчивается на «@mysite.com» и на этом же поле стоит фокус при загрузке страницы:
<input
type="email"
name="login"
pattern="@mysite.com$"
autocomplete="email"
autofocus
required />Списки данных
Списки данных (datalist) содержат набор возможных вариантов ввода для поля input, к примеру:
<input type="text" name="browser" list="browsers" />
<datalist id="browsers">
<option value="Chrome" />
<option value="Firefox" />
<option value="Internet Explorer" />
<option value="Safari" />
<option value="Opera" />
</datalist>В случае если поддерживается datalist, браузер предоставляет пользователю варианты автоматического завершения ввода, когда тот начинает ввод.
Полный список доступных вариантов автозаполнения может также быть отображен (либо по двойному щелчку мыши, либо по нажатию кнопки вниз).
В отличие от ниспадающего списка, пользователь может ввести те данные, которые пожелает, несмотря на предложенные варианты.
Можно установить как значение, так и текст описания предлагаемых значений:
<option value="IE">Internet Explorer</option>Но имейте в виду, что браузеры по-разному отрабатывают этот код. Например, Firefox предложит завершить фразу исходя из текста описания (Internet Explorer), тогда как Google Chrome предпочтет значение (IE), а сам текст покажет серым:
Отключение проверок
Проверку формы целиком можно отключить, установив атрибут novalidate элементу form. Альтернативой этому будет установка атрибута formnovalidate кнопке/изображению подтверждения формы.
И помните о том, что установка атрибута disabled для поля ввода также отключит проверку ввода.
Поля вывода
Несмотря на то, что в первую очередь мы обсудили поля ввода, HTML5 также предоставляет доступные только для чтения поля вывода:
- output — поле для вывода результатов расчета или действий пользователя;
- progress — прогресс-бар (атрибуты value и max определяют его статус);
- meter — шкала, цвет которой может переключаться между зеленым, желтым и красным в зависимости от значений, установленных для атрибутов value, min, max, low, high и optimum.
Разделение и маркировка полей ввода
Возьмем спецификации форм с whatwg.org:
Интересно получается. Обычно я использую тег DIV, хотя вряд ли это имеет значение с семантической точки зрения. Тег просто короче, хотя, вполне возможно, вам придется применять классы для модификации полей.
Здесь важно то, что вы должны использовать элемент label рядом с самим полем ввода и атрибутом for, объявляя ID поля ввода, например:
<p>
<p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" />
</p>
<p>
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" />
</p>
<p>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" />
</p>
<p>
<label>
<input type="checkbox" name="newsletter" />
Sign up for our newsletter
</label>
</p>Нет стандартных элементов управления
Мы не имеем в своем распоряжении конкретно определенных элементов управления.
Это сделано намеренно: типичный указатель мыши, используемый для выбора даты, может оказаться слишком маленьким на мобильном устройстве, потому разработчик должен реализовать альтернативу для подобных устройств самостоятельно.
Поддержка браузерами
Не все поля ввода и атрибуты полей поддерживается всеми браузерами. Более того, большинство современных браузеров от IE10 и выше поддерживают только основные поля, такие как электронная почта и номер телефона.
А типы полей для ввода даты вообще поддерживаются только в Webkit и Blink (на момент написания статьи). Неподдерживаемые поля ввода и атрибуты браузер обработает как стандартное поле ввода типа text.
Всегда используйте верный тип полей!
Важно всегда использовать правильный тип полей ввода для данных, соответствующий тем данным, которые вы запрашиваете. Это может показаться не очевидным, но вы столкнетесь с ситуациями, когда вам захочется использовать стандартный ввод текста.
Рассмотрим поля ввода типа date. Их поддержка неоднородна и это приводит к вопросам реализации:
- Стандартное поле ввода date всегда возвращает значение в формате YYYY-MM-DD независимо от того, какой формат выбран на локальном устройстве;
- IE и Firefox обратятся к стандартному полю ввода text, однако ваши посетители могут ожидать ввода в формате США MM-DD-YYYY или в Европейском формате DD-MM-YYYY;
- Дата-пикер, написанный на JavaScript, например UI на JQuery, позволяет определить собственный формат - даже YYYY-MM-DD при необходимости, но вы не можете гарантировать, что JavaScript будет включен в браузере пользователя.
Напрашивается простое решение, которое заключается в отказе от поля ввода HTML5 типа date, возврату к типу поля text и реализации собственного процесса контроля ввода. Не стоит идти таким путем.
Вы вряд ли сможете создать собственный датапикер, который будет работать абсолютно на всех устройствах, на всех разрешениях экрана, будет поддерживать клавиатуру, мышь и сенсорный ввод и продолжать работать, когда JavaScript отключен.
К примеру, мобильные браузеры часто опережают своих настольных братьев и предоставляют отличные варианты управления с сенсорного экрана.
Поля ввода из HTML5 - это будущее. Используйте их, а при необходимости добавляйте JavaScript, когда вам требуется хорошая кросс-браузерная поддержка. Но не забудьте ...
Проверку на стороне сервера
Браузерная валидация не гарантирует стопроцентной уверенности в корректности введенных данных. Даже если пользователь пользуется Google Chrome последней версии, вы не убережетесь от:
- ошибок браузера или JavaScript, позволяющих ввести неверные данные;
- пользователей, редактирующих HTML или скрипты, с помощью инструментов браузера;
- передачи данных от систем, находящихся вне вашего контроля;
- перехвата данных в промежутке браузер - сервер (по HTTP-протоколу).
Проверка на стороне клиента не была и никогда не станет заменой проверки на стороне сервера. Проверка пользовательских данных на сервере имеет очень большое значение. На стороне клиенте проверку было бы неплохо иметь.
И запомните, что типы данных «Дата» могут быть получены в формате YYYY-MM-DD или же любом другом, который вы определите для пользователя (MM-DD-YYYY, DD-MM-YYYY, и т.п.).
Проверяйте наличие первых четырех цифр в полученной последовательности знаков или используйте встроенную поддержку парсинга полей типа «Дата».
В этой статье мы рассмотрели довольно большой объем информации, касающейся полей ввода в HTML5. В следующей части мы рассмотрим свойства полей, связанные с CSS.