От автора: мы изучили новые значения атрибута type тега input и парочку валидных для большинства элементов атрибутов. Однако HTML5 формам еще есть чем удивить! В HTML5 спецификации появилось 5 новых элементов: datalist, output, keygen, progress и meter. В предыдущей статье мы уже изучили datalist. Также мы показали вам progress и meter в последней главе, их часто используют вне форм. Давайте суммируем все и рассмотрим два оставшихся элемента.
Элементы progress и meter
Progress и meter – два самых известных HTML5 элемента.
Тег meter отображает рисунок, на котором общее значение представлено в диапазоне. Необходимо указать минимум min и максимум max, а также промежуточное значение value. Многие думают, что этот элемент формы с атрибутами похож на некоторые инпуты числового типа, однако в нем нет атрибута name, и он не отправляется на сервер.
По умолчанию meter задает минимум в 0 или приравнивает его к value, зависит от того, что меньше. Максимальное значение по умолчанию равно 1 или value, зависит от того, что больше. Используйте meter, когда есть минимальное, максимальное и оптимальные значения, а само значение может увеличиваться и уменьшаться. Например, оценка за тест, уровень в бензобаке или кровяное давление. Если указать эти три атрибута, то в браузерах с поддержкой meter (в том числе Android 4.4+, но не iOS7 и IE11) отобразится зеленая полоска.
С помощью meter и значений low, high и optimum можно показывать, когда значение находится в нужном диапазоне. Если value находится в промежутке между min и low, метр будет желтым. Если между low и high, полоска будет зеленая. Если value в промежутке high и max, полоса будет красной. На данный момент значение optimum не имеет визуального эффекта.
Тег meter нельзя использовать для индикации прогресса. Для этого есть тег progress, с помощью которого можно выразить прогресс в процентах.
Атрибуты прогресса, в том числе max и value, всегда будут находиться между 0% и 100%. Браузер вычисляет процентное значение от максимума и подстраивает длину прогресс бара. Прогресс бар при заполнении меняет цвет с серого на синий, где полностью серый равен 0%, а полностью синий – 100%.
Если не задан value, прогресс бар будет не определен. Chrome, Opera, Safari и Firefox отображают неопределенные прогресс бары в виде анимированных полосок, IE стилизует их под анимированные точки.
В отличие от meter тег progress движется только в направлении 100% от значения max. По умолчанию прогресс бары имеют вид inline-block, т.е. им можно задать width и height. Высота стилизованного прогресс бара не изменится (в отличие от meter), но под ним добавится отступ.
Элемент output
Задача output – принимать и отображать результат вычислений. Тег output необходимо задействовать в тех случаях, когда пользователь может видеть значение, но не может напрямую манипулировать им, а также когда значение можно изменять из другого поля формы. Пример – расчет общей стоимости товара с доставкой и сборами в корзине.
Значение output хранится между открывающим и закрывающим тегом. Обновлять значение можно с помощью JS. У output есть атрибут for, который используется для отсылки к полям формы по ID, чьи значения используются для вычисления output.
Атрибуты name и value тега output передаются вместе с формой.
Тег keygen используется для создания пары из открытого и закрытого ключа, а также для передачи открытого ключа из пары. Opera, Chrome, Safari, Android и Firefox полностью поддерживают этот элемент и отображают его в виде выпадающего списка, где можно выбрать длину ключей. Хотя во всех браузерах разные опции. В iOS7 и IE11 поддержки до сих пор нет.
Тег keygen представил также два новых атрибута: challenge, который задает строку для передачи с открытым ключом, а также keytype, задающий тип ключа. На момент написания статьи keytype поддерживает только значение rsa, распространенный алгоритм криптографического шифрования с открытым ключом.
Атрибут contenteditable
Конечно, лучше подбирать самый подходящий элемент формы под наши нужды, но иногда таких элементов нет. Например, нет ни одного хорошего элемента для встроенного WYSIWYG редактора.
Однако эту проблему можно обойти. Любой элемент в HTML5 можно сделать редактируемым с помощью атрибута contenteditable. Записывается он либо просто contenteditable, либо contenteditable=»true», после чего элемент становится редактируемым. Этот атрибут будет вам часто встречаться на div’ах. Можно даже добавить тег style с «display:block» и менять CSS на лету. Любой не нативный элемент по умолчанию не посылается на сервер вместе с остальной формой, но отредактированные данные можно посылать на сервер асинхронно или по нажатию кнопки с помощью JS.
Если вы видели хоть раз редактируемый профиль, где элементы вообще не похожи на поля формы, возможно, это были элементы contenteditable. Все изменения на contenteditable компонентах обновляют DOM.
Просто добавьте к любому элементу атрибут contenteditable, и он станет редактируемым во всех браузерах. Все дочерние элементы также становятся редактируемыми, если явно не задать им contenteditable=»false». Атрибут обновляет DOM, но для явного сохранения измененных данных нужно использовать JS.
Изменения в существующих элементах форм
В HTML5 в элементы формы было внесено несколько изменений.
Элемент form
На протяжении всей главы мы говорили об атрибутах различных полей формы, однако есть несколько новых атрибутов и для тега form.
Во-первых, мы уже знаем, что HTML5 предлагает множество способов встроенной валидации полей форм. Например, для определенных полей типа email и url, а также есть атрибуты required и pattern. У вас может возникнуть желание использовать эти атрибуты и типы для стилизации или семантики, и чтобы поля отправлялись без проверки. Новый Булев атрибут novalidate позволяет отправлять поля без встроенной проверки.
Во-вторых, больше можно не указывать атрибут action на форме. Больше не нужно явно прописывать UTR для отправки формы. Если не указать action, форма отправится на текущую страницу. Прописать или изменить URL можно в атрибуте formaction, который указывается на поле типа button, которое и отправляет форму.
И наконец, уже знакомый нам атрибут autocomplete можно добавить напрямую в form. Тогда он применится ко всем полям. У полей может быть свой autocomplete , тогда он перепишет значение.
Элемент optgroup
В HTML5 один optgroup можно вставлять в другой, что удобно использовать для создания многоуровневых меню select.
Элемент textarea
В HTML4 размеры textarea необходимо было задавать через rows и cols атрибуты. В HTML5 эти атрибуты больше не нужны. Ширину и высоту текстовой области теперь нужно задавать через CSS.
В HTML5 появился атрибут wrap. Атрибут применяется к textarea и принимает значения soft (по умолчанию) и hard. Со значением soft текст передается без разрывов строк, сохраняются только разрывы, которые пользователь поставил сам. Со значением hard текст передается со всеми разрывами строк, которые могут появиться из-за размера поля. Если wrap задан в hard, необходимо указать атрибут cols.
Заключение
К сожалению, мы не смогли охватить весь материал, остальное есть в книге. Тем не менее, это было довольно подробное введение. По мере развития HTML5 элементов и атрибутов сайтам все меньше будет требоваться JS для клиентских проверок и украшения интерфейса. Браузеры будут обрабатывать основную работу. Старые юзер агенты в обозримом будущем никуда не денутся, но это не причина топтаться на месте и не использовать HTML5 веб-формы. Для заполнения пропусков с поддержкой можно использовать полифилы и фолбэки.
В следующей главе мы продолжим работать над сайтом The HTML5 Herald и добавим самые крутые нововведения в HTML5 – нативное видео и аудио.
Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
