HTML5 | Новые типы элемента
333 116Веб-программирование — HTML5 — Новые типы элемента <input>
Одной из странных особенностей HTML-форм является использование одного элемента с расплывчатым названием <input> для создания разнообразных элементов управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента управления зависит от атрибута type элемента <input>.
Если браузеру встречается неизвестный тип элемента <input>, веб-обозреватель рассматривает его как обычное текстовое поле. Это означает, что следующие три элемента обрабатываются абсолютно одинаково всеми браузерами:
<input type="text">
<input type="странный-тип-input">
<input>В HTML5 из этого поведения извлекается польза. А именно, в элемент <input> было добавлено несколько новых типов, и если какой-либо браузер не поддерживает их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода адреса электронной почты можно создать поле <input> нового типа
<input type="email"><br>Если просматривать страницу с этим кодом в браузере, который не поддерживает тип email для элемента <input> (например, Internet Explorer), то это поле отобразится как обычное текстовое поле. Но браузеры, поддерживающие формы HTML5 немного умнее могут делать следующее:
Предложить услуги редактирования. Например, интеллектуальный браузер может предоставить способ выбрать адрес электронной почты из адресной книги и вставить его в поле адреса.
Предотвратить возможные ошибки. Например, браузер может не принимать буквы при вводе в поле типа number, или не принимать недопустимые даты, или вообще заставить пользователя выбирать даты из мини-календаря, что легче и безопаснее.
Выполнять проверку. Браузеры могут выполнять более сложные проверки после того, как пользователь нажмет кнопку для отправки данных.
Спецификация HTML5 не предоставляет разработчикам браузеров никаких наставлений по первому пункту. Браузеры свободны управлять отображением и редактированием разных типов данных любым имеющим смысл способом, и разные браузеры могут добавлять различные небольшие удобства.
Но более важными являются возможности проверки и исключения ошибок. Как абсолютный минимум, браузер с поддержкой HTML5-форм должен не допустить отправки формы, содержащей данные, которые нарушают правила типов данных. Поэтому, если браузер не может предотвратить ошибки непосредственно при вводе (согласно второму пункту вышеприведенного списка), он должен выполнить их проверку, когда пользователь попытается отправить форму (согласно третьему пункту).
К сожалению, не все современные браузеры удовлетворяют этим требованиям. Некоторые распознают новые типы данных и предоставляют кое-какие возможности редактирования, но не проверки. Многие браузеры понимают один тип данных, но не другой. Особенно проблемные в этом отношении мобильные браузеры — они предоставляют некоторые удобства редактирования, но никаких возможностей проверки.
В таблице ниже приведены новые типы данных и уровень полной поддержки основными браузерами. Полная поддержка означает, что в случае нарушения типа данных форма не отправляется.
| Тип данных | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
| — | 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, который позволяет вводить несколько адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка текста, только разделены запятыми.
Не забывайте, что пустые значения проходят проверку. Чтобы не допустить пустого поля адреса, в его элемент нужно вставить атрибу
HTML Типы входных данных
❮ Предыдущая Следующая Глава ❯Типы входных данных
В этой главе описаны типы входных данных на <input> элемента.
Тип входа: текст
<input type=»text»> определяет поле ввода одной строки для ввода текста:
пример
<form>
First name:<br>
<input type=»text» name=»firstname»><br>
Last name:<br>
<input type=»text» name=»lastname»>
</form>
Это как HTML код выше будет отображаться в браузере:
Имя:
Фамилия:
Тип входа: пароль
<input type=»password»> определяет поле пароля:
пример
<form>
User name:<br>
<input type=»text» name=»username»><br>
User password:<br>
<input type=»password» name=»psw»>
</form>
Это как HTML код выше будет отображаться в браузере:
Имя пользователя:
Пользовательский пароль:
Символы в поле пароля замаскированы (shown as asterisks or circles) в (shown as asterisks or circles) .
Тип входа: отправить
<input type=»submit»> определяет кнопку для отправки формы ввода в форм-обработчика.
Форм-обработчик обычно представляет собой страницу сервера с помощью сценария для обработки входных данных.
Форма обработчик задаются в атрибуте действия формы по:
пример
<form action=»action_page.php»>
First name:<br>
<input type=»text» name=»firstname» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit» value=»Submit»>
</form>
Это как HTML код выше будет отображаться в браузере:
Имя:
Фамилия:
Если опустить значение атрибута кнопки отправки, кнопка получит текст по умолчанию:
пример
<form action=»action_page.php»>
First name:<br>
<input type=»text» name=»firstname» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit»>
</form>
Тип вхо
Атрибуты и их значения для тега INPUT HTML
Здравствуйте, я собрал для вас подборку для всех атрибутов и их значений для тега INPUT
Типы Значений Атрибутов Элементов Ввода
Также атрибут type элемента input имеет новые значения – для улучшенного контроля перед отправкой введенных данных на обработку:
| Тип | Описание |
| tel | Вводимое значение представляет телефонный номер |
| search | Поле ввода является поисковым полем |
| url | Вводимое значение – это адрес URL |
| Вводимое значение – один или несколько адресов email | |
| datetime | Вводимое значение представляет дату и/или время |
| date | Ввод даты |
| month | Ввод месяца |
| week | Ввод недели |
| time | Ввод времени |
| datetime-local | Вводимое значение – это местные дата/время |
| number | Ввод числового значения |
| range | Ввод числа в заданном диапазоне |
| color | Ввод цвета в шестнадцатеричном формате, например #FF7700 |
Новые Элементы Формы
HTML5 предлагает новые элементы формы с дополнительной функциональностью:
| Тег | Описание |
| <datalist> | Список опций для вводимых значений |
| <keygen> | Генерация ключей для аутентификации пользователей |
| <output> | Для различных типов вывода, таких как вывод, написанный скриптом |
Тип Ввода – email (Электронная Почта)
Тип email используется для полей ввода, которые должны содержать адреса электронной почты.
Значение поля email автоматически проверяется при отправке формы.
Пример
|
Типы полей ввода HTML5 | Учебник HTML5
В HTML5 включены несколько дополнительных типов полей ввода, позволяющих ограничивать данные, которые пользователи смогут ввести, без необходимости прибегать к лишнему JavaScript-коду. Самая отрадная черта этих новых типов полей состоит в том, что, если браузеры не поддерживают их, они по умолчанию превращаются в стандартные текстовые поля ввода. Более того, существуют отличные полизаполнения, позволяющие обеспечить поддержку требуемых функций в устаревших браузерах. Вскоре мы о них поговорим. А пока взглянем на новые типы полей ввода HTML5 и разберем их преимущества.
Браузеры, поддерживающие поле type=»email», будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. В приведенном далее примере кода type=»email» используется наряду с required и placeholder:
<div>
<label for=»email»>Your Email address</label>
<input name=»email» type=»email» placeholder «Dwight. [email protected]» required aria-required=»true»>
</div>
Если type=»email» применяется в сочетании с атрибутом required, то попытка отправить форму с данными, не соответствующими требованиям, приведет к выводу на экран предупреждающего сообщения (рисунок 8.6).
В это поле следует ввести электронный адрес.
Кроме того, на многих устройствах с сенсорными экранами (например, Android, iPhone и т. д.) внешний вид встроенной виртуальной клавиатуры изменяется исходя из типа поля ввода. На рисунке 8.7 показано, как она будет выглядеть на экране iPad при использовании поля ввода type=»email». Обратите внимание на виртуальную клавишу с символом @, предназначенную для облегчения ввода адреса электронной почты.
Виртуальная клавиатура на экране iPad при использовании поля ввода type=»email»
Number.
Браузеры, поддерживающие поле type=»number», ожидают, что пользователь введет в него числовое значение. Они также по умолчанию отображают элементы управления в виде числовых полей ввода со значениями, изменяемыми с помощью мыши, давая пользователям возможность менять определенное значение, просто нажимая располагающиеся рядом с ним стрелки «вверх/вниз». Вот пример кода:
<div>
<label for=»yearOfCrime»>Year Of Crime</label>
<input name=»yearOfCrime» type=»number» min=»1929″ max=»2015″ required aria-required=»true» >
</div>
На рисунке 8.8 показано, как результат будет выглядеть в поддерживающем это поле браузере (Chrome 16).
Поле со счетчиком.
Поведение, которое будет наблюдаться, если вы не введете число, варьируется. Например, Chrome (версии 16) очистит поле, как только оно потеряет фокус, не предусматривая при этом никакой обратной связи, в то время как Firefox (версии 9) позволит ввести все что угодно (поле по умолчанию будет работать как стандартное текстовое поле ввода). В предыдущем примере кода мы задали диапазон допустимых значений, указав минимальное и максимальное значения, как в следующем коде:
Type=»number» min=»1929″ max=»2015″
Числа, не попадающие в этот диапазон, подвергаются (должны подвергаться) особой обработке. Реализация различается в зависимости от браузера. Например, Chrome (версии 16) выводит предупреждающее сообщение, а Firefox (версии 9) ничего не делает.
Url
Как вы, возможно, и предполагали, поля ввода type=»url» предназначены для указания URL-адресов. Подобно полям ввода, относящимся к типам tel и email, поведение рассматриваемого поля почти идентично тому, что наблюдается у стандартного текстового поля. Однако некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран при попытке отправить форму с некорректными значениями. Далее приведен пример кода, включающего атрибут placeholder:
<div>
<label for=»web»>Your Web address</label>
<input name=»web» type=»url» placeholder=»Www.mysite.com»>
</div>
На рисунке 8.9 показано, что произойдет при попытке отправить форму, в соответствующем поле которой неправильно введен URL-адрес, в браузере Chrome (версии 16).
Требуется ввести корректный электронный адрес
Как и в случае с type=»email», на устройствах с сенсорными экранами внешний вид встроенной виртуальной клавиатуры зачастую изменяется исходя из типа поля ввода. На рисунке 8.10 показано, как она будет выглядеть на экране iPad при использовании поля ввода type=»url».
Виртуальная клавиатура на экране iPad при использовании поля ввода type=”url”
Заметили виртуальные клавиши Go, прямой слеш (/) и.com? Поскольку мы использовали тип поля ввода url, они отображаются на экране для облегчения набора URL-адреса (если только вы не собираетесь указать адрес сайта, который не заканчивается на com, в случае чего, как вы сами понимаете, благодарить компанию Apple будет не за что).
Tel
Type=»tel» — еще один тип поля ввода, предназначенного для указания контактной информации. Поле типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Вот пример кода:
<div>
<label for=»tel»>Telephone (so we can berate you if you’re wrong)</label>
<input name=»tel» type=»tel» placeholder=»1-234-546758″ autocomplete=»off» required aria-required=»true» >
</div>
Несмотря на то что предполагается числовой формат вводимых данных, во многих браузерах, даже современных, вроде Chrome 16 и Firefox 9, это поле будет попросту вести себя как текстовое поле ввода. На текущий момент в этих браузерах не предусматривается вывод надлежащих предупреждающих сообщений при попытке отправить форму с некорректными введенными значениями.
Однако, как и в случае с типами полей ввода email и url, устройства с сенсорными экранами зачастую внимательно подходят к типу поля ввода tel, обеспечивая отображение измененной соответствующим образом встроенной виртуальной клавиатуры для облегчения ввода информации. На рисунке 8.11 показано поле ввода типа tel при доступе к нему на экране iPad (под управлением операционной системы iOS 5).
Вы заметили, что на встроенной виртуальной клавиатуре отсутствуют знаки алфавита? Благодаря этому пользователи смогут намного быстрее ввести значение в корректном формате.
Search.
Несмотря на то что поле ввода type=»search» работает таким же образом, как и стандартное текстовое поле ввода, некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода. Вот пример кода:
<div>
<label for=»search»>Search the site….</label>
<input name=»search» type=»search» placeholder=»Wyatt Earp»>
</div>
На рисунке 8.12 показано, как будет выглядеть результат применения этого кода в браузере Firefox (версии 9). Обратите внимание, что при стилизации по умолчанию поле ввода является прямоугольным.
Однако в браузере Chrome (версии 16) визуализация на основе того же самого кода получается другой — поле ввода по умолчанию имеет закругленные края и кнопку быстрой очистки справа (рисунок 8.13).
Пример поля ввода tel на экране iPad
Поле поиска в Firefox
Поле поиска в Chrome.
Pattern.
Говоря об атрибуте pattern=»», сразу хочется предупредить: «Бойтесь, очень бойтесь» (помните, из какого фильма эта реплика?). На мой взгляд, эта реплика с тем же успехом применима к регулярным выражениям. Если вы не знаете, что такое регулярные выражения, то смею заметить, меньше знаешь — крепче спишь. Но если знаете, а еще хуже, понимаете их, то следующий раздел — для вас.
Узнайте о регулярных выражениях.
Если вы смотрели фильм «Изгоняющий дьявола» (The Exorcist) в одиночку, на кладбище, в полночь, во время Хеллоуина, то, вероятно, готовы узнать о регулярных выражениях. Читайте о них по адресу http://en. wikipedia. org/wiki/Regular_expressions.
Атрибут pattern позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Вот пример кода:
<div>
<label for=»name»>Your Name (first and last)</label>
<input name=»name» pattern=»([a-zA-Z]{3,30}s*)+[a-zAZ]{3,30}» placeholder=»Dwight Schultz» required ariarequired=»true» >
</div>
При написании книги я потратил примерно 458 секунд на поиск в Интернете регулярного выражения, которое соответствовало бы синтаксису имени и фамилии. Если указать регулярное выражение в виде значения атрибута pattern, то поддерживающие браузеры будут ожидать ввода соответствующего синтаксиса. Кроме того, при использовании этого атрибута в сочетании с атрибутом required некорректно введенные значения будут подвергаться показанной далее обработке в поддерживающих их браузерах. В данном случае я попытался отправить форму, не указав фамилию (рисунок 8.14).
Рисунок 8.14. Выводится предупреждение о некорректном вводе данных
Color.
Поле ввода type=»color» генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. Вот пример кода:
<div>
<label for=»color»>Your favorite color</label>
<input name=»color» type=»color»>
</div>
К сожалению, в настоящее время очень немногие браузеры поддерживают тип поля ввода color. Похоже, что только Opera (версии 11) обеспечивает палитру цветов. Если требуемый цвет не отображается на палитре изначально, то, нажав располагающуюся внизу кнопку Other (Другие), можно открыть палитру цветов, используемую в операционной системе по умолчанию (рисунок 8.15).
Отображение палитры цветов.
Типы полей ввода date и time.
Согласно задумке, новые типы полей ввода date и time призваны обеспечить пользователю удобный выбор значений дат и времени. Если вам когда-либо доводилось приобретать в Интернете билеты, например, на спортивные соревнования, то вы, скорее всего, пользовались при этом элементом управления в виде календаря того или иного рода. Для обеспечения такой функциональности почти всегда применяется JavaScript (обычно это библиотека jQuery), однако есть надежда, что это стало возможным с использованием одной лишь HTML5-разметки.
Date.
Вот пример кода:
<input type=»date» name=»date» />
Как и в случае с полем ввода типа color, в настоящее время немногие браузеры поддерживают поле типа date, и в большинстве из них поля такого типа по умолчанию работают как стандартные текстовые поля ввода. Однако в старом добром браузере Opera эта функциональность уже реализована, а На рисунке 8.16 показано, как в Opera (версии 11) будет выглядеть результат визуализации на основе приведенного выше примера кода.
Календарь в браузере Opera
Существует несколько разных «модификаций» полей ввода типов date и time. Далее приведен их краткий обзор.
Month.
Вот пример кода:
<input type=»month» name=»month»>
Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца, например 2012-06.
На рисунке 8.17 показано, как все это будет выглядеть в браузере.
Пользователь может выбрать в календаре целый месяц
Week
Вот пример кода:
<input type=»week» name=»week»>
При использовании типа поля ввода week соответствующий инструмент-указатель позволит пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате, например, 2012-W47.
На рисунке 8.18 показано, как все это будет выглядеть в браузере.
Пользователь выбирает в календаре всю неделю
Time.
Вот пример кода:
<input type=»time» name=»time»>
Поле ввода, относящееся к типу time, допускает ввод значений в 24-часовом формате, например 23:50. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени (рисунок 8.19).
Поле для ввода значения времени
Datetime и datetime-local.
Вот пример кода:
<input type=»datetime» name=»datetime»>
На рисунке 8.20 показано, как результат выполнения этого кода будет выглядеть в браузере Opera (версии 11).
На календаре выбран текущий день (на момент выполнения кода)
На экране устройств под управлением операционной системы iOS все это будет выглядеть еще лучше, о чем свидетельствует рисунок 8.21.
При вводе данных в поле типа datetime генерируются значения даты и времени (разделенные буквой T), а затем помечается часовой пояс (буквой Z в случае с UTC (Universal Coordinated Time — универсальное координированное время) либо знаком «+» или «-», если речь идет о величинах смещения). 25 октября 2009 года в системе UTC будет выглядеть так:
2009-10-25T05:05:00Z
Поскольку UTC является практически эквивалентом GMT (Greenwich Mean Time — среднее время по Гринвичу), разобраться в смещениях не составит труда.
Например, тихоокеанское стандартное время (Лос-Анджелес) на 8 часов отстает от GMT (UTC — 8 часов). Это нашло бы свое отражение во вводимом значении, как показано далее:
2009-10-25T05:05:00-8:00
Результат выполнения того же кода на экране iPad
Версия datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе.
ИЗМЕНЕНИЕ ШАГОВЫХ ПРИРАЩЕНИИ.
При работе с элементами управления в виде числовых полей ввода различных типов со значениями, изменяемыми с помощью мыши, вы можете менять шаговые приращения (величину инкремента), используя для этого атрибут step. Например, для шага величиной 4 часа за один раз вам потребуется ввести значение, равное 4 часам и выраженное в виде 14 400 секунд (60 (секунд) умножить на 60 (минут) и умножить на 4 (часа)). Далее приведен пример с datetime, измененный для использования 4 часовых шагов во временном селекторе:
<input type=»datetime» name=»datetime» step=»14400″>
Range
Поле ввода типа range позволит создать такой элемент интерфейса, как ползунок. Вот пример кода:
<input name=»howYouRateIt» type=»range» min=»1″ max=»10″ value=»5″ >
На рисунке 8.22 показано, как результат будет выглядеть в браузере Safari (версии 5.1).
Ползунок в браузере Safari
Диапазон по умолчанию — от 0 до 100. Однако, указав значения для min и max в предыдущем примере, мы ограничили диапазон, и теперь он составляет от 1 до 10.
Серьезная проблема, с которой я столкнулся при работе с полем ввода типа range, заключается в том, что для пользователя никогда не отображается текущее значение. Хотя ползунок предназначен только для выбора числовых значений в некоем диапазоне, мне зачастую требовалось, чтобы текущее значение отображалось во время его изменения. На данный момент сделать это с помощью HTML5 невозможно. Однако если вам потребуется обязательно обеспечить отображение текущего значения, выбранного ползунком, то вы сможете легко сделать это, используя незамысловатый JavaScript-код. Измените предыдущий пример кода следующим образом:
<input name=»howYouRateIt» type=»range» min=»1″ max=»10″value=»5″ onchange=»showValue (this. value)»><span>5</span>
Здесь мы добавили атрибут onchange и элемент <span> с идентификатором range. А теперь добавим следующий небольшой JavaScript-фрагмент:
<script>
Function showValue (newValue)
{
Document. getElementById («range»). innerHTML=newValue;
}
</script>
Этот код лишь извлекает текущее значение, выбранное с помощью ползунка, и отображает его в элементе с идентификатором range (в нашем теге <span>). Используем также немного CSS-стилизации, чтобы сделать значение крупнее и задать для него красный цвет. На рисунке 8.23 демонстрируется итоговый эффект, при котором значение будет обновляться по мере движения ползунка.
При движении ползунка отображается текущее значение
ПРИМЕЧАНИЕ.
В HTML5 имеются и другие новые свойства, касающиеся форм, однако, поскольку они относятся больше к созданию приложений и разработке серверных программ, мы не рассматривали их здесь. Изучить редакторский черновик W3C раздела о HTML5-формах вы сможете по следующему адресу: http://dev. w3.Org/html5/spec-author-view/forms. html#forms.