Поддержка INPUT type=date для старых браузеров


Содержание

Новые типы элемента

Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута type элемента .

Если браузеру встречается неизвестный тип элемента , веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:

В HTML5 из этого поведения извлекается польза. А именно, в элемент было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле нового типа email:

Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:

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

Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.

Выполнять проверку. Браузеры могут выполнять более сложные проверки после того, как пользователь нажмет кнопку для отправки данных.

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

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

К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры — они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.

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

Поддержка новых типов данных основными браузерами

Тип данных IE Firefox Chrome Safari Opera Safari iOS Android
email 4 10 5 10.6
url 4 10 5 10.6
search (без проверки)
tel (без проверки)
number 10 5
range 6 5 11
datetime, date, month, week, time 10 11
color 11

Хотя мобильные браузеры Safari для iOS и Android не поддерживают проверку, предоставление этими браузерами специализированных клавиатур является значительным удобством, поэтому в приложениях для этих веб-обозревателей стоит использовать специальные типы данных.

Адреса электронной почты

Тип данных email используется для полей, предназначенных для ввода адресов электронной почты. В общем, адрес электронной почты состоит из строки символов (использование некоторых символов не допускается). Допустимый адрес должен содержать символ @ и точку, между которыми должен быть минимум один символ, а после точки — минимум два символа:

Тип email поддерживает атрибут multiple, который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.

Не забывайте, что пустые значения проходят проверку. Чтобы не допустить пустого поля адреса, в его элемент нужно вставить атрибут required.

URL-адреса

Тип url применяется для полей ввода URL-адресов. Вопрос, что является допустимым URL, продолжает горячо обсуждаться. Но большинство браузеров применяет сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (который может быть как настоящим, типа http://, так и выдуманным, типа bonk//) и позволяет вводить пробелы и большинство специальных символов, за исключением двоеточия.

Некоторые браузеры также предлагают возможные варианты URL в выпадающем списке, которые обычно взяты из журнала недавно посещенных браузером страниц.

Поля поиска

Тип search применяется для полей поиска. Они обычно предназначены для ввода ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может быть поиск по всему Интернету (как в Google), поиск по одной странице или же специальная поисковая процедура, которая исследует каталог информации. В любом случае поле поиска выглядит и ведет себя почти точно так же, как и обычное текстовое поле.

В некоторых браузерах, например Safari, поле поиска выглядит слегка по-другому и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить данные в поле поиска в браузере Safari или Chrome, с правой стороны поля выводится небольшой значок в виде X, щелкнув по которому можно очистить поле.

За исключением этих незначительных различий, поле поиска является ничем иным, как обычным текстовым полем. Основная разница заключается в семантике. Иными словами, тип данных search используется для того, чтобы сделать ясным название поля для браузеров и вспомогательных программ для пользователей с ограниченными возможностями. Они могут направлять посетителей в требуемое место страницы или предоставлять другие, более интеллектуальные услуги — возможно в будущем.

Телефонные номера

Тип данных tel применяется с целью обозначения полей для ввода телефонных номеров, которые могут быть представлены в самых разных форматах. В одних случаях используются только цифры, в других применяются пробелы, тире, знак «плюс» и круглые скобки. Возможно, это отсутствие единого формата и есть причина того, что стандарт HTML5 не требует от браузеров выполнения проверки телефонных номеров. Вместе с тем, не понятно, почему поле типа tel не отклоняет по крайней мере, буквы.

В настоящее время единственная польза от применения поля типа tel состоит в предоставлении специализированной виртуальной клавиатуры для ввода телефонных номеров на мобильных браузерах, которая содержит цифры, но не буквы.

Числа

В HTML5 определяются два числовых типа данных. Тип number предназначен для обычных чисел.

Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принимают буквально все: цифры, буквы, пробелы, знаки пунктуации и т.п. По этой причине одна из самых распространенных задач проверки — убедиться, что значение является числом в определенном диапазоне. Но при вводе данных в поле типа number браузер автоматически игнорирует все символы, кроме цифр. Далее показан пример кода для создания поля этого типа:

Конечно же, есть много чисел, которые не подходят для каждого типа числовых данных. Например, в приведенной выше разметке разрешается возраст наподобие 43 000 или -6 лет, что несколько не соответствует реальности. Эта проблема решается с помощью атрибутов min и max. В следующем коде представлен пример ограничения возраста разумным диапазоном:

Обычно поля типа number принимают только целые числа, а дроби, например 30.5 не разрешаются. (Более того, некоторые браузеры даже не позволят ввести десятичный знак.) Но это поведение также можно изменить с помощью атрибута step, который указывает шаг изменения числа (в большую или меньшую сторону). Например, установив значение step в 0.1, можно вводить такие значения, как 0.1, 0.2 0.3 и т. д. Но попробуйте отправить форму со значением 0.15 и вы получите знакомое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1.

Атрибут step также влияет на работу кнопок поля со счетчиком:

Ползунки

Другим числовым типом HTML5 является range. Подобно типу number, этот тип может представлять целые и дробные значения. Также поддерживает атрибуты min и max для установки диапазона значений. Далее показан пример кода для создания поля этого типа:

Разница состоит в том, каким образом поле типа range представляет свою информацию. Вместо счетчика, как для поля типа number, интеллектуальные браузеры отображают ползунок:

Чтобы установить значение типа range, нужно просто перетянуть ползунок в требуемую позицию между минимальным и максимальным значениями. Но браузеры, поддерживающие этот тип поля, не предоставляют никакой обратной информации об установленном значении. Чтобы получить эти сведения, в разметку нужно добавить процедуру JavaScript, которая реагирует на изменения положения ползунка (возможно, посредством обработки события onChange), а потом отображает эту формацию рядом с полем.

Дата и время

В HTML5 определяется несколько типов данных, связанных со временем. Браузеры, которые поддерживают типы дат, могут выводить удобный выпадающий календарь, в котором пользователь может выбрать требуемую дату и/или время. Это не только устраняет неопределенность относительно правильного формата даты, но также запрещает случайно (или нарочно) установить несуществующую дату. Интеллектуальные браузеры могут делать еще больше, например поддерживать интеграцию с персональным календарем.

Ниже показан пример использования дат:

В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

Типы данных для дат и времени

Тип данных Описание
date Дата по шаблону ГГГГ-ММ-ДД
time Время в 24-часовом формате с необязательными секундами, по шаблону чч:мм:сс.сс
datetime-local Дата и время, разделенные прописной английской буквой T (по шаблону ГГГГ-ММ-ДДTчч:мм:сс)
datetime Дата и время, как и для типа datetime-local, но со смещением временного пояса. Используется такой же шаблон (ГГГГ-ММ-ДДTчч:мм:сс-чч:мм), как и для элемента
month Год и номер месяца по шаблону ГГГГ-ММ
week Год и номер недели по шаблону ГГГГ-Номер недели

Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.

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

Несколько необычных атрибутов элемента

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

Атрибут spellcheck

Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки — значение true.

По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно — как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет ;) или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Атрибуты autocorrect и autocapitalize

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone


Атрибут multiple

Веб-разработчики использовали атрибут multiple с элементом для создания списков с множественным выбором с незапамятных времен. Но сейчас они могут использовать этот атрибут с определенными типами элемента , включая тип file (для закачивания файлов) и email. В браузере, поддерживающем этот атрибут, пользователь может выбрать сразу несколько файлов закачивания на сервер или вставить несколько адресов электронной почты в одно поле.

Валидация HTML5-форм

Несколько месяцев назад, Sandeep представил на всеобщее обозрение HTML Constraint API , показав, как можно использовать новые HTML5-элементы ввода и их атрибуты для валидации форм с минимальным использованием JavaScript.

В этой статье, я собираюсь разобрать валидацию на примере простой формы заказа, используя Constraint API, сделав акцент на том, чтобы не снизить удобства использования.

На всякий случай напомню, если вы не читали статью Sandeep о нововведениях в HTML5 относительно новых типов элементов ввода и атрибутов тега , которые позволяют браузерам самостоятельно производить валидацию на клиентской стороне без необходимости использования JavaScript. Чтобы начать использование новых возможностей, вам нужно просто добавить новые атрибуты и типы элементов ввода к тегу .

Строго говоря, вам следует использовать HTML5 DOCTYPE, иначе HTML-валидатор выдаст ошибки на странице. Но хорошая новость состоит в том, что новые функции имеют обратную совместимость. Если, к примеру, какой-нибудь старый браузер их не поддерживает, то это не « сломает » всю HTML-страницу – неподдерживаемые элементы будут отображены как .

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

Давайте разберем пример, чтобы понять, как можно проводить валидацию, используя лишь встроенные средства браузера. Ниже приведен код простой формы заказа:

В данном примере каждый тег ассоциирован с тегом . Атрибут for тега сравнивается со значением атрибута id соответствующего тега . Это позволяет однозначно присвоить значения меток (тегов ) нужным элементам ввода. Также, это означает, что если вы кликните на метке, то соответствующий элемент ввода получит фокус.

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

Я также использовал WAI ARIA атрибут aria-describedby , который помогает пользователям с ограниченными возможностями ввести свое имя в правильном формате.

Это отображается, когда поле ввода получает фокус, предоставляя контекстно-зависимую справку:

Чтобы провести валидацию этой формы, нам необходимо:

  • Проверить заполнены ли обязательные поля;
  • Убедиться, что значение поля с именем является именно именем;
  • Проверить формат введенного email-адреса;
  • Проверить, чтобы введенный URL-адрес соответствовал формату;
  • Убедиться, что было указано количество билетов.

Обязательные поля

Валидация обязательных полей на предмет их правильного заполнения, не сложнее добавления для поля ввода атрибута required . В нашем случае, это поля Name, Email и Number of Tickets. Например, поле Name с изменениями будет выглядеть так:

Если мы попытаемся отправить данную форму, не заполнив всех обязательных полей, браузер оповестит о необходимости это сделать:

Наверное, вы заметили, что наличия атрибута ‘required’ в тегах меток для обязательных полей теперь не требуется. Это сделано потому, что программы, читающие с экрана, указывают наличие атрибута required также и для меток. В таком случае, сообщение о том, что поле обязательно к заполнению, прозвучит два раза, что, естественно, лишнее.

Предупреждение: не все браузеры имеют поддержку атрибута required, поэтому в некоторых комбинациях « браузер/программа чтения с экрана » могут возникать ошибки. Поэтому, на данный момент лучшей практикой будет указание атрибута aria-required=”true” :

Валидация данных

Теперь, после того как пользователь ввел данные в обязательные поля, нам необходимо убедиться, что они заполнены в соответствии с требуемым форматом.

Нам нужно, чтобы содержимое поля ‘Name’ имело формат ‘ Firstname Lastname ‘ и включало в себя только буквы и пробелы (в реальных сценариях, возможно, нужно будет принять во внимание и другие символы).

Этого можно достичь, добавив атрибут pattern к полю ‘Name’, установив его значение в виде регулярного выражения, которое описывает правило, которому должны соответствовать вводимые данные:

При использовании атрибута pattern, символы ^ и $ зарезервированы для начала и конца регулярного выражения и не должны в него включаться.

Вы можете помочь пользователю, использовав атрибут title, который подсказывает требуемый формат ввода:

Текст в атрибуте title затем присоединяется к встроенному валидационному сообщению:

Стоит заметить, что некоторые сочетания « программа чтения с экрана/браузер » могут привести к ситуации, когда значение атрибута title будет прочитано несколько раз, в дополнение к тексту атрибута aria-describedby, поэтому обратите на это внимание.

К примеру, я обнаружил, что использование программы NVDA с IE10 ведет к двойному прочтению: как атрибута title, так и aria-describedby. Однако NVDA с Chrome и Firefox ведет себя совершенно нормально – читается только текст атрибута aria-describedby.

Далее, мы рассмотрим этот вопрос и покажем решение с использованием CSS3.

Валидация email, URL и номеров

Чтобы убедиться, что пользователь ввел верные данные в поля email, website и number of tickets, мы можем использовать новые элементы ввода, появившиеся в HTML5:

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

Также заметим, что атрибут type больше не является обязательным. Если вы явно не укажете тип элемента ввода, то по умолчанию он будет равен type=»text» .

Предположим, что мы хотим ограничить число билетов, которое может купить один человек. Это можно реализовать, используя атрибуты max и min :

Если пользователь введет число меньшее 1 или большее 4, то выведется сообщение о том, что диапазон ввода ограничен.

Использование CSS для подсветки обязательных полей и неверно введенных данных

Вкупе с новыми типами элементов ввода и атрибутами, появившимися в HTML5, CSS3 также предлагает новые псевдоклассы, которые можно использовать для визуальных подсказок пользователю о том, какие поля являются обязательными, какие опциональными, а какие содержат ошибки валидации.

Селекторы обязательных полей могут использовать псевдокласс :required :

А дополнительные – псевдокласс :optional :

Успешное или неудачное прохождение процедуры валидации может показываться пользователю с помощью псевдоклассов :valid, :invalid, :in-range и :out-of-range :

Ранее, я заметил, что определенные сочетания « программа чтения с экрана/браузер » ведут к двойному прочтению атрибутов title и aria-describedby .

Что ж, одним из способов обойти это препятствие является удаление атрибута title из тега элемента ввода и использование CSS3-псеводкласса :invalid , чтобы показать текст атрибута aria-describedby :

Илон Маск рекомендует:  Dos fn 5ah создать уникальный временный файл

Далее, в дополнение к отображению текстовой справки при получении полем ввода фокуса, мы будем отображать эту подсказку, когда в поле ввода внесены неверные данные.

После всех манипуляций HTML-код должен выглядеть так:

Отключение встроенной в браузер валидации

Вы можете отключить встроенную в браузер валидацию, добавив атрибут novalidate к тегу

Кроссбраузерность

Хорошая новость состоит в том, что валидация HTML-форм поддерживается всеми новыми браузеры для настольных компьютеров и большинством мобильных браузеров.

Плохая же новость заключается в частичной поддержке в настольной версии Safari и её отсутствии во всех браузерах iOS Safari и в стандартных браузерах для Android. Если вам нужна поддержка старых версий IE (ниже версии 10), то там вы ее также не обнаружите.

Что же можно сделать, если требуется поддержка браузеров, которые не имеют встроенных средств валидации?

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


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

Третий подход подразумевает использование JavaScript для обнаружения поддержки валидации форм в браузере, и, если таковая имеется, то использовать её; в противном же случае обратиться к JavaScript-валидации.

Библиотеки наподобие Modernizr могут помочь обнаружить поддержку HTML5, но вы всегда можете написать собственный код, если не хотите подключать стороннюю JavaScript-библиотеку:

Заключение

В этой статье мы обзорно изучили использование HTML5-валидации форм на стороне клиента, приведя пример её применения в форме заказа, и при этом мы не пользовались средствами JavaScript.

Также мы указали на некоторые вопросы, связанные с реализацией поддержки для людей с ограниченными возможностями, которые стоит иметь ввиду.

Также, было рассмотрено использование новых CSS3-псеводклассов для отображения визуальных подсказок о том, какие поля обязательны к заполнению, а какие нет, какие поля заполнены правильно, а какие — нет.

Наконец мы поговорили об отключении HTML-валидации форм и обнаружении поддержки этой возможности в различных браузерах.

Данная публикация представляет собой перевод статьи « HTML5 Form Validation » , подготовленной дружной командой проекта Интернет-технологии.ру

Поддержка HTML5 мобильных форм и типов HTML input

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

Типы HTML5 Input

HTML5 имеет кучу новых типов ввода для форм. Эти типы вводов позволяют лучше контролировать входные данные и проверять их. Некоторые из них особенно полезны для мобильных пользователей, у которых часто возникают трудности с работой HTML Input . Полный список типов входных данных приводится ниже:

  • color — выбор цвета
  • date — выбор даты
  • datetime — выбор даты и времени
  • email — валидация email-маски
  • number — ввод номер
  • range — слайдер диапзаонов
  • search — поле для поиска
  • tel — валидация маски телефона
  • time — выбор времени
  • url — валидация URL

Разумеется, данный перечень не полный. Сюда не включены типы, которые приняты стандартом, но суть их пока не ясна. Самые популярные и актуальные из приведенных выше типов мы рассмотрим в данной статье с приведением примеров.

1. Input type color

Если поддерживается этот тип входного сигнала, то браузер пользователя вызовет встроенный color-picker (выбор цвета) на клиентском устройстве. Выбранный цвет будет представлен в соответствующем шестнадцатеричном значении RGB.

Новые свойства форм в HTML5

Элемент и атрибут list

До сих пор мы привыкли использовать элементы и для создания раскрывающихся списков вариантов выбора для пользователей. Но как быть, если мы захотим создать список , который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял вводить свои собственные? Это требует кропотливого создания сценария – но теперь можно просто использовать атрибут list , чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе datalist > .

Как предполагают названия, эти новые типы элементов ввода имеют отношение к телефонным номерам, адресам e-mail, или URL. Браузеры будут отображать их как обычные текстовые поля ввода, но явное указание, какой вид текста ожидается в этих полях, играет важную роль в проверке формы на стороне клиента. Кроме того, на некоторых мобильных устройствах браузер будет переключаться из своей обычной экранной клавиатуры для ввода обычного текста в более контекстно-подходящие варианты. Здесь также возможно, что в будущем браузеры будут использовать дополнительные преимущества этих явно размеченных элементов ввода, чтобы предложить новые возможности, такие как автозавершение адресов e-mail и телефонных номеров на основе списка контактов пользователя или адресной книги.

Новые атрибуты

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

placeholder

Обычный удобный прием в формах Web состоит в размещении замещаемого контента в текстовых полях ввода – например, чтобы предоставить дополнительную информацию об ожидаемом типе информации, ввод которой должен выполнить пользователь – который исчезает, когда элемент управления формы получает фокус. Хотя это обычно требует использования JavaScript (удаление контента поля формы в фокусе и восстановление текста по умолчанию, если пользователь покидает поле, не вводя ничего), мы можем теперь использовать просто атрибут placeholder :

autofocus

Другим обычным свойством, которое ранее требовало использования сценария, является автоматическое помещение поля формы в фокус при загрузке страницы. Теперь это можно сделать с помощью атрибута autofocus :

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

min и max

Как предполагают имена, эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы элементов ввода number, range, time или date (можно даже использовать их для задания верхней и нижней границы дат – например, в форме бронирования путешествия можно ограничить элемент выбора даты, позволяя выбирать только будущие даты). Для элементов ввода range, min и max необходимо, на самом деле, определять, какие значения возвращаются при отправке формы. Код вполне простой и не требует пояснений:

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. Например, может потребоваться, чтобы пользователи вводили определенное время, но только с шагом 30 минут. В этом случае можно использовать атрибут step , помня о том, что для элементов ввода time значение атрибута задается в секундах:

Новые механизмы вывода

Кроме новых элементов управления форм, с которыми может взаимодействовать пользователь , HTML5 определяет ряд новых элементов, предназначенных специально для вывода и визуализации информации для пользователя.

Мы уже упоминали об элементе вывода output , когда говорили об элементе ввода range – этот элемент служит средством вывода «результата вычислений», или в более общем смысле для предоставления явно определенного вывода сценария (вместо простого выталкивания некоторого текста в случайный span или div с помощью innerHTML , например). Чтобы еще более явно указать, каким конкретно элементам управления формы соответствует output , можно – аналогично тому как для label – передать список >for элемента.

Два этих новых элемента очень похожи, оба в результате создают индикатор/панель, выводимую пользователю. Отличие их состоит в их назначении. Как предполагает название, progress предназначен для представления индикатора выполнения, чтобы указать процент завершения определенной задачи, в то время как meter является более общим индикатором скалярного измерения или дробного значения.

Проверка

Проверка формы является очень важной, как на стороне клиента, так и на стороне сервера, чтобы помочь законным пользователям избежать и исправить ошибки, и чтобы остановить злоумышленных пользователей от отправки данных, которые могут нанести вред приложению. Так как браузеры могут теперь иметь представление о том, какой тип значений ожидается из различных элементов управления форм (по их собственному типу, или каким-либо верхним/нижним границам, заданным для числовых значений, дат и времени), они могут также предложить собственную проверку формы – еще одна утомительная задача, которая, до сих пор, требовала от авторов написания большого объема кода JavaScript или использования каких-либо готовых сценариев/библиотек проверки.

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

required

Одним из наиболее общих аспектов проверки формы является принудительное заполнение требуемых полей – недопущение отправки формы, пока определенные элементы информации не будут введены. Это можно теперь легко реализовать, добавляя атрибут required к элементам input, select или textarea .

type и pattern

Как мы видели, авторы могут теперь определять тип записи , который они ожидают из полей формы – вместо простого определения текстового элемента ввода, авторы могут явно создавать элементы ввода для таких вещей как числа, адреса e-mail и URL. Как часть клиентской проверки, браузеры могут теперь проверять, что ввод пользователя в эти более специфические поля соответствует ожидаемой структуре – по существу, браузеры оценивают значения ввода в соответствии со встроенным шаблоном, который определяет, как выглядят допустимые значения в полях ввода этого типа, и будут предупреждать пользователя, когда его ввод не соответствует критериям.

Для других текстовых полей ввода, которые, тем не менее, должны следовать определенной структуре (например, формы регистрации, где имя пользователя может содержать только определенную последовательность букв нижнего регистра и цифр), авторы могут использовать атрибут pattern для определения своего собственного регулярного выражения.

Стилевое оформление с помощью CSS3

Соответственно встроенной проверке форм HTML5, Модуль Базового Интерфейса Пользователя CSS3 (http://www.w3.org/TR/css3-ui/) определяет последовательность новых псевдо-классов, которые могут использоваться для различения требуемых полей и для динамического изменения внешнего вида элементов управления формы на основе того, были они заполнены правильно или нет:

  • :required и :optional позволяют явно оформить элементы управления на основе того, имеют они или нет требуемый атрибут
  • :valid и :invalid будут применять стили к элементам управления формы в зависимости от клиентской проверки
  • :in-range и :out-of-range работает специально с элементами управления, которые имеют атрибут min и/или max .

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


Как обстоят дела для различных браузеров?

На настольном компьютере браузер Opera в настоящее время имеет наиболее полную реализацию новых типов элементов ввода и собственную клиентскую проверку, но уровень поддержки растет также во всех основных браузерах, поэтому пройдет не так много времени, и мы сможем использовать новые мощные средства в собственных проектах. Но как обстоит дело в старых браузерах?

Предполагается, что браузеры, которые не понимают новые типы элементов ввода (такие как date или number ) будут просто интерпретировать их как стандартные текстовые элементы ввода – не так как их более развитые в отношении HTML5 аналоги, но, по крайней мере, они позволяют заполнить формы. Однако, как и в отношении большей части новых функций HTML5, можно предложить лучшие резервные варианты для пользователей браузеров, которые недостаточно развиты для работы с формами HTML5, выполнять базовую проверку свойств на основе JavaScript и, только в случае необходимости, загружать внешние библиотеки JavaScript, чтобы «имитировать» поддержку более сложных виджетов элементов управления форм и проверку. Таким образом можно уже программировать будущее, не отвергая существующих пользователей.

Сумасшедшие формы

Каждый знает о веб-формах, не так ли? Вставляем элемент

Браузеры, которые не поддерживают атрибут placeholder , его просто игнорируют. Без вреда и нарушений.

Спроси профессора Разметкина

☞ В. Могу я использовать HTML разметку для атрибута placeholder ? Я хочу вставить картинку или, может, изменить цвета.

О. Атрибут placeholder может содержать только текст, никакого HTML-кода. Однако есть специальные расширения CSS, которые позволяют вам установить стиль текста в некоторых браузерах.

Поля с автофокусом

Поддержка автофокуса
iPhone
10.0+ 4.0+ 4.0+ 3.0+ 10.0+ 3.0+

Сайты могут использовать JavaScript для автоматического получения фокуса в первом поле формы. К примеру, на главной странице Google.com автофокус есть у поля для ввода поисковых ключевых слов. Хотя это и удобно для большинства людей, но может раздражать опытных пользователей и людей с особыми потребностями. Если вы нажмёте пробел в ожидании прокрутки страницы, прокрутки не будет, потому что фокус находится в поле ввода формы (будет набираться пробел в поле вместо прокрутки). Если вы перевели фокус на другое поле ввода, пока страница загружается, скрипт автофокуса на сайте может «услужливо» переместить фокус обратно на исходное поле ввода, прерывая ваш набор и заставляя вводить текст в неверном месте.

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

Для решения этих проблема HTML5 вводит атрибут autofocus для всех элементов форм. Атрибут autofocus делает именно то, как и звучит: как только страница загружается, перемещает фокус в указанное поле. Но поскольку это всего лишь разметка, а не сценарий, поведение будет постоянным для всех сайтов. Кроме того, производители браузеров (или авторы расширений) могут предложить пользователям способ отключить автофокус.

Вот как вы можете установить поле формы с автофокусом.

Браузеры, которые не поддерживают атрибут autofocus , будут его игнорировать.

Что такое? Говорите, что желаете, чтобы автофокус работал везде, а не только в вычурных HTML5-браузерах? Вы можете оставить текущий скрипт с автофокусом, просто сделайте два небольших изменения:

  • добавьте атрибут autofocus в код HTML;
  • проверьте, поддерживает ли браузер атрибут autofocus , и если нет, запустите собственный скрипт.

Автофокус с альтернативой

Устанавливайте фокус как можно раньше

Многие веб-страницы ждут, пока сработает window.onload и устанавливают фокус. Но событие window.onload не сработает, пока все изображения не загрузятся. Если на вашей странице много изображений, такие наивные скрипты потенциально изменят фокус после того, как пользователь начал взаимодействовать с другой частью вашей страницы. Вот почему опытные пользователи ненавидят скрипты автофокуса.

Например, в предыдущем разделе скрипт автофокуса размещен сразу после поля формы, на который он ссылается. Это оптимальное решение, но оно может оскорбить ваши чувства ставить блок кода JavaScript в середине страницы (или более приземлёно, ваша система может быть не настолько гибкой). Если вы не можете вставить скрипт в середине страницы, вы должны установить фокус через пользовательское событие, как $(document).ready() в jQuery вместо window.onload .

Автофокус через jQuery

Пользовательское событие jQuery срабатывает, как только DOM доступен — то есть ждёт, пока загрузится текст страницы, но не ждёт, пока все изображения загрузятся. Это не оптимальный подход — если страница необычно большая или сетевое соединение медленное, пользователь может по-прежнему взаимодействовать со страницей перед тем, как выполнится скрипт с фокусом. Но всё же это намного лучше, чем ждать, пока произойдет событие window.onload .

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

Автофокус с альтернативным пользовательским событием

Это решение оптимальное, как и первый подход. Фокус будет установлен в поле формы, как только это станет технически возможно, в то время как текст страницы все ещё грузится. Часть логики приложения (фокус в поле формы) перенесена из тела страницы в раздел . Этот пример основан на jQuery, но концепция пользовательских событий не является уникальной для jQuery. Другие JavaScript-библиотеки вроде YUI и Dojo предлагают аналогичные возможности.

  • Правильная установка фокуса это важно.
  • Если это возможно, пусть браузер использует атрибут autofocus в том поле, для которого вы хотите получить фокус.
  • Если вы используете альтернативный код для старых браузеров, определяйте поддержку атрибута autofocus , чтобы скрипт выполнялся только в старых браузерах.
  • Устанавливайте фокус как можно раньше. Вставьте скрипт с фокусом в код сразу же после поля формы. Если это не задевает вас, вставьте JavaScript-библиотеку, которая поддерживает пользовательские события, и вызывайте событие в коде сразу же после поля формы. Если это невозможно, используйте событие вроде $(document).ready() из jQuery.
  • Ни при каких обстоятельствах не ждите, пока window.onload установит фокус.

Адреса электронной почты

Уже более десяти лет формы содержат всего несколько видов полей. Наиболее распространённые следующие.

Тип поля Код HTML Замечание
Флажок Может быть отмечено или нет
Переключатель Группируется с другими полями
Пароль Выводит точки независимо от введённого текста
Ниспадающий список
Выбор файла Выводит диалоговое окно «Открыть файл»
Отправка формы
Текстовое поле Атрибут type может быть опущен

Все эти типы полей по-прежнему работают в HTML5. Если вы «обновитесь до HTML5» (возможно сменой !DOCTYPE ), вам не придётся делать ни единого изменения в ваших формах. Ура обратной совместимости!

Однако HTML5 определяет 13 новых типов полей и нет никаких причин не начать их использовать.

Первый из этих новых типов адрес электронной почты. Выглядит примерно так.

Я собирался написать предложение, которое началось «в браузерах, которые не поддерживают type=»email» . », но остановился. Почему? Потому что не уверен, что браузеры не поддерживают type=»email» . Все браузеры «поддерживают» type=»email» . Они могут не делать нечто специальное, но браузеры, которые не распознают type=»email» будут относиться к нему как type=»text» и отобразят как обычное текстовое поле.

Я подчеркну насколько это важно. В Интернете миллионы форм, которые просят ввести адрес электронной почты и все из них используют . Вы видите текстовое поле, вводите в него свой адрес электронной почты и на этом всё. И вот появляется HTML5, который определяет type=»email» . Браузеры сходят с ума? Нет. Каждый браузер на Земле воспринимает неизвестный атрибут type как type=»text» — даже IE6. Так что вы можете «обновить» ваши формы используя type=»email» прямо сейчас.

Что случится, если скажем, браузер поддерживает type=»email» ? Ну, это может означать что угодно. Спецификация HTML5 не требует какого-либо конкретного пользовательского интерфейса для новых типов полей. Опера дополняет поле формы небольшой иконкой. Другие HTML5-браузеры как Safari и Chrome отображают как текстовое поле — такое же, как type=»text» — так что ваши пользователи не заметят разницу (пока не посмотрят исходный код).

И ещё есть iPhone.

У iPhone нет физической клавиатуры. Весь «набор» осуществляется нажатием по экранной клавиатуре, всплывающей в соответствующее время, например, когда вы перешли в поле формы на веб-странице. Apple сделал нечто хитрое в браузере iPhone-а. Он распознает некоторые новые поля HTML5 и динамически меняет экранную клавиатуру для оптимизации ввода.

К примеру, адрес электронной почты это текст, правильно? Конечно, но это особый вид текста. Так, практически все адреса электронной почты содержат символ @ и, по крайней мере, одну точку (.), но они вряд ли содержат пробел. Поэтому, когда вы используете iPhone и переходите к элементу , вы получите экранную клавиатуру, которая содержит пробел меньше обычного, а также выделенные клавиши для символов . и @.

Подведу итог. Нет никаких недостатков для немедленного перевода всех ваших полей с электронными адресами в type=»email» . Практически никто этого не заметит, кроме пользователей iPhone, которые, вероятно, тоже этого не заметят. Но те, кто заметят, тихо улыбнутся и поблагодарят вас за то, что их работа стала немного проще.

Веб-адреса

Веб-адрес — которые зубрилы стандартов называют URL, за исключением нескольких педантов, которые называют их URI — это ещё один тип специализированного текста. Синтаксис веб-адреса ограничивается соответствующим стандартом Интернет. Если кто-то просит вас ввести веб-адрес в форму, он ожидает что-то вроде «http://www.google.com/», а не «125 Фарвуд Роуд». Косые линии являются общими — даже у главной страницы Google их три. Точки также распространены, но пробелы запрещены. И каждый веб-адрес имеет суффикс домена вроде «.com» или «.org».

И вот. (барабанная дробь, пожалуйста). . На iPhone это выглядит следующим образом.

iPhone изменил свою виртуальную клавиатуру, как это сделал для адреса электронной почты, но теперь оптимизировал её для набора веб-адреса. Пробел полностью заменён тремя виртуальными клавишами: косая линия, точка и «.com» (вы можете удерживать нажатой клавишу «.com», чтобы выбрать другой суффикс вроде «.org» или «.net»).

Илон Маск рекомендует:  Что такое код pg_lo_import

Браузеры, которые не поддерживают HTML5, будут относиться к type=»url» как к type=»text» , так что нет недочётов по использованию этого типа для всех полей, где нужно вводить веб-адрес.

Числа как счётчики

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10. 7½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.

Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определённом диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были некоторые типы чисел — может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 всё это охватывает.

Выбрать число, почти любое

Рассмотрим по одному атрибуту.


  • type=»number» означает, что это числовое поле.
  • min=»0″ указывает минимально допустимое значение для этого поля.
  • max=»10″ является максимально допустимым значением.
  • step=»2″ в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
  • value=»6″ значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.

Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min , но не max . По умолчанию значение шага равно 1 и вы можете опустить атрибут step , пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.

Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.

  • input.stepUp(n) повышает значение поля на n.
  • input.stepDown(n) понижает значение поля на n.
  • input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).

Проблемы с отображением? Ну, правильный интерфейс по управлению числами в браузерах реализован по-разному. На iPhone, где набор имеет сложности, браузер опять оптимизирует виртуальную клавиатуру для ввода чисел.

В десктопной версии Оперы поле type=»number» отображается как счётчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.

Опера уважает атрибуты min , max и step , поэтому вы всегда добьётесь приемлемого числового значения. Если вы увеличите значение до максимума, стрелка вверх в счётчике становится серой.

Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type=»number» , будут относиться к нему как к type=»text» . Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value ), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте встроенную поддержку HTML5, как здесь.

Числа в виде ползунка

Счётчик не единственный способ представления ввода чисел. Вы, наверное, также видели ползунок, который выглядит так.

Теперь вы также можете получить ползунок в форме. Код выглядит странно похожим на поле счётчика.

Все доступные атрибуты такие же, как и у type=»number» — min , max , step , value — и означают то же самое. Единственное отличие состоит в пользовательском интерфейсе. Вместо поля для ввода, браузеры, как ожидается, отображают type=»range» в виде ползунка. Safari, Chrome, Opera, Internet Explorer 10 и iPhone на iOS 5 работают с этим. Все остальные браузеры просто интерпретируют поле как type=»text» , поэтому нет никаких причин немедленно начать использовать этот тип.

Выбор даты

HTML 4 не включает выбор даты через календарь. JavaScript-фреймворки позволяют это обойти (Dojo, jQuery UI, YUI, Closure Library), но, конечно, каждое из этих решений требует «внедрения» фреймворка для любого встроенного календаря.

HTML5, наконец, определяет способ включить встроенный выбор даты без всяких скриптов. В действительности, их шесть: дата, месяц, неделя, время, дата + время и дата + время с часовым поясом.

Пока поддержка. скудна.

Поддержка выбора даты

Тип iPhone
type=»date» 5.0+ 20.0+ 9.0+ 5.0+
type=»datetime» 5.0+ 9.0+ 5.0+
type=»datetime-local» 5.0+ 9.0+ 5.0+
type=»month» 5.0+ 9.0+ 5.0+
type=»week» 5.0+ 9.0+ 5.0+
type=»time» 5.0+ 20.0+ 9.0+ 5.0+

Вот как Opera отображает :

Если вам нужно время вместе с датой, Opera также поддерживает :

Если вам нужен месяц плюс год (например, срок действия кредитной карты), Opera может отобразить :

Менее распространённым, но доступным является выбор недели в году через :

Последнее, но не менее важное, это выбор времени с :

Выбор даты с альтернативой

Вероятно, другие браузеры в конечном итоге будут поддерживать эти типы. Подобно type=»email» и другим типам, эти поля формы будут отображаться в виде обычного текста в тех браузерах, которые не распознают type=»date» и его варианты. Если вы хотите, то можете просто использовать , чем сделаете пользователей Opera счастливыми и подождите, пока другие браузеры наверстают упущенное. Более реально использовать , но проверить, имеет ли браузер встроенную поддержку выбора даты и включить альтернативное решение в виде скрипта по вашему выбору (Dojo, jQuery UI, YUI, Closure Library или другие варианты).

Окно поиска

Итак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? , как и любое другое текстовое поле в сети. Давайте это исправим.

Поиск нового поколения

В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.

Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это ещё не всё! Когда вы начнёте вводить в поле type=»search» Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведёт себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.

Apple.com использует для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type=»search» будут относиться к нему как type=»text» , так что нет абсолютно никаких причин не начать использовать type=»search» для всех ваших окон поиска прямо сегодня.

Профессор Разметкин говорит

По умолчанию Safari не применяет к большинство стилей. Если вы хотите заставить Safari понимать поле для поиска как обычное текстовое поле (чтобы применить собственные стили), добавьте это правило к вашей таблице стилей.

Спасибо Джону Лейну за обучение меня этому трюку.

Выбор цвета

HTML5 также определяет поле , которое позволяет выбрать цвет и возвращает его в шестнадцатеричном представлении. Хорошие новости для всех! Opera 11 теперь поддерживает type=color . На Mac и Windows поле интегрируется с родным выбором цвета платформы. В Linux раскрывается базовый выбор цвета Для всех платформ возвращается шестизначное шестнадцатеричное значение цвета RGB и оно подходит везде, где допустим цвет CSS.

Благодарю Патрика Люка и Криса Миллса за разрешение использовать это изображение для включения в книгу. Вы должны прочитать их статью о новых возможностях форм в Opera 11.

Валидация форм

Поддержка валидации форм
iPhone
10.0+ 4.0+ 5.0+ 10.0+ 9.0+

В этой главе я говорил о новых элементах форм и новых возможностях, таких как автофокус, но я не упомянул, пожалуй, самую захватывающую часть форм HTML5: автоматическую проверку входных данных. Рассмотрим общие проблемы ввода адреса электронной почты в форме. Вероятно, у вас есть проверка на стороне клиента через JavaScript, после чего идёт проверка на стороне сервера через PHP, Python или другой серверный язык. HTML5 никогда не сможет заменить проверку на стороне сервера, но он может когда-нибудь заменить проверку на стороне клиента.

Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:

  1. Некоторое количество ваших посетителей (вероятно, около 10%) не включают JavaScript.
  2. Вы получите адрес неправильно.

Серьёзно, вы получите адрес неправильно. Определение того, что набор случайных символов является корректным адресом электронной почты невероятно сложно. Чем сильнее вы смотрите, тем сложнее становится. Я уже говорил, что это очень, очень сложно? Не проще ли повесить эту головную боль на ваш браузер?

Вот скриншот из Opera 11, хотя функциональность присутствует с Opera 9. Firefox 4 и Chrome 10 содержат похожую функциональность. Код включает в себя установку значения email для атрибута type . Когда пользователь Оперы пытается отправить форму с , браузер автоматически проверяет адрес почты, даже если скрипты отключены.

HTML5 также предлагает проверку веб-адресов с полем и чисел с . Проверка чисел принимает во внимание значения атрибутов min и max , поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число.

Не существует кода, включающего проверку форм в HTML5, это делается по умолчанию. Чтобы отключить проверку, используйте атрибут novalidate .

Не проверяй меня

Обязательные поля

Поддержка
iPhone
10.0+ 4.0+ 10.0+ 9.0+

Валидация форм в HTML5 не ограничивается типом каждого поля. Вы также можете указать, что некоторые поля обязательны для заполнения, такие поля должны иметь значение, прежде чем вы сможете отправить форму.

Код для обязательных полей прост, насколько это возможно.


Браузеры могут изменить внешний исходный вид обязательного поля. Вот к примеру, как это выглядит в Mozilla Firefox.

Кроме того, если вы пытаетесь отправить форму без заполнения обязательного значения, Firefox выведет информационную панель, говорящую, что поле является обязательным и не может быть пустым.

HTML Типы ввода. Input type

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML Типы ввода

Этот раздел описывает разные типы ввода для элемента .

HTML Input Type

Это разные типы ввода, которые можно использовать в HTML:

Тип ввода Text (текст)

определяет однострочное поле ввода текста:

Так HTML-код будет отображаться в браузере:

First name:

Last name:

Тип ввода Password (пароль)

определяет поле ввода пароля:

Так HTML-код будет отображаться в браузере:

User name:

User password:

Символы в поле пароля маскируются (показано как звёздочки или черные кружочки).

Тип ввода Submit (Отправить)

определяет кнопку для отправки данных формы к обработчику форм.

Обработчик форм обычно является страницей сервера из сценарием (скриптом) для обработки входных данных. Обработчик форм указан в атрибуте action формы:

Так HTML-код будет отображаться в браузере:

Если вы не укажете атрибут значения кнопки «Отправить», кнопка получит текст по умолчанию:

Тип ввода Reset (Сброс)

определяет кнопку сброса, которая сбрасывает все значения формы к значениям по умолчанию.

Так HTML-код будет отображаться в браузере:

Если изменить входные значения, а потом нажать кнопку «Submit» («Отправить»), данные формы будут сброшены до значений по умолчанию.

Тип ввода Radio

определяет переключатель (кнопку radio).

Кнопки radio позволяют пользователю выбрать ТОЛЬКО ОДИН с ограниченного числа вариантов:

Так HTML-код будет отображаться в браузере:

Male
Female
Other

Тип ввода Checkbox (флажок)

Флажки позволяют пользователю выбрать опции ZERO или MORE для ограниченного выбора.

Так HTML-код будет отображаться в браузере:

I have a bike
I have a car

Тип ввода Button (кнопка)

определяет кнопку:

Так HTML-код будет отображаться в браузере:

HTML5 Input Types (типы ввода)

HTML5 добавил несколько новых типов ввода:

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

Тип ввода Color (цвет)

используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор цветов.

Тип ввода Date (дата)

используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Можно также использовать атрибуты min и max для добавления ограничений для дат:

Тип ввода Datetime-local

указывает поле ввода даты и времени, в котором нет временного пояса.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Тип ввода email (электронная почта)


используется для полей ввода, которые должны содержать адрес электронной почты.

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» на клавиатуру, чтобы отвечать вводу электронной почты.

Тип ввода File (файл)

определяет поле выбора файла и кнопку «Просмотр» для загрузки файлов.

Тип ввода Month (месяц)

позволяет пользователю выбрать месяц и год.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Тип ввода Number (номер)

определяет числовое поле ввода.

Вы также можете установить ограничение того, какие числа принимаются.

В следующем примере отображается числовое поле ввода, в котором можно ввести значения от 1 до 5:

Ограничения ввода

Это список некоторых общих ограничений ввода (некоторые из них новые в HTML5):

Атрибут Описание
checked Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled Определяет, что поле ввода должно быть выключено (запрещено)
max Определяет максимальное значение для поля ввода
maxlength Определяет максимальное количество символов для поля ввода
min Определяет минимальное значение для поля ввода
pattern Определяет регулярное выражение для проверки входящего значения
readonly Определяет, что поле ввода лишь для чтения (не может быть изменено)
required Определяет, что поле ввода обязательно (должно быть заполнено)
size Указывает ширину (в символах) поля ввода
step Определяет допустимые интервалы номеров для поля ввода
value Определяет значения по умолчанию для поля ввода

Вы узнаете больше про ограничения ввода в следующем разделе.

В следующем примере отображается числовое поле ввода, в котором можно ввести значения от 0 до 100, шагами 10. Значение по умолчанию — 30:

Тип ввода Range (диапазон)

определяет элемент управления для ввода числа, точное значение которого не является важным (например, ползунок). Стандартный диапазон от 0 до 100. Но вы можете установить ограничение того, какие числа принимаются с атрибутами min , max и step :

Тип ввода Search (поиск)

используется для поисковых полей (поле поиска ведёт себя как обычное текстовое поле).

Тип ввода Tel (телефон)

используется для полей ввода, которые должны содержать номер телефона.

Пример

Тип ввода Time (время)

позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор времени.

Тип ввода Url (веб-адрес)

используется для полей ввода, которые должны содержать URL-адрес.

В зависимости от поддержки веб-браузера, поле URL может быть автоматически проверено во время отправки. Некоторые смартфоны распознают тип URL-адреса и добавляют «.com» к набору с клавиатуры, чтобы соответствовать вводу URL.

Тип ввода Week (неделя)

позволяет пользователю выбрать неделю и год.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Проверьте себя с помощью упражнений

HTML Атрибут Input Type

Тег Описание
Определяет тип ввода для отображения

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.

Улучшение Web Forms с помощью HTML5 Forms

Брэндон Сэтром

В этой статье рассматривается предварительная версия Internet Explorer 10 Platform Preview 2. Любая изложенная здесь информация может быть изменена.

Продукты и технологии: HTML5, Visual Studio 2010, Internet Explorer, ASP.NET MVC, WebMatrix, Modernizr, jQuery UI

В статье рассматриваются:

  • новые типы элемента input в HTML5;
  • новые атрибуты контента для типов элемента input в HTML5;
  • проверка форм в HTML5;
  • работа с HTML5 Forms и ASP.NET Web Forms.

Исходный код можно скачать по ссылке

Если вы являетесь веб-разработчиком, то, вероятно, уже создавали HTML-форму. По сути, вы могли создавать их куда чаще, чтобы помнить, сколько раз это было. Наверняка вы знакомы с классическими типами элемента input вроде text, password, file, hidden, checkbox, radio, submit и button и, наверное, использовали их все или большую часть.

Если бы я спросил вас, какой тип элемента input (далее input-тип для краткости) из предыдущего списка вы использовали чаще, чем остальные, то, по-видимому, вы сказали бы «text», как и большинство из нас. Input-тип text — многофункциональный инструмент в классической разработке с применением HTML Forms. С одной стороны, его можно адаптировать почти под любую задачу, но с другой, он семантически нейтрален, поэтому браузер не предлагает никакой помощи в превращении этого элемента в нечто практичное. Для компенсации этого недостатка разработчики и дизайнеры добавляли свою семантику к этим элементам (через идентификаторы и имена классов) и полагались на серверные инфраструктуры и JavaScript в обработке проверок и поддержке различных взаимодействий.

Яркий пример — получение дат в текстовых полях. Обычно вы хотите расширить поле даты каким-либо элементом управления для выбора дат. Это часто делается с помощью JavaScript или инфраструктуры наподобие jQuery UI, которая добавляет поведение взаимодействия, позволяющую пользователю выбирать дату из виджета и вставлять ее в исходное поле.

Как бы ни был полезен этот шаблон (а мы весьма привыкли к шаблонам такого рода), он повторяется столь часто, что трудно удержаться от вопроса: «Ну почему сам браузер не может этого делать?».

Хорошая новость в том, что с помощью HTML5 Forms браузер сможет и будет делать это. В дополнение к text и набору существующих типов, с которыми мы имели дело годами, в HTML5 введено 13 новых значений для атрибута входного типа и ряд других атрибутов, ускоряющих разработку ваших форм. В этой статье я поделюсь информацией о некоторых новых input-типах и атрибутах в HTML5 Forms, а также о состоянии их реализации в различных браузерах. Затем я дам краткий обзор новых клиентских средств проверки для HTML5 Forms. В заключение мы рассмотрим, как недавние обновления в Visual Studio 2010 и Microsoft .NET Framework 4 поддерживают корректное взаимодействие HTML5 Forms и ASP.NET Web Forms. Попутно мы обсудим, как можно уже сейчас использовать HTML5 Forms в ваших приложениях, в то же время предусматривая возможности переключения на другую функциональность для более старых браузеров. Все примеры в этой статье (они доступны в онлайновой форме) были созданы с применением WebMatrix — бесплатного, облегченного инструмента веб-разработки от Microsoft. Вы можете сами опробовать WebMatrix на сайте aka.ms/webm.

Новые input-типы в HTML5

То, что сегодня известно под названием HTML5 Forms или HTML5 Web Forms, начиналось как Web Forms 2.0 — спецификация до определения HTML5, созданная группой Web Hypertext Applications Technology Working Group, или WHATWG. Многое из начальной работы WHATWG послужило отправной точкой для HTML5, и определение Web Forms 2.0 теперь является частью официальной спецификации HTML5, которую можно прочитать по ссылке bit.ly/njrWvZ. Значительная часть спецификации отведена новым типам и атрибутам контента для элемента input (bit.ly/pEdWFs).

Как я упоминал, спецификация вводит 13 новых input-типов для использования в формах: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color.


Использовать эти новые типы легко. Скажем, мне нужно разместить новое поле e-mail на форме заказов. Как видно на рис. 1, я модифицировал страницу Order веб-сайта WebMatrix Bakery Template, введя в нее несколько дополнительных полей, в том числе e-mail.

Рис. 1. Пример формы заказа

Для этой формы поле e-mail размечается так:

Заметьте, что атрибут типа равен «email», а не «text». Самое ценное в новых HTML-типах input в том, что вы можете использовать их сейчас и они будут работать на том или ином уровне в любом браузере. Когда браузер встречает один из этих типов, происходит одно из двух.

Если браузер не поддерживает новые input-типы, объявление типа не распознается. В таком случае браузер корректно сокращает функциональность и интерпретирует элемент как type=»text». Вы можете проверить это, поместив данный элемент на форму и введя «document.getElementById(‘orderEmail’).type» в Internet Explorer 9 F12 Tools Console. Таким образом, вы можете применять эти новые типы уже сегодня, а если браузер не поддерживает данное поле, он будет работать так, будто это обычное текстовое поле.

Илон Маск рекомендует:  Как сделать горизонтальную линию

Однако, если браузер распознает тип, вы немедленно получите выигрыш. Для распознаваемых типов браузер добавляет встроенное поведение, специфичное для конкретных типов. В примере с типом email браузер Internet Explorer 10 Platform Preview 2 (PP2) и более поздние версии автоматически проверяет любой ввод и выводит пользователю сообщение об ошибке, если набранное им значение не соответствует формату адреса электронной почты, как показано на рис. 2.

Рис. 2. Автоматическая проверка браузером input-типа email

О смысле и поведении каждого элемента легко догадаться по его типу, поэтому мы без труда выходим на другой уровень семантического богатства в наших формах. Более того, некоторые из новых input-типов позволяют браузеру изначально обеспечивать более широкое взаимодействие с пользователями. Например, если я размещу на форме следующий элемент, а затем открою эту форму в браузере, который полностью поддерживает input-тип date, то по умолчанию получу гораздо большую функциональность, чем при использовании старого чисто текстового поля:

На рис. 3 показано, что может дать тип date в Opera 11.5. Самое главное, что для обеспечения функциональности такого уровня мне достаточно было указать type=»date» и браузер автоматически взял на себя все, что раньше приходилось делать самостоятельно на JavaScript.

Рис. 3. Input-тип date в Opera 11.5

Спецификация HTML5 не диктует браузерам, как они должны представлять эти новые input-типы.

Важно отметить, что спецификация HTML5 не диктует браузерам, как они должны представлять эти новые input-типы или ошибки проверки, поэтому следует ожидать различий в поведении между браузерами. Например, Chrome 13 предоставляет для ввода дат элемент управления «наборный счетчик» (spinner control) вместо элемента управления выбора даты, как показано на рис. 4 (что, конечно, могло измениться к тому моменту, когда вы читаете эту статью). Вы также должны знать о продолжающейся дискуссии в W3C по поводу стилизации и локализации в браузерах элементов вроде datetime, date и color. В настоящее время не все поставщики браузеров согласны на предмет того, как реализовать эти типы, и в существующих реализациях сейчас нет механизма адаптации, аналогичного тому, что есть в jQuery UI. Что бы вы ни выбрали — реализацию или экспериментирование с этими новыми типами, всегда помните о необходимости предоставлять полноценное решение для переключения функциональности. Кроме того, если для ваших пользователей важна согласованность презентационного уровня и поведения, вам, возможно, понадобится применять собственные стили, переопределять поведение по умолчанию этих элементов управления или использовать решение на основе скриптов.

Рис. 4. Input-тип date в Chrome 13

Ранее я говорил: эти поля по-прежнему умеют вести себя как обычные текстовые благодаря тому, что браузеры обеспечивают за нас корректное сокращение функциональности (graceful degradation). Но поле даты, реализованное как простое текстовое поле, — решение корявое, и многими считается неудачным UI-элементом. Однако с помощью Modernizr и jQuery UI можно предоставить решение, совмещающее в себе лучшие качества HTML5 Forms с поддержкой корректного переключения на другую функциональность.

Вспомните из моей прошлой статьи (msdn.microsoft.com/magazine/hh394148), что Modernizr (modernizr.com) — это библиотека JavaScript, которая помогает распознавать поддержку HTML5-средств в браузере. В этом примере я хочу задействовать Modernizr для распознавания поддержки input-типа date HTML5 и, если он не поддерживается, использовать виджет datepicker из jQuery UI (jqueryui.com) для создания UI-элемента с той же функциональностью. Скачав Modernizr, jQuery и jQuery UI и установив на них ссылки, я могу добавить поддержку переключения функциональности для своих элементов date всего несколькими строками кода:

Результат в Internet Explorer 10 PP2 показан на рис. 5.

Рис. 5. Поддержка поля даты с помощью jQuery UI

Новые атрибуты контента input в HTML5

В дополнение к новым input-типам HTML5 предоставляет новые удобные атрибуты контента, которые можно использовать в полях ввода для поддержки проверки и для расширения их функциональности. Один из этих атрибутов — placeholder, который, согласно спецификации, «…предоставляет краткую подсказку (слово или короткую фразу), помогающую пользователю при вводе данных». Например, можно взять пару полей из нашей формы заказа и добавить в каждое поле placeholder=»some text» (результат см. на рис. 6):

Рис. 6. Применение атрибута placeholder с полями ввода

Текст в placeholder по цвету немного светлее, чем обычный текст, и, если фокус ввода устанавливается на поле, он исчезает, позволяя ввести собственное значение.

Как и новые input-типы, атрибут placeholder не поддерживается в более старых браузерах. Однако ничего страшного не случится, когда пользователь такого браузера зайдет на страницу с новыми атрибутами, поэтому подумайте насчет их использования уже сегодня, даже если вы не планируете добавлять поддержку для старых браузеров. Если же вы хотите обеспечить поддержку placeholder через «поли-заполнение» (polyfill), вам поможет Modernizr. Как я упоминал в прошлой статье, добрые дяди в Modernizr пытаются поддерживать рабочий список всех поли-заполнений и переключений функциональности, которые могут понадобиться вам для данной функции HTML5. Этот список можно проверить по ссылке bit.ly/nZW85d.

В нашем примере воспользуемся jQuery HTML5 Placeholder, созданным Майком Тейлором (Mike Taylor); его можно скачать по ссылке bit.ly/pp9V4s. После этого добавьте в скриптовый блок, на который ссылается ваша страница, следующее:

Здесь Modernizr проверяет, поддерживается ли атрибут placeholder, и, если нет, загружает html5placeholder.jquery.min.js. Затем jQuery выбирает каждый элемент с атрибутом placeholder и добавляет для каждого поддержку плагинов. Если вы опробуете это в Internet Explorer 9, то заметите, что итоговый результат выглядит очень похоже на таковой при встроенной поддержке браузером (Internet Explorer 10 PP2).

Еще один интересный новый атрибут — autofocus, который позволяет указывать одно поле на форме, автоматически получающее фокус ввода при загрузке страницы. Этот атрибут должен быть только у одного поля на каждую страницу; если этим атрибутом помечено несколько элементов, то при загрузке страницы фокус ввода получит первый из них. В своей форме заказа я хочу, чтобы фокус автоматически получало поле Name, поэтому добавляю к нему этот атрибут:

Атрибут autofocus можно использовать применительно к любому элементу управления на форме и это превосходная альтернатива скриптовому варианту, с которым мучились многие веб-разработчики в прошлом.

Проверка HTML5-формы

В статье мало места, чтобы охватить все интересные новые атрибуты, относящиеся к формам, но я все же коротко расскажу об атрибутах required, pattern, novalidate и formnovalidate, каждый из которых предельно упрощает проверку формы на клиентской стороне.

Атрибут required сообщает браузеру, который его поддерживает, о том, что данную форму нельзя передавать на сервер, пока в ней отсутствует определенное значение. Например, я добавляю required к полю Name на форме заказа:

Когда я открою эту страницу в Internet Explorer 10 PP2 и попытаюсь передать форму на сервер, я увижу нечто вроде того, что показано на рис. 7. Благодаря единственному атрибуту браузер знает достаточно, чтобы применить к этому элементу стиль с красной рамкой и вывести сообщение о том, что это поле является обязательным для заполнения.

Рис. 7. Применение атрибута required к полю на форме

Ранее на рис. 2 было показано, как браузер может автоматически проверять определенные типы, такие как email и url, без дополнительного ввода от пользователя. С помощью атрибута pattern вы можете предоставить свою проверку input-типов. Согласно спецификации HTML5, pattern ожидает наличия регулярного выражения, которое браузер использует для проверки.

Моя форма заказа содержит поле ввода телефона (type=»tel»), и я могу указать такой шаблон проверки:

Это (не особо сложное) регулярное выражение сообщает браузеру, что в поле должно быть семизначное число с круглыми скобками вокруг кода региона и дефисом в местном номере. Ввод любых других данных в другом формате приведет к появлению сообщения, как показано на рис. 8. Заметьте, что это сообщение подсказывает пользователю правильный формат ввода: «(xxx) xxx-xxxx». Эта часть сообщения берется из атрибута title того же элемента, поэтому можно управлять, по крайней мере, частью сообщения проверки через разметку. Однако при использовании title стоит обратить внимание на один момент. Согласно спецификации, браузер может выводить содержимое title в других ситуациях, не связанных с ошибками, поэтому не полагайтесь на этот атрибут как на место хранения текста, используемого в сообщении об ошибке.

Рис. 8. Использование атрибута pattern для определения выражения проверки

Автоматизация проверки браузером — это прекрасно, но здесь сразу же возникает два вопроса. Во-первых, что будет со скриптами проверки на серверной или клиентской стороне, генерируемыми моей серверной инфраструктурой (например, ASP.NET MVC)? А во-вторых, как быть в тех ситуациях, где я хочу, чтобы пользователь мог сохранять не до конца заполненную форму без проверки? Ответ на первый вопрос, увы, выходит далеко за рамки моей статьи, но на эту тему (применительно к ASP.NET MVC) я написал статью в блоге, которую вы найдете по ссылке bit.ly/HTML5FormsAndMVC.

Добавление поддержки Web Forms к браузерам с HTML5 — хорошая новость для всех веб-разработчиков.

С другой стороны, ответить на второй вопрос легко. Допустим, у вас есть форма, на заполнение которой пользователи тратят приличное время, возможно, даже не раз сохраняя ее перед окончательной отправкой на сервер. На такой случай, когда нужно разрешить пользователю передачу формы без проверки, существуют два атрибута: formnovalidate (помещается в поля ввода типа submit) и novalidate (помещается в открывающий тег формы). Здесь я разместил на форме два поля submit:

Атрибут formnovalidate во второй кнопке отключит проверку и отправит ее на сервер, что обеспечивает промежуточное сохранение незаконченной работы пользователя в моей базе данных или даже на клиентской стороне, если задействовать новую технологию хранения HTML5 вроде localStorage или IndexedDB.

HTML5 Forms и ASP.NET Web Forms

Прежде чем закончить эту статью, я хочу поделиться еще несколькими битами информации, относящейся к HTML5 Forms, которая будет интересна разработчикам, использующим ASP.NET Web Forms. Если вы планируете вести разработку HTML5 Forms с применением ASP.NET Web Forms, у меня есть хорошие новости: для .NET и Visual Studio внепланово выпускается много обновлений, связанных с HTML5, поэтому вам не придется ждать следующей версии инфраструктуры, чтобы использовать эти средства уже сейчас.

Чтобы приступить к работе с HTML5 Forms и ASP.NET Web Forms, вам нужно получить пару обновлений. Прежде всего убедитесь, что у вас имеется Visual Studio 2010 SP1 (bit.ly/nQzsld). Помимо добавления поддержки новых input-типов и атрибутов HTML5, этот пакет также включает обновления, позволяющие использовать новые input-типы HTML5 в серверном элементе управления TextBox. Без этого обновления использование новых типов приведет к ошибкам при компиляции.

Вам также понадобится Microsoft .NET Framework 4 Reliability Update 1 (bit.ly/qOG7Ni). Это обновление устраняет целый ряд проблем, относящихся к использованию новых input-типов HTML5 с ASP.NET Web Forms. Скотт Хантер (Scott Hunter) рассмотрел некоторые из них — UpdatePanel, Validation Controls и Callbacks — в статье по ссылке bit.ly/qE7jLz.

Добавление поддержки Web Forms к браузерам с HTML5 — хорошая новость для всех веб-разработчиков. Мы не только получаем набор семантических input-типов для применения в наших приложениях (в новых браузерах это обеспечивает расширенную функциональность, включая автоматическую проверку на клиентской стороне), но и можем использовать их сегодня безо всякого ущерба для старых браузеров. Использование новых полей прямо сейчас дает выигрыш и в пространстве мобильных приложений, где такие типы, как url и email, будут заставлять мобильные устройства будут предлагать пользователю различные варианты, запрограммированные для конкретного input-типа. Объединяя новые средства с Modernizr и одним из средств поли-заполнений, вы получаете все инструменты, необходимые для внедрения HTML5 Forms в ваших приложения в настоящее время.

Подробнее о поддержке HTML5 Forms в Internet Explorer 10 PP2 см. по ссылке ietestdrive.com, а также изучите руководство разработчика в Internet Explorer Developer Center (bit.ly/r5xKhN). Более глубокое описание HTML5 Forms в целом советую почитать «A Form of Madness» из книги Марка Пилгрима (Mark Pilgrim) «HTML5: Up and Running» (O’Reilly Media, 2010), а также раздел Forms в W3C-спецификации HTML5 (bit.ly/nIKxfE).

Брэндон Сэтром (Brandon Satrom) — разработчик-идеолог в Microsoft. Ведет блог UserInexperience.com и пишет заметки в Twitter.com/BrandonSatrom.

Выражаю благодарность за рецензирование статьи экспертам Джону Боксу (Jon Box), Джону Хрватину (John Hrvatin), Скотту Хантеру (Scott Hunter) и Кларку Селлу (Clark Sell).

Полезные сниппеты на HTML5

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

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

Поля ввода email, url и tel


В HTML5 появилось множество новых типов для полей ввода, и среди них email , url и tel . Они позволяют писать более красивый код, делают за вас всю работу по валидации контента, а так же заставляют мобильные браузеры отображать сенсорную клавиатуру со специальными кнопками (вроде @ и .com) при заполнении этих полей.

Шаблоны на соответствие полей формы регулярному выражению

Раньше вам приходилось использовать JavaScript для валидации контента на фронтэнде. Теперь, с HTML5-атрибутом pattern , вы можете просто указать регулярное выражение, которому должны соответствовать вводимые данные!

Кастомное контекстное меню

HTML5 позволяет добавлять элементы в контекстное меню (это то самое меню, которое появляется, если кликнуть правой кнопкой мыши где-нибудь на вашей странице).
На момент написания статьи, элемент ContextMenu совместим только с Firefox, но можно надеяться, что другие браузеры добавят его поддержку в самое ближайшее время.

Видео на HTML5, с резервным Flash-проигрывателем.

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

Скрытые элементы в HTML5

В HTML5 появился атрибут hidden , который можно применить к любому элементу. Его действие аналогично CSS-свойству display:none .

Автофокус для текстовых полей

Аттрибут autofocus позволяет вам установить фокус на определенный элемент при загрузке страницы. Полезно, например, для страниц поиска, авторизации или регистрации.

Предварительная загрузка в HTML5

Jean-Baptiste Jung написал подробную статью о предварительной загрузке в HTML5. Если в кратце — то это простой способ уведомить браузер о том, какие ресурсы скоро могут понадобиться, чтобы он загрузил их заранее (например картинки, подгружаемые аяксом). В приведенном ниже коде реализуется предварительная загрузка изображения.

HTML Типы ввода. Input type

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML Типы ввода

Этот раздел описывает разные типы ввода для элемента .

HTML Input Type

Это разные типы ввода, которые можно использовать в HTML:

Тип ввода Text (текст)

определяет однострочное поле ввода текста:

Так HTML-код будет отображаться в браузере:

First name:

Last name:

Тип ввода Password (пароль)

определяет поле ввода пароля:

Так HTML-код будет отображаться в браузере:

User name:

User password:

Символы в поле пароля маскируются (показано как звёздочки или черные кружочки).

Тип ввода Submit (Отправить)

определяет кнопку для отправки данных формы к обработчику форм.

Обработчик форм обычно является страницей сервера из сценарием (скриптом) для обработки входных данных. Обработчик форм указан в атрибуте action формы:

Так HTML-код будет отображаться в браузере:

Если вы не укажете атрибут значения кнопки «Отправить», кнопка получит текст по умолчанию:

Тип ввода Reset (Сброс)

определяет кнопку сброса, которая сбрасывает все значения формы к значениям по умолчанию.

Так HTML-код будет отображаться в браузере:

Если изменить входные значения, а потом нажать кнопку «Submit» («Отправить»), данные формы будут сброшены до значений по умолчанию.

Тип ввода Radio

определяет переключатель (кнопку radio).

Кнопки radio позволяют пользователю выбрать ТОЛЬКО ОДИН с ограниченного числа вариантов:

Так HTML-код будет отображаться в браузере:

Male
Female
Other

Тип ввода Checkbox (флажок)

Флажки позволяют пользователю выбрать опции ZERO или MORE для ограниченного выбора.

Так HTML-код будет отображаться в браузере:

I have a bike
I have a car

Тип ввода Button (кнопка)

определяет кнопку:

Так HTML-код будет отображаться в браузере:

HTML5 Input Types (типы ввода)

HTML5 добавил несколько новых типов ввода:

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

Тип ввода Color (цвет)


используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор цветов.

Тип ввода Date (дата)

используется для полей ввода, которые должны содержать дату.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Можно также использовать атрибуты min и max для добавления ограничений для дат:

Тип ввода Datetime-local

указывает поле ввода даты и времени, в котором нет временного пояса.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Тип ввода email (электронная почта)

используется для полей ввода, которые должны содержать адрес электронной почты.

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» на клавиатуру, чтобы отвечать вводу электронной почты.

Тип ввода File (файл)

определяет поле выбора файла и кнопку «Просмотр» для загрузки файлов.

Тип ввода Month (месяц)

позволяет пользователю выбрать месяц и год.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Тип ввода Number (номер)

определяет числовое поле ввода.

Вы также можете установить ограничение того, какие числа принимаются.

В следующем примере отображается числовое поле ввода, в котором можно ввести значения от 1 до 5:

Ограничения ввода

Это список некоторых общих ограничений ввода (некоторые из них новые в HTML5):

Атрибут Описание
checked Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled Определяет, что поле ввода должно быть выключено (запрещено)
max Определяет максимальное значение для поля ввода
maxlength Определяет максимальное количество символов для поля ввода
min Определяет минимальное значение для поля ввода
pattern Определяет регулярное выражение для проверки входящего значения
readonly Определяет, что поле ввода лишь для чтения (не может быть изменено)
required Определяет, что поле ввода обязательно (должно быть заполнено)
size Указывает ширину (в символах) поля ввода
step Определяет допустимые интервалы номеров для поля ввода
value Определяет значения по умолчанию для поля ввода

Вы узнаете больше про ограничения ввода в следующем разделе.

В следующем примере отображается числовое поле ввода, в котором можно ввести значения от 0 до 100, шагами 10. Значение по умолчанию — 30:

Тип ввода Range (диапазон)

определяет элемент управления для ввода числа, точное значение которого не является важным (например, ползунок). Стандартный диапазон от 0 до 100. Но вы можете установить ограничение того, какие числа принимаются с атрибутами min , max и step :

Тип ввода Search (поиск)

используется для поисковых полей (поле поиска ведёт себя как обычное текстовое поле).

Тип ввода Tel (телефон)

используется для полей ввода, которые должны содержать номер телефона.

Пример

Тип ввода Time (время)

позволяет пользователю выбрать время (без часового пояса).

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор времени.

Тип ввода Url (веб-адрес)

используется для полей ввода, которые должны содержать URL-адрес.

В зависимости от поддержки веб-браузера, поле URL может быть автоматически проверено во время отправки. Некоторые смартфоны распознают тип URL-адреса и добавляют «.com» к набору с клавиатуры, чтобы соответствовать вводу URL.

Тип ввода Week (неделя)

позволяет пользователю выбрать неделю и год.

В зависимости от поддержки веб-браузера в поле ввода может отображаться выбор даты.

Проверьте себя с помощью упражнений

HTML Атрибут Input Type

Тег Описание
Определяет тип ввода для отображения

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.

Получение новых типов ввода для работы в старых браузерах

Я пытаюсь получить новые типы входных данных, работающих в IE9 IE8 IE7, но очень неудачно.

Кто-нибудь знает, как добиться этого?

Я сделал это работает для новых браузеров, использующих DateTime-polyfill, недельной polyfill и webshim LIB, но я не понимаю, почему webshim не работает для IE9-7.I значит, все хорошо, пока я не изменил в IE9 и моем входном диапазоне стал просто нормальное текстовое поле, то же самое для ввода номера.

Я думал, что webshim заменит, что отсутствие поддержки с некоторыми слайд-виджет, но ничего. Что мне не хватает, пожалуйста, помогите?

Типы HTML5 Входы не поддерживаются в более старых браузерах , как IE7-IE8 и автоматически попадают обратно , input type=»text» который поддерживается в этих браузерах.

Соответствующий вопрос находится здесь .

Если вы хотите, чтобы поддержать эти валидаций вы должны сделать это с валидациями JavaScript для старых браузеров.

Вы можете попробовать h5Validate — HTML5 Form Validation для JQuery , который поддерживается в старых браузерах , а также. Проверено на 13 различных браузерах IE6-IE9 , FireFox , Chrome , iPhone , и Android .

Другой вариант заключается в использовании Modernizr .

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL