Таблица 2. Атрибуты тега
Атрибут
Значение / описание
disabled
Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form
name
Определяет имя
, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение . Ширина поля задается свойством width .
Таблица 3. Атрибуты тега
Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением , например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt
Определяет альтернативный текст
для изображений, указывается только для .
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы , число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step
Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку , активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
4. Текстовые поля ввода
Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение , помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Таблица 5. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled
Отключает раскрывающийся список.
form
Определяет форму, которой принадлежит данный список . В качестве значения атрибута указывается идентификатор формы.
multiple
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl .
name
Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required
Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size
Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover
и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался JavaScript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Текст-заглушка
Существует распространенный шаблон для оформления поисковых форм:Если поле пусто - вставить туда текст-заглушку.
Когда поле в фокусе - убрать заглушку.
Если пользователь оставил поле незаполненным и убрал фокус - вернуть ее.
При этом заглушка обычно выделяется немного более светлым цветом , чем вводимый в поле текст, что достигается при помощи CSS , JavaScript, или сочетания обоих.В HTML5 все это реализуется при помощи простого параметра placeholder
:
Your hobbies
Так это будет выглядеть в браузере. Owl stretching
- текст по умолчанию, приведенный в качестве примера.
В тех браузерах, что поддерживают этот атрибут, он работает прекрасно, но их пока не так много. Вам решать, что делать с остальными. В принципе, можно не напрягаться и не делать ничего совсем - данная функция все-таки хоть и удобна и приятна, но не жизненно важна. Но как вариант, можно разработать JavaScript-альтернативу; в этом случае сначала нужно будет убедиться, что браузер действительно не поддерживает placeholder
.Вот пример простой функции, которая проверяет поддержку определенного параметра:
Function elementSupportsAttribute(element,attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
}
Она создает «фантомный» элемент в памяти - не на самой странице, - и затем смотрит, есть ли у прототипа этого элемента свойство с тем же же названием, что и параметр, которые вы проверяете. Функция вернет либо true
, либо false
.
С ее помощью вы можете подсунуть альтернативный код только для тех браузеров, которые не поддерживают данную возможность HTML5:
If (!elementSupportsAttribute("input","placeholder")) {
// Заглушка при помощи JavaScript описывается здесь.
}
Автофокус
«Привет, я функция автофокуса. Я знакома вам по таким ролям, как Google: мне повезет
и Twitter: What’s happening?
»Этот шаблон очень прост и относительно легко реализуется в JavaScript. Суть его в том, что, когда страница загружена, нужно автоматически поставить фокус на определенном поле.
HTML5 позволяет использовать для этого булев параметр autofocus
:
What"s happening?
Проблема только в том, что эта функция может ужасно раздражать. Очень часто, листая страницы в интернете, я использую клавишу пробела для быстрой прокрутки содержимого. На сайтах вроде Твиттера с этим автофокусом, я часто обнаруживаю, что вместо прокрутки заполняю поле пробелами.
Логика того, зачем этот параметр включен в спецификацию, вполне ясна, но он не идеален в плане юзабилити. Потому я советую его использовать аккуратно и только в случае явной пользы и при минимальной вероятности неудобств.
Одним из преимуществ переложения роли выполнения этой функции со скриптов на разметку состоит в том, что теоретически пользователи смогут ее отключать в настройках своего браузера. Ни один браузер, впрочем, пока это не позволяет, но все еще впереди. Как бы там ни было, сейчас она может быть отключена только вместе с JavaScript вообще - не самое лучшее решение ; все равно что выкалывать себе глаза, чтобы избежать слишком яркого света.
Так же как и с параметром placeholder
можно проверить наличие поддержки автофокуса в браузере и, при необходимости, добавить альтернативный код на JavaScript:
If (!elementSupportsAttribute("input","autofocus")){
document.getElementById("status").focus();
}
Параметр autofocus
можно применить не только к элементам input
, но к любым другим типам полей, например textarea
или select
. И, разумеется, только единожды на странице.
Required
JavaScript часто используется для проверки заполненности формы на стороне клиента. Снова, часть этой задачи теперь переложена на HTML5. Теперь можно указать, что определенное поле обязательно к заполнению при помощи булева параметра required
. Ваш пароль
Теоретически, наличие незаполненного поля с этим параметром само себе должно не дать пользователю отправить данные на обработку. Но хотя пока браузеры этого и не делают, его все равно можно интегрировать для привычной обработки форм JavaScript-ом. Просто теперь вместо отбора элементов по, скажем class=«required»
, можно искать их по конкретно параметру required
.
Автозаполнение
Современные браузеры не столько просто отображают веб-страницы, но и стараются повысить юзабилити, безопасность и удобство пользования ими. Функция автозаполнения форм - пример такого подхода. Большую часть времени она довольно полезна, но иногда может немного раздражать или даже быть потенциальным риском для безопасности. Я не против, когда браузер запоминает мои контактные данные, но я бы не хотел, чтобы он хранил логин и пароль от моего банковского счета на случай, если компьютер украдут.HTML5 позволяет отключить автозаполнение как для отдельного поля, так и для целой формы. Параметр autocomplete
- не булев, хоть и принимает всего два значения: on
и off
.
По умолчанию он установлен на on
, таким образом позволяя браузерам использовать автозаполнение без ограничений.Как уже сказано, его так же можно добавить и к выборочным полям:
В данном случае, не существует никакой JavaScript альтернативы, так что эта функция - не упрощение существующих моделей , а вещь новая, работающая напрямую с фичами браузеров.
Может показаться странным, что ее включили в HTML5, учитывая, что она не особо распространена. Но она вполне оправдана, принимая во внимание угрозу для безопасности, которая может скрываться за автозаполнением; так что теперь его можно отключать при необходимости.
Datalist
Новый элемент datalist
позволяет скрестить стандартный input
с элементом select
. Добавив параметр list
, можно затем создать список предустановленных вариантов выбора: Ваша родная планета
Это позволяет пользователям выбрать вариант из списка или добавить свой, если его там нет. Очень удобно для ситуаций, в которых обычно требуется вставлять дополнительное поле «Другое, укажите ниже».
Удобный гибрид.
В случае если браузер не поддерживает datalist
, такое поле будет функционировать как обычный input
.Новые input-ы
Параметр type
элемента input
был значительно расширен в HTML5. Здесь так много натоптанных троп, которые надо замостить, - прямо как строительство сети хайвеев на грибном месте.Поиск
Элемент input
с значением search
в type
работает точно так же, как и тот, что со значением text
. Поиск
Единственная разница - для search
предполагается, что браузер будет отображать поле немного по-другому, придерживаясь общего стиля оформления поисковых полей в операционной системе.
Так это, например, делает Safari.
Контактные данные
Cуществуют три новых значения параметра type
для разных типов контактных данных: адресов электронной почты, сайтов и номеров телефонов. Email
Веб-сайт
Телефон
Опять же, вести себя они будут аналогично обычным импутам, с той разницей, что теперь браузеры располагают немного большей информаций относительно данных, которые туда надо вводить, что может быть полезным.
Safari заявляет о поддержке этих новых типов полей, но на первый взгляд, они в нем не выглядят сколько-нибудь отлично от тех, что с type=«text»
. Однако если вы испытаете их в Mobile Safari - том, что на мобильных устройствах Apple , - разница станет заметной. Вид экранной клавиатуры будет отличаться для разных полей:
Новые типы импутов в Mobile Safari.
Мелочь, а приятно.Ползунки (те, что «слайдеры»)
Многие JavaScript-библиотеки имеют встроенные разного рода виджеты, которые можно использовать в веб-приложениях. Они работают неплохо; если включен JavaScript, конечно. Но было бы здорово, если б пользователям не приходилось загружать файл скриптов каждый раз, когда мы хотим добавить каких-то особых элементов управления в нашу форму.Классический пример - ползунок. До настоящего момент его невозможно было создать без помощи JavaScript. Теперь, с HTML5, он существует как родной браузеровский input
с type=«range»
.
Сколько хотите?
Так выглядит input
типа range
в Safari и Opera.
По умолчанию, диапазон этого поля: от нуля до ста. Минимальное и максимальное значения можно задать при помощи параметров min
и max
соответственно. Ваша оценка
Это все хорошо работает в Safari и Opera - другие браузеры отобразят просто текстовое поле. Это не столь плохо, и мы знаем, что при желании для них всегда можно добавить альтернативную реализацию данного контрола через JavaScript, используя ту проверочную функцию, что я уже приводил выше.
Естественно, скриптовые решения потребуют больше времени на загрузку и будут менее доступны для дополнительной обработки другими средствами, чем «родные» элементы DOM. Впрочем, по непонятным причинам, тот же range
в Safari в данный момент нельзя подружить с клавиатурой… Надеюсь, скоро починят.
Счетчик
Поле с типом range
не отображает точное значение , выбранное пользователем, а лишь визуально представляет относительное число на ползунке. Для некоторых случаев это подходит, в других же важна точность - возможность ввести конкретное значение. Для этого есть type=«number»
. Сколько хотите?
Браузеры добавляют к такому полю кнопки «плюс-минус», делая его эдаким гибридом между типами text
и range
.
Дата и время
Один из наиболее популярных JavaScript-виджетов - всплывающий календарь, позволяющий выбрать нужную дату. Как на большинстве сайтов для бронирования авиабилетов, к примеру.Можно заменить, что на разных сайтах эти календари реализованы слегка по-разному, потому было бы неплохо иметь одно общее для браузера решение, которое устранит эту непоследовательность и необходимость на исследование нюансов разного интерфейса в каждом отдельном случае.
В HTML5 доступна целая горсть разных типов полей для ввода даты и времени:
date
- для года, месяца и числа.datetime
- год, месяц, число, плюс часы, минуты, секунды и указание часового пояса.datetime-local
- то же самое, но без указания часового пояса.time
- часы, минуты, секунды.month
- год и месяц (без числа).
Все эти типы запишут отрезок времени в ISO формате YYYY-MM-DDThh:mm:ss.Z, где Y - год, M - месяц, D - число, h - час, m - минута, s - секунда и Z - часовой пояс. В качестве примера - дата и время окончания Первой Мировой войны, 11 часов 11 минут утра, 11-ое Ноября 1918-го года:
date
: 1918-11-11datetime
: 1918-11-11T11:11:00+01datetime-local
: 1918-11-11T11:11:00time
: 11:11:00month
: 1918-11
Нет просто типа year
, зато есть week
- число от 1 до 53 в сочетании с годом.
Использовать все это довольно просто:
Start date
Opera справляется с реализацией возможностей этих новых полей, но выглядят они в ней не сказать что очень привлекательно…
Как обычно, браузеры, не поддерживающие эту технологию, отобразят простое текстовое поле. В этом случае вы можете либо указать в инструкции для пользователей, в каком формате они должны ввести дату, или же вставить виджет для скриптового календаря. Опять же, не забудьте сначала проверить его встроенную поддержку:If (!inputSupportsType("date")) {
// Код виджета для календаря.
}
Даже самый красиво написанный календарь такого рода на JavaScript потребует довольно большой объем кода для генерации таблицы дней и обработки событий по их выбору. Встроенная поддержка этой возможности должна работать быстрее и надежнее, не говоря о том, что устранит разнобой в оформлении.
Пипетка
Пожалуй, одним из самых смелых заменителей виджетов, представленных в HTML5, является тип поля color
. Он принимает значения в виде цветовых кодов в шестнадцатеричном формате: #000000 для черного, #FFFFFF для белого, и так далее. Фоновый цвет
Задумка в том, чтобы добавить наконец в браузеры встроенные «пипетки», вроде тех, что есть почти во всех других приложениях на вашем копьютере. Пока что она не поддерживается ни одним браузером, но если до этого дойдет, это будет весьма клево.
Так что в этом случае пока следует пользоваться JavaScript-решениями, но не забывать все равно проверять встроенную поддержку - чтобы не прозевать момент, когда время таки придет.
Сделай сам
Все эти новые типы ввода служать для двух целей: они позволяют браузерам иметь специально оформленные или настроенные поля для определенных видов данных, и знать как проверять валидность этих данных. Описанные нововведения HTML5 покрывают большую часть распространенных ситуаций, но в какой-то момент вам веротяно может понадобиться создать валидируемое поле ввода, следующее своим особым принципам.Хорошая новость в том, что это можно реализовать, используя параметр pattern
, где можно обозначить, какой вид данных вы запрашиваете. Плохая новость в том, что вам придется использовать регулярные выражения .
Почтовый индекс США
Большую часть времени параметр pattern
вам вряд ли будет нужен. Если же вы решите его задействовать - я вам сочувствую.
Взгляд в будущее
Введение новых видов веб-форм дает HTML5 заметный толчок вперед. Они перекладывают значительную часть бремени, обычно возлагаемого на JavaScript, на плечи HTML5. В данный момент мы еще на переходной стадии - не все из нововведений подерживаются браузерами, и избавиться от JavaScript совсем мы тут пока не можем. Но светлое будущее уже явно не за горами, мы видим первые его лучи и можем в них понежиться.Валидация форм на стороне клиента теперь станет намного проще - хоть и, понятное дело, всецело полагаться на нее все равно нельзя; нужно не забывать проверять данные и на стороне сервера. Плюс, для многих «нестандартных» пока еще способов ввода данных теперь будут «родные» решения, не требующие от пользователей загрузки дополнительных скриптовых библиотек.
Я уверен, вы видите все преимущества встроенных в браузеры календарей и ползунков, но вижу в ваших глазах и закономерный вопрос «Можно ли к ним применить CSS-стили?»
К сожалению, на данный момент ответ скорее - «нет». Над этим работает CSS Working Group.
Это может разубедить вас в целесообразности их использовать вообще. Если конкретные реализации новых фич в браузерах не выглядят привлекательно для вас, вы можете продолжать использовать вместо них скриптовые виджеты.
Но я хочу, чтобы вы задали себе вопрос «А нужно
ли к ним применять свои стили?» Ведь многим из нас не нравится, когда горе-разработчики или -дизайнеры навязчиво заставляют нас отказывать от своих привычек и исследовать изобретенные ими интерфейсы, которые, по их мнению, лучше, стандартных (что совсем не всегда факт). Зачем же поощрать эту порочную практику введения пользователей в заблуждение?
Лично я хотел бы видеть конкуренцию браузеров за самые удобные и красивые решения для веб-форм HTML5. Такую войну браузеров я бы с удовольствием поддержал.
Окей, с формами покончено. В следующей части мы примемся за новую, аппетитную семантику HTML5.