Новые механизмы вывода
Кроме новых элементов управления форм, с которыми может взаимодействовать пользователь, HTML5 определяет ряд новых элементов, предназначенных специально для вывода и визуализации информации для пользователя.
<output>
Мы уже упоминали об элементе вывода output, когда говорили об элементе ввода range – этот элемент служит средством вывода "результата вычислений", или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML, например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output, можно – аналогично тому как для label – передать список ID в дополнительном атрибуте for элемента.
<input type="range" id="rangeexample" … >
<output onforminput="value=rangeexample.value" for="rangeexample"></output>
<progress> и <meter>
Два этих новых элемента очень похожи, оба в результате создают индикатор/панель, выводимую пользователю. Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения.
Панель индикатора выполнения
Новые свойства форм (проверка).
Проверка
Проверка формы является очень важной, как на стороне клиента, так и на стороне сервера, чтобы помочь законным пользователям избежать и исправить ошибки, и чтобы остановить злоумышленных пользователей от отправки данных, которые могут нанести вред приложению. Так как браузеры могут теперь иметь представление о том, какой тип значений ожидается из различных элементов управления форм (по их собственному типу, или каким-либо верхним/нижним границам, заданным для числовых значений, дат и времени), они могут также предложить собственную проверку формы – еще одна утомительная задача, которая, до сих пор, требовала от авторов написания большого объема кода JavaScript или использования каких-либо готовых сценариев/библиотек проверки.
Примечание: Чтобы можно было проверять элементы управления формы, они должны иметь атрибут name, так как без него они в любом случае не могут быть отправлены как часть формы.
required
Одним из наиболее общих аспектов проверки формы является принудительное заполнение требуемых полей – недопущение отправки формы, пока определенные элементы информации не будут введены. Это можно теперь легко реализовать, добавляя атрибут required к элементам input, select или textarea.
<input type="text" … required>
Клиентская проверка в браузере Opera в действии, показывающая ошибку для требуемого поля, которое было оставлено пустым
type и pattern
Как мы видели, авторы могут теперь определять тип записи, который они ожидают из полей формы – вместо простого определения текстового элемента ввода, авторы могут явно создавать элементы ввода для таких вещей как числа, адреса e-mail и URL. Как часть клиентской проверки, браузеры могут теперь проверять, что ввод пользователя в эти более специфические поля соответствует ожидаемой структуре – по существу, браузеры оценивают значения ввода в соответствии со встроенным шаблоном, который определяет, как выглядят допустимые значения в полях ввода этого типа, и будут предупреждать пользователя, когда его ввод не соответствует критериям.
Сообщение об ошибке браузера Opera для неверного адреса e-mail в поле ввода
Для других текстовых полей ввода, которые, тем не менее, должны следовать определенной структуре (например, формы регистрации, где имя пользователя может содержать только определенную последовательность букв нижнего регистра и цифр), авторы могут использовать атрибут pattern для определения своего собственного регулярного выражения.
<input type="text" … pattern="[a-z]{3}[0-9]{3}">
Стилевое оформление форм с помощью CSS3