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

Веб-программирование --- HTML5 --- Новые элементы форм

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

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

Таким образом, в последующем материале рассматриваются возможности с самым низким уровнем поддержки изо всех возможностей HTML-форм. Желательно разобраться, как они работают, но при этом разумно воздержаться от их использования, пока вы не будете уверены в том, что браузеры их поддерживают.

Подсказки ввода <datalist>

Элемент <datalist> предоставляет способ присоединить выпадающий список возможных вариантов ввода к обыкновенному текстовому полю. Заполняющим форму пользователям он дает возможность либо выбрать вариант ввода из списка значений, либо ввести требуемое значение вручную:

Чтобы использовать элемент datalist, сначала нужно создать обычное текстовое поле. Допустим, мы создали обычный элемент <input>:

<fieldset>
     <legend>Выберите любимый фрукт</legend>
     <label for="fruit">Фрукт</label>
     <input id="fruit">
</fieldset>

Чтобы добавить к этому полю выпадающий список возможных значений, для него нужно создать элемент <datalist>. Технически этот элемент можно разместить в любом месте разметки, т.к. он не отображается браузером, а просто предоставляет данные для использования в текстовом поле ввода. Но логично поместить этот элемент либо непосредственно перед тем элементом <input>, для которого он предоставляет свои данные, либо сразу же после него. Далее показан пример кода для создания списка <datalist>:

<datalist id="dl_fruits">
        <option label="Яблоко" value="apple">
        <option label="Ананас" value="ananas">
        <option label="Абрикос" value="apricot">
        <option label="Арбуз" value="watermelon">
        <option label="Авокадо" value="avocado">
        <option label="Апельсин" value="Orange">
</datalist>

Как и традиционное поле <select>, список <datalist> использует элементы <option>. Каждый элемент <option> представляет собой отдельное возможное значение, которое браузер может предложить заполняющему форму. Значение атрибута label содержит текст, который отображается в текстовом поле, а атрибут value — текст, который будет отправлен на сервер, если пользователь выберет данную опцию.

Сам по себе список <datalist> не отображается в браузере. Для того чтобы подключить его к текстовому полю, нужно установить значение атрибута list равным значению параметра id соответствующего списка <datalist>:

<input id="fruit" list="dl_fruits">

В браузерах, которые поддерживают <datalist> (а в настоящее время это только Opera 10 и Firefox 4 или более поздние версии), посетители увидят результат, как на рисунке выше. Другие браузеры будут игнорировать атрибут list и разметку <datalist>, делая все предложения возможного ввода бесполезными.

Но эту проблему можно исправить с помощью хитрого резервного решения, которое заставляет старые браузеры вести себя как следует. Трюк заключается в том, чтобы вставить другое содержимое в список <datalist>. Этот подход работает потому, что браузеры, которые поддерживают элемент <datalist>, обращают внимание только на элементы <option> и игнорируют все другое содержимое.

В следующем листинге приводится разметка, в которой используется это поведение:

<fieldset>
     <legend>Выберите любимый фрукт</legend>
     <datalist id="dl_fruits">
        <span class="Label">Выберите из списка:</span>
        <select id="favoriteFruite">
           <option label="Яблоко" value="apple">
           <option label="Ананас" value="ananas">
           <option label="Абрикос" value="apricot">
           <option label="Арбуз" value="watermelon">
           <option label="Авокадо" value="avocado">
           <option label="Апельсин" value="Orange">
        </select>
        <br>
        <span class="Label">Или введите вручную:</span>
     </datalist>
     
     <input id="fruit" list="dl_fruits">
</fieldset>

.Label {
   display: inline-block;
   width: 125px;
}

Браузеры, которые распознают элемент <datalist>, будут отображать только одно текстовое поле и выпадающий список предлагаемых вариантов ввода. Но для других браузеров этот дополнительный код облекает предлагаемые варианты ввода в традиционный список <select>, предоставляя пользователю возможность ввести собственное значение или же выбрать готовое значение из списка:

Но этот подход не работает незаметно. При получении данных формы на сервере необходимо проверить на наличие данных из списка <select> (favoriteFruite) и из списка <datalist> (dl_fruits). За исключением этого незначительного недостатка, это надежный способ предоставить новое удобство всем пользователям без исключения.

Индикатор выполнения <progress> и счетчик <meter>

Новые графические элементы <progress> и <meter> внешне похожи друг на друга, но имеют разные назначения. Элемент <progress> отображает ход выполнения задания посредством зеленой пульсирующей полоски на сером фоне. Визуально элемент <progress> похож на индикаторы выполнения, с которыми вам, вероятно, приходилось не раз встречаться, хотя его точный внешний вид зависит от браузера, в котором просматривается страница.

Элемент <meter> указывает значение в диапазоне известных значений. Внешне похож на элемент <progress>, но зеленая полоска имеет другой оттенок и не пульсирует. В зависимости от браузера цвет индикаторной полоски элемента <meter> может меняться при отображении значения, определенного как "слишком низкое" или "слишком высокое". Например, в браузере Chrome при отображении последнего значения цвет индикатора меняется с зеленого на желтый. Но самая важная разница между элементами <progress> и <meter> заключается в их семантическом значении.

Для помещения в форму элементов <meter> и <progress> нет надобности. Более того, они даже не являются настоящими элементами управления формы, т.к. не собирают информацию от посетителя веб-страницы. Но официальный стандарт HTML5 включает их потому, что в некоторых отношениях они чувствуются как элементы формы, возможно, из-за графического отображения данных.

В настоящее время элементы <progress> и <meter> поддерживаются браузерам Chrome 9, Opera 11, Firefox 5 и Safari 5.1 (а также их более поздними версиями).

Применение элементов <progress> и <meter> не составляет никакого труда. Сначала рассмотрим элемент <progress>. Он использует атрибут value, который обозначает ход выполнения задания в виде дробной величины от 0 до 1. Графически это отображается соответствующей шириной полоски индикатора. Например, чтобы показать, что задание выполнено на 25%, атрибуту value присваивается значение 0,25:

<progress value=0.25></progress>

Альтернативно, можно использовать атрибут max, чтобы установить максимальное значение и изменить масштаб индикатора. Например, при значении max, равном 200, значение value должно быть между 0 и 200. Если сделать значение value равным 50, то получим те же самые 25% заполнения индикатора, как и в предыдущем примере:

<progress value="50" max="200"></progress>

Масштаб используется просто в целях удобства, т.к. цифровое значение в индикаторе не отображается. Браузеры, которые не поддерживают элемент <progress>, попросту игнорируют его. Эту проблему можно решить, вставив в элемент <progress> резервное содержимое следующим образом:

<progress value="50" max="200"> 25% </progress>

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

Для индикатора выполнения есть еще одна опция в виде неопределенного состояния индикатора, которое указывает, что задание выполняется, но точное время его завершения неизвестно. (Индикатор в неопределенном состоянии можно рассматривать как вычурное сообщение "Задание в процессе выполнения".) Визуально индикатор в неопределенном состоянии выглядит как серое поле, вдоль которого периодически слева направо пробегает зеленая размытая полоска. Чтобы создать этот индикатор, просто не употребляйте атрибут value:

<progress>Расчет выполняется...</progress>

Элемент <meter> имеет подобную модель, но отображает любой вид измерений. Иногда его еще называют шкалой. Часто значение атрибута value этого элемента отображает какую-то действительную величину, например денежную сумму на счету, количество дней, вес в килограммах и т.п. Отображение этой информации управляется установкой значений атрибутов min и max:

<meter min="5" max="70" value="28">28 килограм</meter>

Как и для элемента <progress>, содержимое внутри элемента <meter> отображается только в браузерах, которые не поддерживают его. Но иногда значение элемента <meter> нужно вывести в числовом формате. В таком случае его нужно задать на странице обычной разметкой; при этом резервное значение внутри элемента не требуется. Этот подход демонстрируется в следующем примере. Вся информация выводится на страницу обычной разметкой, а элемент <meter> додается в качестве необязательного визуального ориентира:

<p>Нашей целью является собрать 50,000 руб.</p>
<p>Всего мы собрали 14,000 руб. <meter max="50000" value="14000"></meter></p>

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

Например, значение value, превышающее значение high, но меньше значения max, будет выше какого-то требуемого значения, но все еще в пределах допустимого максимального значения. Подобным образом значение value ниже значения low, но выше значения min, не удовлетворяет какому-либо требованию низкого значения, но будет все еще в пределах допустимого минимального значения:

Ваш багаж весит: <meter min="5" max="70" value="28">28 килограм</meter><br>
Ваш багаж весит: <meter min="5" max="100" high="70" value="79">79 килограм</meter>*
<p><small>* За багаж весом больше 70 кг. нужно доплатить.</small></p>

Браузеры могут использовать или не использовать информацию атрибутов low и high. Например, браузер Chrome отображает слишком высокие значения (как в предыдущем примере) желтым цветом, но значения ниже low показывает как обычные. Наконец, атрибут optimum служит для указания определенного оптимального значения, но использование этого атрибута не влияет на отображение этого значения в современных браузерах.

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

Элементы <command> и <menu> для создания кнопок команд и меню

Эти две возможности можно считать самыми замечательными, но пока не реализованными. Идея заключается в том, чтобы использовать один элемент для представления действия, которое пользователь может активировать (т.е., <command>), a другой элемент для группирования нескольких таких элементов (т.е. <menu>).

В зависимости от конструкции и оформления элемент <menu> может принимать какие угодно формы, от панели инструментов, закрепленной на стороне окна браузера, до всплывающего меню, открывающегося при щелчке мышью где-либо на странице. Но в настоящее время ни один из браузеров не поддерживает эти элементы, поэтому нужно подождать, чтобы узнать, действительно ли они такие замечательные.