Формы (form) на HTML5
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент ... . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
| accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов , которые будут использоваться для отправки формы, например, . |
| action | Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # . Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: |
| autocomplete | |
| enctype | Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" . application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 . multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
| method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. |
| name | Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . |
| novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
| target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
Элемент ... предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента , который идет сразу за тегом . Название группы проявляется слева в верхней границе . Например, если в элементе хранится контактная информация:
Имя *
Рис. 2. Группировка элементов формы с помощью
| disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — . |
| form | в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. |
| name | Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id . |
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
| 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 | Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id . |
| 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 | Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. |
Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
| autofocus | Устанавливает фокус на нужном начальном текстовом поле автоматически. |
| cols | Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки. |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно значению атрибута id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. |
| maxlength | Значение атрибута задает максимальное число символов для ввода в поле. |
| name | Задает имя текстового поля. |
| placeholder | Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. |
| readonly | Отключает возможность редактирования содержимого поля. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. |
| rows | Указывает число, которое означает, сколько строк должно отображаться в текстовой области. |
| wrap | Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard , то должно указываться значение атрибута cols . |
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
| autofocus | Устанавливает автоматический фокус на элементе при загрузке страницы. |
| disabled | Отключает раскрывающийся список. |
| form | Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы. |
| multiple | Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl . |
| name | Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. |
| required | Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. |
| size | Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. |
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. КнопкиЭлемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
| 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 | Задает значение по умолчанию, отправляемое при нажатии на кнопку. |
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .
Рассмотрим пример использования:
Пример использования тега Да НетДа Нет
В этом примере мы:
- Внутри первой
формы:
- Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
- Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
- Внутри второй
формы:
- Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Подсказка для полей вводаДавайте рассмотри пример использования:
Пример использования атрибута placeholder Login:Password:
Далее
В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
- Используя полученные знания составьте следующую форму оформления заказа:
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
На момент написания этой статьи поддержка всех новых форм, элементов ввода, атрибутов и типов существенно зависит от конкретного браузера. Реализация одной и той же функции в разных браузерах может существенно отличаться. При этом ситуация с поддержкой форм HTML5 быстро меняется и продолжает улучшаться. На момент написания статьи наиболее актуальными являются эти таблицы , в которых приведены подробные сведения о поддержке различными браузерами форм HTML5.
Обзор нововведений Новые элементыВ языке HTML5 представлено пять новых элементов, связанных с вводом данных и формами.
| progress | Представляет ход выполнения задачи. | Элемент progress может представлять состояние загрузки файла. |
| meter | Представляет значение по шкале в известном диапазоне. | Элемент meter можно использовать, например, для измерения температуры или веса. |
| datalist | Представляет набор элементов option , которые могут использоваться в сочетании с новым атрибутом list для создания раскрывающихся меню. | Когда пользователь переходит к вводу данных в области, связанной со списком данных, появляется раскрывающееся меню со значениями из перечня datalist . |
| keygen | Элемент управления для создания пар ключей. | При отправке формы в локальное хранилище заносится закрытый ключ, а на сервер отправляется открытый ключ. |
| output | Отображает результаты расчета. | Примером использования элемента output может служить вывод суммы значений двух введенных элементов. |
В HTML5 представлено 13 новых элементов ввода. В браузерах, которые их не поддерживают, они превращаются в обычные элементы для ввода текста.
| tel | Ввод номера телефона. | Элемент tel не принуждает к вводу текста в определенном формате: для этого можно использовать элемент pattern или метод setCustomValidity() , осуществляющий дополнительную проверку. |
| search | Предлагает пользователю ввести текст, который необходимо найти. | Разница между search и text заключается в основном в оформлении. Для типа search поле ввода можно оформить в соответствии с полями поиска данной платформы. |
| url | Ввод одного URL. | Элемент url используется для ввода отдельного абсолютного URL , который представляет довольно широкий диапазон значений. |
| Ввод одного адреса электронной почты или списка адресов. | Если указан атрибут multiple , можно ввести несколько адресов электронной почты через запятую. | |
| datetime | Ввод даты и времени в часовом поясе UTC. | |
| date | Ввод даты без часового пояса. | |
| month | Ввод даты с указанием года и месяца, но без часового пояса. | |
| week | Ввод даты, состоящей из номера недели и года, но без часового пояса. | Пример этого формата – 2011-W05 для пятой недели 2011 года. |
| time | Ввод времени с указанием часов, минут, секунд и долей секунды, но без часового пояса. | |
| datetime-local | Ввод даты и времени без часового пояса. | |
| number | Ввод числовых данных. | Допустимые значения – числа с плавающей запятой . |
| range | Ввод числовых данных (в отличие от типа number само число не играет роли). | Реализация этого элемента управления диапазона в большинстве поддерживающих его браузеров – ползунок. |
| color | Выбор цвета с помощью цветового круга. | Значение должно быть действительным простым цветом в нижнем регистре , например #ffffff. |
В HTML5 также представлено несколько новых атрибутов для элементов ввода и формы.
| autofocus | Фокусирование ввода на элементе, когда страница загружена. | Атрибут autofocus может применяться к элементам input, select, textarea и button. |
| placeholder | Подсказка для пользователя о типе данных, которые необходимо ввести. | Значение заполнителя отображается светлым текстом, пока элемент не будет выделен и пользователь не введет данные. Этот атрибут можно указывать в элементах input и textarea. |
| form | Указание одной или нескольких форм, которым принадлежит элемент ввода. | С помощью атрибута form элементы ввода можно размещать в любой части страницы, а не только в объекте формы. Кроме того, отдельный элемент можно связать с несколькими формами. |
| required | Логический атрибут, который означает, что элемент обязателен. | Атрибут required полезен при выполнении проверки на основе браузера без использования специального кода JavaScript. |
| autocomplete | Позволяет указать, что в поле не должно использоваться автозаполнение и в него не следует подставлять значения, ранее введенные пользователем. | Атрибут autocomplete полезен для таких полей, как номер кредитной карты или одноразовый пароль, которые не следует заполнять автоматически. По умолчанию атрибут autocomplete имеет состояние on ("вкл."). Чтобы отключить его, установите значение off ("выкл."). |
| pattern | Проверка значения элемента на основе регулярного выражения. | Если используется атрибут pattern , следует также указать значение title , описывающее для пользователя предполагаемый шаблон ввода. |
| dirname | Предназначен для отправки сведений о направлении элемента управления вместе с формой. | Например, если пользователь ввел текст справа налево, а элемент ввода содержит атрибут dirname , то вместе с введенным значением будет отправлен параметр направления. |
| novalidate | Если в элементе формы указан этот атрибут, проверка ее отправки отключается. | |
| formaction | Переопределение атрибута action в элементе формы. | |
| formenctype | Переопределение атрибута enctype в элементе формы. | Этот атрибут поддерживается в элементах input и button . |
| formmethod | Переопределение атрибута method в элементе формы. | Этот атрибут поддерживается в элементах input и button . |
| formnovalidate | Переопределение атрибута novalidate в элементе формы. | Этот атрибут поддерживается в элементах input и button . |
| formtarget | Переопределение атрибута target в элементе формы. | Этот атрибут поддерживается в элементах input и button . |
Одно из усовершенствований технологии XMLHttpRequest – появление объекта FormData . С помощью FormData можно создавать и отправлять наборы из пар "ключ/значение" и файлы с применением XMLHttpRequest . При использовании этого метода данные отправляются в том же формате, что и с помощью метода формы submit() с типом кодировки multipart/form-data .
Объект FormData позволяет оперативно создавать формы HTML на языке JavaScript и отправлять их с помощью метода XMLHttpRequest.send() . Ниже приведен простой пример.
Var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
С помощью объекта FormData также можно вводить дополнительные данные в существующую форму перед их отправкой.
Var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "The best part ever!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://some.url/"); xhr.send(formData);
Проверка на основе браузераСледует признать, что проверка данных формы – довольно скучное занятие, однако избежать его нельзя. Сегодня для проверки допустимости введенных данных и их наличия в обязательных полях формы перед ее отправкой на стороне клиента обычно используется код JavaScript или специальная библиотека.
Новые атрибуты ввода, такие как required и pattern , в сочетании с селекторами псевдоклассов CSS, облегчают написание проверок и обратную связь с пользователями. Есть и другие усовершенствованные методы проверки, которые позволяют с помощью кода JavaScript задавать специальные правила и сообщения, а также определять недопустимость элемента и ее причины.
Атрибут requiredЕсли указан атрибут required , при отправке формы поле должно содержать значение. Ниже приведен пример поля ввода обязательного адреса электронной почты, в котором проверяется, введено ли значение и является ли им действительный адрес электронной почты, как описано .
Атрибут pattern
Атрибут pattern задает регулярное выражение, используемое для проверки поля ввода. В этом примере показано обязательное поле ввода текста для номера детали. Предполагается, что такой номер состоит из трех букв верхнего регистра и четырех цифр. Использование атрибутов required и pattern позволяет убедиться, что в поле введено значение, которое соответствует этому формату. Если пользователь наводит указатель на поле, отображается сообщение в атрибуте заголовка.
Немного изменив предыдущий пример, можно выделить поле ввода красным цветом, если в него введен недопустимый номер детали. Для этого достаточно добавить стиль CSS, помещающий поле ввода в красную рамку, если значение недействительно.
:invalid { border: 2px solid #ff0000; }
Атрибут formnovalidateАтрибут formnovalidate можно применять к элементам input и button . Он включает проверку отправки формы. Ниже приведен пример, в котором для отправки формы с помощью кнопки "Отправить" требуется действительное значение, однако для ее отправки с помощью кнопки "Сохранить" оно не требуется.
API проверки ограничений
В API проверки ограничений реализованы удобные инструменты для выполнения особых проверок. Он позволяет решать такие задачи, как установка персонализированной ошибки, проверка допустимости элемента и определение причины его недопустимости. Ниже приведен пример, в котором выдается персонализированное сообщение об ошибке, если значения в двух полях не совпадают.
Email: Repeat Email Address: function check(input) { if (input.value != document.getElementById("email_addr").value) { input.setCustomValidity("The two email addresses must match."); } else { // input is valid -- reset the error message input.setCustomValidity(""); } }
СборкаНиже приведен пример формы запроса на резервирование, в которой используются различные типы элементов ввода, проверка формы, а также селекторы и стили CSS.
Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!
HTML формы могут казаться простыми, но они необходимы для большинства веб-сайтов и приложений. В HTML4 типы полей ввода были ограничены следующим списком:
- input type="text"
- input type="checkbox"
- input type="radio"
- input type="password"
- input type="hidden" - для данных, невидимых пользователю
- input type="file" - для загрузки файлов
- textarea - для ввода больших объемов текста
- select - для выпадающих списков
- button — обычно используется для отправки данных формы, но также можно использовать input type="submit" и input type="image"
К тому же:
- возможности стилизации с помощью CSS ограничены
- расширенные элементы, вроде элементов для выбора даты и цвета нужно реализовывать самостоятельно, с помощью кода
- валидация на стороне клиента требует JavaScript
В HTML5 было введено огромное количество новых типов полей. Они предоставляют нативные помощники ввода и валидации без JavaScript-кода
| Тип | Описание |
| ввод email-адреса | |
| tel | ввод телефонного номера - нет строгого синтаксиса, но разрывы строк будут удалены |
| url | ввод URL |
| search | поле поиска с разрывами строк автоматически удаляется |
| number | число с плавающей точкой |
| range | элемент управления для ввода примерного значения, обычно представляемого с помощью слайдеров |
| date | ввод дня, месяца и года |
| datetime | ввод дня, месяца, года, часа, минуты, секунды и микросекунды относительно текущей временной зоны |
| datetime-local | ввод даты и времени без временной зоны |
| month | ввод месяца и года без временной зоны |
| week | ввод номера недели без временной зоны |
| time | ввод времени без временной зоны |
| color | выбор цвета |
Кроме перечисленных выше, поля ввода могут иметь любой из специфичных для формы атрибутов. Некоторые из них булевого типа, что означает, что они не требуют значений, например:
конечно, можно и добавить таковые, если вам нравится синтаксис в стиле XHTML, например
| Атрибут | Описание |
| name | имя поля ввода |
| value | изначальное значение |
| checked | делает флажок или переключатель выбранным |
| maxlength | Максимальная длина вводимой текстовой строки. В HTML5 также может быть применена и для полей textarea |
| minlength | Минимальная длина строки. Данная возможность документирована, но на момент написания поддержка браузерами слабая, и HTML валидаторы ругаются. Альтернативный вариант использования - pattern=".{3,}", что проверит на наличие минимум трех символов во вводимой строке |
| placeholder | ненавязчивая подсказка внутри поля |
| autofocus | устанавливает фокус на указанный элемент (видимый) при загрузке страницы |
| required | указывает, что в поле должно быть введено значение (не пустое поле) |
| pattern | проверяет значение на соответствие регулярному выражению |
| min | минимальное разрешенное значение (числовое и дата) |
| max | максимальное разрешенное значение (числовое и дата) |
| step | шаг изменения значения. Например, input type="number" min="10" max="19" step="2" разрешит только значения 10, 12, 14, 16 или 18 |
| autocomplete | указывает браузеру подсказку к автодополнению, например “расчетный счет”, или может быть выставлен в значение “on” или “off”, для включения/отключения овтозаполнения |
| inputmode |
указывает способ ввода. Наиболее полезные возможности:
|
| size | размер в количестве символов для полей типа text или password, или количество пикселей для полей типа email, tel, url или search. Наверное, стоит избегать, и использовать стилизацию посредством CSS |
| rows | Количество текстовых строк (только для textarea) |
| cols | количество рядов символов (только для textarea) |
| list | ссылается на список опций |
| spellcheck | установить в true или false, чтобы включить/отключить проверку привописания для поля |
| form | идентификатор форму, которой принадлежит данное поле. Вообще-то поля должны размещаться внутри формы, но этот атрибут позволяет разместить поле за пределами формы, в любом месте страницы |
| formaction | указывает URI, переопределяющее действие формы при отправке данных (только для кнопок отправки/изображений) |
| formmethod | задает GET или POST, переопределяет атрибут формы method (только для кнопок отправки/изображений) |
| formenctype | указывает тип содержимого при отправке (text/plain, multipart/form-data или application/x-www-form-urlencoded, толкьо для кнопок отправки и изображений) |
| formtarget | указывает целевое окно/фрейм для переопределения атрибута формы target при отправке (только для кнопок отправки / изображений) |
| readonly | значение поля не может быть изменено, хотя оно будет отвалидировано и отправлено |
| disabled | отключает поле ввода - нет валидации, и данные не будут отправлены |
Заметьте, что поля date должны использовать формат YYYY-MM-DD для атрибутов value, min и max.
Следующий пример показывает поле, требующее обязательного ввода email, заканчивающегося на @mysite.com, на которое смещается фокус при загрузке страницы.
Списки данных
Список данных содержит набор подходящих значений для любого типа поля, например:
Если поддерживается datalist, браузер предоставляет список значений для автозаполнения, как только вы начинаете вводить данные в поле. Полный список обычно отображается при клике на стрелку, указывающую вниз (если таковая имеется). В отличие от стандартного выпадающего списка, пользователь может вводить произвольные значения в поле.
Возможно указывать значения и текстовые пояснения к значениям, например:
но стоить помнить, что реализация отличается в различных браузерах. Например, Firefox производит автодополнение по тексту (Internet Explorer), тогда как Chrome - по значениям (IE), а текст указывает уменьшенным серым шрифтом:
Списки данных можно заполнять с помощью JavaScript, если вы хотите получать их по AJAX.
Отключение валидацииОтключит валидацию всей формы можно выставив атрибут novalidate элементу form. В дополнение, можно выставить атрибут formnovalidate кнопке/изображению отправки формы.
Запомните, что выставление полю атрибута disabled отключит валидацию этого поля.
Поля выводаРанее мы обсуждали поля ввода, но HTML5 также предоставляет поля для вывода информации
- output - результат вычисления пользовательских действий
- progress - полоса прогресса (атрибуты value и max задают состояние)
- meter - шкала, которая может менять свой цвет между зеленым, желтым и красным в зависимости от установленных значений атрибутов value, min, max, low, high и optimum
Согласно спецификации , каждый элемент формы считается параграфом, и отделяется от остальных частей элементом
Итересно. Я в целях разделения использую div, хотя сомневаюсь, что это имеет большое значение. Тег p короче, разве что вам нужно будет применять дополнительный стиль, чтобы убрать поля.
Что более важно - метки нужно использовать, либо окружая элемент формы, либо размещая их рядом, и связывая их атрибутом for с соответствующими полями, например:
Имя
Фамилия
Email адрес
Подпишитесь на рассылку
Элементы управления не стандартизированыНе существует предписаний по оформлению элементов форм, которым должны следовать производители браузеров. Это сделано намерено: стандартный элемент формы для выбора дат, ориентированный на мышь, может быть слишком мал для пользователя мобильного устройства, так что производитель может сам позаботиться о создании альтернативной версии элемента формы для сенсорных интерфейсов.
Поддержка браузерамиНе все типы полей и атрибуты поддерживаются во всех браузерах. Говоря в общем, все современные браузеры, начиная с IE10+, включают в себя поддержку основных типов полей, вроде email или числовых полей. Но на момент написания статьи поля типа дата/время поддерживаются только в браузерах на движках Webkit и Blink.
Для не поддерживаемых типов полей браузер откатится до стандартного поля ввода типа text, а не поддерживаемые атрибуты и их значения проигнорирует.
Всегда используйте правильный тип!Важно использовать правильный тип поля для ожидаемого типа вводимых данных. Может, это и очевидно, но будут ситуации, когда вам нужно будет воспользоваться простым текстовым полем.
Рассмотрим даты. Поддержка в браузерах неоднородна, и это приводит к проблемам при внедрении.
Простым решением будет отказ от использования HTML5 поля date, вернутья к полю text, и реализовать свой элемент управления датами. Не делайте этого. Вы никогда не создадите нормальный элемент для выбора даты, который работает на всех устройствах, на всех разрешениях экрана, поддерживает клавиатуру, мышь и сенсорный ввод, и продолжает работать при отключенном JavaScript. К тому же, в мобильных браузерах есть свои инструменты обработки элементов управления с заточкой под сенсорное управление.
За типами полей ввода HTML5 будущее. Используйте их, и, если необходимо, пользуйтесь JavaScript заменой в ситуациях, требующих хорошей кроссбраузерности. Но помните о том, что требуется...
Валидация на серверной сторонеВалидация на стороне браузера не гарантируется. Даже если вы заставили всех перейти на последнюю версию Chrome, то и тогда вы не сможете избежать:
- багов браузера или ошибок в JavaScript, пропускающих неверные данные
- пользователей, изменяющих DOM или скрипты с помощью инструментов браузера
- отправка данных с систем, которые вы не контролируете
- перехват данных на пути от браузера к серверу (обычно по HTTP)
Валидация на стороне клиента никогда не была и не будет заменой валидации на стороне сервера. Валидация пользовательских данных на стороне сервера имеет большое значение. Валидация на стороне клиента - дополнительная полезная возможность.
И, наконец, помните, что даты могут быть получены в различных форматах, будь то YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY и прочие. Проверяйте наличие цифр в первых четырех символах, или используйте встроенные средства разбора и проверки используемого языка/фреймворка в случае необходимости.
В этой статье я рассказал о многих аспектах разметки HTML5 форм. В следующей статье мы рассмотрим CSS-свойства, относящиеся к формам.
- Перевод
Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover и необходимость в скриптах для многих ситуаций первого плана отпала.
Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался JavaScript.
Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.
Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.
Текст-заглушка Существует распространенный шаблон для оформления поисковых форм:В 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
. И, разумеется, только единожды на странице.
Ваш пароль
Теоретически, наличие незаполненного поля с этим параметром само себе должно не дать пользователю отправить данные на обработку. Но хотя пока браузеры этого и не делают, его все равно можно интегрировать для привычной обработки форм 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
предполагается, что браузер будет отображать поле немного по-другому, придерживаясь общего стиля оформления поисковых полей в операционной системе.
Email
Веб-сайт
Телефон
Опять же, вести себя они будут аналогично обычным импутам, с той разницей, что теперь браузеры располагают немного большей информаций относительно данных, которые туда надо вводить, что может быть полезным.
Safari заявляет о поддержке этих новых типов полей, но на первый взгляд, они в нем не выглядят сколько-нибудь отлично от тех, что с type=«text» . Однако если вы испытаете их в Mobile Safari - том, что на мобильных устройствах Apple, - разница станет заметной. Вид экранной клавиатуры будет отличаться для разных полей:
Новые типы импутов в Mobile Safari.Мелочь, а приятно.Ползунки (те, что «слайдеры») Многие JavaScript-библиотеки имеют встроенные разного рода виджеты, которые можно использовать в веб-приложениях. Они работают неплохо; если включен JavaScript, конечно. Но было бы здорово, если б пользователям не приходилось загружать файл скриптов каждый раз, когда мы хотим добавить каких-то особых элементов управления в нашу форму.
Классический пример - ползунок. До настоящего момент его невозможно было создать без помощи JavaScript. Теперь, с HTML5, он существует как родной браузеровский input с type=«range» .
Сколько хотите?
По умолчанию, диапазон этого поля: от нуля до ста. Минимальное и максимальное значения можно задать при помощи параметров min и max соответственно.
Ваша оценка
Это все хорошо работает в Safari и Opera - другие браузеры отобразят просто текстовое поле. Это не столь плохо, и мы знаем, что при желании для них всегда можно добавить альтернативную реализацию данного контрола через JavaScript, используя ту проверочную функцию, что я уже приводил выше.
Естественно, скриптовые решения потребуют больше времени на загрузку и будут менее доступны для дополнительной обработки другими средствами, чем «родные» элементы DOM. Впрочем, по непонятным причинам, тот же range в Safari в данный момент нельзя подружить с клавиатурой… Надеюсь, скоро починят.
Счетчик Поле с типом range не отображает точное значение, выбранное пользователем, а лишь визуально представляет относительное число на ползунке. Для некоторых случаев это подходит, в других же важна точность - возможность ввести конкретное значение. Для этого есть type=«number» . Сколько хотите?
Браузеры добавляют к такому полю кнопки «плюс-минус», делая его эдаким гибридом между типами text
и range
.
Можно заменить, что на разных сайтах эти календари реализованы слегка по-разному, потому было бы неплохо иметь одно общее для браузера решение, которое устранит эту непоследовательность и необходимость на исследование нюансов разного интерфейса в каждом отдельном случае.
В 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-11
datetime
: 1918-11-11T11:11:00+01
datetime-local
: 1918-11-11T11:11:00
time
: 11:11:00
month
: 1918-11
Нет просто типа year , зато есть week - число от 1 до 53 в сочетании с годом.
Использовать все это довольно просто:
Start date
Opera справляется с реализацией возможностей этих новых полей, но выглядят они в ней не сказать что очень привлекательно…Как обычно, браузеры, не поддерживающие эту технологию, отобразят простое текстовое поле. В этом случае вы можете либо указать в инструкции для пользователей, в каком формате они должны ввести дату, или же вставить виджет для скриптового календаря. Опять же, не забудьте сначала проверить его встроенную поддержку:
If (!inputSupportsType("date")) {
// Код виджета для календаря.
}
Даже самый красиво написанный календарь такого рода на JavaScript потребует довольно большой объем кода для генерации таблицы дней и обработки событий по их выбору. Встроенная поддержка этой возможности должна работать быстрее и надежнее, не говоря о том, что устранит разнобой в оформлении.
Фоновый цвет
Задумка в том, чтобы добавить наконец в браузеры встроенные «пипетки», вроде тех, что есть почти во всех других приложениях на вашем копьютере. Пока что она не поддерживается ни одним браузером, но если до этого дойдет, это будет весьма клево.
Так что в этом случае пока следует пользоваться JavaScript-решениями, но не забывать все равно проверять встроенную поддержку - чтобы не прозевать момент, когда время таки придет.
Сделай сам Все эти новые типы ввода служать для двух целей: они позволяют браузерам иметь специально оформленные или настроенные поля для определенных видов данных, и знать как проверять валидность этих данных. Описанные нововведения HTML5 покрывают большую часть распространенных ситуаций, но в какой-то момент вам веротяно может понадобиться создать валидируемое поле ввода, следующее своим особым принципам.Хорошая новость в том, что это можно реализовать, используя параметр pattern , где можно обозначить, какой вид данных вы запрашиваете. Плохая новость в том, что вам придется использовать регулярные выражения.
Почтовый индекс США
Большую часть времени параметр pattern
вам вряд ли будет нужен. Если же вы решите его задействовать - я вам сочувствую.
Валидация форм на стороне клиента теперь станет намного проще - хоть и, понятное дело, всецело полагаться на нее все равно нельзя; нужно не забывать проверять данные и на стороне сервера. Плюс, для многих «нестандартных» пока еще способов ввода данных теперь будут «родные» решения, не требующие от пользователей загрузки дополнительных скриптовых библиотек.
Я уверен, вы видите все преимущества встроенных в браузеры календарей и ползунков, но вижу в ваших глазах и закономерный вопрос «Можно ли к ним применить CSS-стили?»
К сожалению, на данный момент ответ скорее - «нет». Над этим работает CSS Working Group.
Это может разубедить вас в целесообразности их использовать вообще. Если конкретные реализации новых фич в браузерах не выглядят привлекательно для вас, вы можете продолжать использовать вместо них скриптовые виджеты.
Но я хочу, чтобы вы задали себе вопрос «А нужно ли к ним применять свои стили?» Ведь многим из нас не нравится, когда горе-разработчики или -дизайнеры навязчиво заставляют нас отказывать от своих привычек и исследовать изобретенные ими интерфейсы, которые, по их мнению, лучше, стандартных (что совсем не всегда факт). Зачем же поощрать эту порочную практику введения пользователей в заблуждение?
Лично я хотел бы видеть конкуренцию браузеров за самые удобные и красивые решения для веб-форм HTML5. Такую войну браузеров я бы с удовольствием поддержал.
Окей, с формами покончено. В следующей части мы примемся за новую, аппетитную семантику HTML5.
