Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org) 108 • Глава 3
Н
ОВЫЕ АТРИБУТЫ
Помимо новых типов ввода данных, в HTML5 определен ряд новых атрибутов для элемента
<
input>
, отвечающих за его поведение и ограничения:
autocomplete
,
min
,
max
,
multiple
,
pattern
и
step
. Есть еще один атрибут —
list
; он присоединяется к новому элементу, по-
зволяя использовать новый метод ввода данных.
АТРИБУТ LIST И
Сочетание элемента
с атрибутом
list
и элементом
дает комбиниро-
ванное поле — комбинацию раскрывающегося списка и текстового поля из одной строки .
Оно позволяет пользователям вводить свой собственный текст, если их не устраивают
предложенные в списке варианты.
Список создается внутри нового элемента
,
id
которого указывается в качестве
значения атрибута
list
.
Сам
не отображается, но появляется в виде значений поля , похожего на поле
выбора.
В предыдущем примере
type=text
делает возможным ввод произвольного текста; но
можно использовать и с другими типами ввода данных, например
url
и
email
.
Многие спрашивают, почему пара
/
не объединена в один элемент, как,
например,
. На самом деле это связано с обратной совместимостью : в устаревших
браузерах пара
/
превращается в
type=text>
, благодаря чему
пользователь может хотя бы что-то ввести, а вы уже можете дополнить реализацию с по-
мощью JavaScript.
Джереми Кейт приводит отличный пример подобной обратной совместимости в статье по
адресу
http://adactio com/journal/4272/
(воспроизвожу ее с его разрешения):
How did you hear about us?
please choose...
Television
Radio
Newspaper
Other
If other, please specify:
Формы
• 109
Обратите внимание, что мы обрамили элементы
дополнительным тегом
,
благодаря чему визуализация содержимого
datalist
имитирует разметку традиционных
элементов выбора
dropdown
(раскрывающийся список). Браузеры, понимающие элемент
, проигнорируют все лишнее, сосредоточившись на элементах
— для
них вложенный
попросту невидим. Текст «If other, please specify» также игнори-
руется. С другой стороны , не поддерживающие данную функциональность браузеры не
увидят элемент
и покажут то, что они воспринимают как стандартный элемент
. Также они отобразят текст «If other…» и поле ввода, с которым связан
datalist
.
Другими словами, браузеры, поддерживающие
, считают каждый
частью списка данных (datalist) и кроме них ничего не видят . Браузеры, не поддерживаю-
щие
, считают все
частью
и видят дополнительный текст
«If other, please specify»; элемент ввода, связанный со списком данных через атрибут
list
,
превращается в простое текстовое поле ввода (рис. 3.10).
Рис . 3 .10 .
Визуализация
в Opera (вверху ) и упрощенный вариант в Safari (внизу )
Это отличный шаблон, который наверняка станет частью вашего ежедневного арсенала
инструментов для кодирования форм — если только Рабочая группа не примет решение
отобрать его у нас (см. примечание)!
ПРИМЕЧАНИЕ
Рабочая группа (Working Group) рассматривает вариант устранения данного метода плавного
ухудшения характеристик через разметку, приводя не слишком убедительные обоснования —
мол, веб-разработчики не так часто его применяют, к тому же его трудно описать в спецификации
и реализовать (что делать с элементами
Достарыңызбен бөлісу: