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

Мы изучили появившиеся в HTML5 новые типы ввода, и нам осталось познакомиться с новыми элементами HTML, улучшающими и расширяющими функциональность форм.

Элемент <datalist>

Элемент <datalist> используется только в формах. Он позволяет заранее построить список пунктов, которые в дальнейшем будут предлагаться в качестве вариантов заполнения полей ввода (для этого нужно добавить атрибут list) (листинг 6.21).

Листинг 6.21.Построение списка

<datalist id="mydata">

<option value="123123123" label="Phone 1">

<option value="456456456" label="Phone 2">

</datalist>

После того как вы объявили элемент <datalist>, остается лишь сослаться на этот список пунктов из элемента <input>, используя атрибут list.

Листинг 6.22. Список возможных значений предлагается с помощью атрибута list

<input type="tel" name="myphone" id="myphone" list="mydata">

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

В настоящее время элемент <datalist> реализован только в браузерах Opera и Firefox Beta.

Элемент <progress>

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

Элемент <progress> принимает два атрибута, устанавливающие его статус и лимиты. Атрибут value указывает, какая доля задачи уже выполнена, а атрибут max содержит значение, достижение которого соответствует завершению задачи.

Элемент <meter>

Аналогично элементу <progress>, элемент <meter> используется для отображения шкалы, однако это не шкала выполнения задачи. Данный элемент предназначен для отображения известного диапазона, например, использования пропускной способности.

С элементом <meter> связаны несколько атрибутов: min и max устанавливают границы диапазона, value определяет измеряемое значение, а low, high и optimum используются для сегментирования диапазона и определения позиции, которая будет соответствовать оптимальному значению.

Элемент <output>

Этот элемент представляет собой результат вычисления. Обычно он используется для отображения результатов обработки каких-то значений элементами формы. Атрибут for позволяет связать элемент <output> с исходными элементами, участвующими в расчетах, однако чаще всего ссылки на элементы создаются и модифицируются в коде JavaScript. Синтаксис данного элемента таков: <output>значение</output>.