На данном этапе мы узнали, как усовершенствовать формы с помощью новых возможностей HTML5 - проверки и дополнительных типов данных полей ввода. Это наиболее важные новые возможности с наивысшим уровнем поддержки в браузерах, но HTML5 не останавливается на этом.
В стандарте также вводится несколько совершенно новых элементов. С их помощью в форму можно добавить список предложений, индикатор выполнения задания, панель инструментов и многое другое. Проблема с этими новыми элементами заключается в том, что старые браузеры точно не поддерживают их, и даже новые браузеры не особо спешат с предоставлением поддержки, пока спецификация окончательно не утверждена.
Таким образом, в последующем материале рассматриваются возможности с самым низким уровнем поддержки изо всех возможностей HTML-форм. Желательно разобраться, как они работают, но при этом разумно воздержаться от их использования, пока вы не будете уверены в том, что браузеры их поддерживают.
Подсказки ввода
Элемент предоставляет способ присоединить выпадающий список возможных вариантов ввода к обыкновенному текстовому полю. Заполняющим форму пользователям он дает возможность либо выбрать вариант ввода из списка значений, либо ввести требуемое значение вручную:
Чтобы использовать элемент datalist, сначала нужно создать обычное текстовое поле. Допустим, мы создали обычный элемент :
Чтобы добавить к этому полю выпадающий список возможных значений, для него нужно создать элемент
Как и традиционное поле
Сам по себе список не отображается в браузере. Для того чтобы подключить его к текстовому полю, нужно установить значение атрибута list
равным значению параметра id соответствующего списка :
В браузерах, которые поддерживают (а в настоящее время это только Opera 10 и Firefox 4 или более поздние версии), посетители увидят результат, как на рисунке выше. Другие браузеры будут игнорировать атрибут list и разметку , делая все предложения возможного ввода бесполезными.
Но эту проблему можно исправить с помощью хитрого резервного решения, которое заставляет старые браузеры вести себя как следует. Трюк заключается в том, чтобы вставить другое содержимое в список . Этот подход работает потому, что браузеры, которые поддерживают элемент , обращают внимание только на элементы
В следующем листинге приводится разметка, в которой используется это поведение:
Label {
display: inline-block;
width: 125px;
}
Браузеры, которые распознают элемент , будут отображать только одно текстовое поле и выпадающий список предлагаемых вариантов ввода. Но для других браузеров этот дополнительный код облекает предлагаемые варианты ввода в традиционный список
Но этот подход не работает незаметно. При получении данных формы на сервере необходимо проверить на наличие данных из списка
Элемент указывает значение в диапазоне известных значений. Внешне похож на элемент Но зеленая полоска имеет другой оттенок и не пульсирует. В зависимости от браузера цвет индикаторной полоски элемента может меняться при отображении значения, определенного как "слишком низкое" или "слишком высокое". Например, в браузере Chrome при отображении последнего значения цвет индикатора меняется с зеленого на желтый. Но самая важная разница между элементами И заключается в их семантическом значении.
Для помещения в форму элементов и Нет надобности. Более того, они даже не являются настоящими элементами управления формы, т.к. не собирают информацию от посетителя веб-страницы. Но официальный стандарт HTML5 включает их потому, что в некоторых отношениях они чувствуются как элементы формы, возможно, из-за графического отображения данных.
В настоящее время элементы И поддерживаются браузерам Chrome 9, Opera 11, Firefox 5 и Safari 5.1 (а также их более поздними версиями).
Применение элементов И не составляет никакого труда. Сначала рассмотрим элемент Он использует атрибут value
, который обозначает ход выполнения задания в виде дробной величины от 0 до 1. Графически это отображается соответствующей шириной полоски индикатора. Например, чтобы показать, что задание выполнено на 25%, атрибуту value присваивается значение 0,25:
Альтернативно, можно использовать атрибут max
, чтобы установить максимальное значение и изменить масштаб индикатора. Например, при значении max, равном 200, значение value должно быть между 0 и 200. Если сделать значение value равным 50, то получим те же самые 25% заполнения индикатора, как и в предыдущем примере:
Масштаб используется просто в целях удобства, т.к. цифровое значение в индикаторе не отображается. Браузеры, которые не поддерживают элемент Попросту игнорируют его. Эту проблему можно решить, вставив в элемент Резервное содержимое следующим образом:
25%
При этом следует помнить, что это резервное содержимое не будет отображаться в браузерах, которые поддерживают этот элемент.
Для индикатора выполнения есть еще одна опция в виде неопределенного состояния индикатора, которое указывает, что задание выполняется, но точное время его завершения неизвестно. (Индикатор в неопределенном состоянии можно рассматривать как вычурное сообщение "Задание в процессе выполнения".) Визуально индикатор в неопределенном состоянии выглядит как серое поле, вдоль которого периодически слева направо пробегает зеленая размытая полоска. Чтобы создать этот индикатор, просто не употребляйте атрибут value:
Расчет выполняется...
Элемент имеет подобную модель, но отображает любой вид измерений. Иногда его еще называют шкалой. Часто значение атрибута value этого элемента отображает какую-то действительную величину, например денежную сумму на счету, количество дней, вес в килограммах и т.п. Отображение этой информации управляется установкой значений атрибутов min и max:
28 килограм
Как и для элемента Содержимое внутри элемента отображается только в браузерах, которые не поддерживают его. Но иногда значение элемента нужно вывести в числовом формате. В таком случае его нужно задать на странице обычной разметкой; при этом резервное значение внутри элемента не требуется. Этот подход демонстрируется в следующем примере. Вся информация выводится на страницу обычной разметкой, а элемент додается в качестве необязательного визуального ориентира:
Нашей целью является собрать 50,000 руб.
Всего мы собрали 14,000 руб.
Элемент также достаточно интеллектуальный, чтобы указывать значения выше или ниже допустимых и в то же самое время отображать их должным образом. Для этого в нем используются атрибуты low
и high
.
Например, значение value, превышающее значение high, но меньше значения max, будет выше какого-то требуемого значения, но все еще в пределах допустимого максимального значения. Подобным образом значение value ниже значения low, но выше значения min, не удовлетворяет какому-либо требованию низкого значения, но будет все еще в пределах допустимого минимального значения:
Браузеры могут использовать или не использовать информацию атрибутов low и high. Например, браузер Chrome отображает слишком высокие значения (как в предыдущем примере) желтым цветом, но значения ниже low показывает как обычные. Наконец, атрибут optimum
служит для указания определенного оптимального значения, но использование этого атрибута не влияет на отображение этого значения в современных браузерах.
В общем, элементы И предоставляют незначительные удобства, которые будут полезными, когда уровень их поддержки браузерами будет немного выше.
Элементы и
Эти две возможности можно считать самыми замечательными, но пока не реализованными. Идея заключается в том, чтобы использовать один элемент для представления действия, которое пользователь может активировать (т.е., ), a другой элемент для группирования нескольких таких элементов (т.е.
В зависимости от конструкции и оформления элемент
В этом примере данные формы, обозначенные атрибутом name
(login
и password
), будут переданы в файл по адресу /example/handler.php. Если атрибут action
не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге