Руководство по HTML5
Адам Фриман
Использование элементов input для ограничения ввода данных
HTML5 ввел несколько новых значений для атрибута type
элемента input
, которые позволяют вам запрашивать более конкретные данные от пользователя. В следующих разделах я познакомлю вас с каждым новым значением type
и покажу, как они используются. В таблице 13-7 представлены эти новые значения type
.
Таблица 13-7: Значения type
, ограничивающие ввод данных
Тип | Описание | Новый в HTML5 |
checkbox |
Ограничивает ввод данных флажком истинно/ложно. | Нет |
color |
Ограничивает ввод данных цветом. | Да |
date |
Ограничивает ввод данных датой. | Да |
datetime |
Ограничивает ввод данных временем и датой с указанием часового пояса. | Да |
datetime-local |
Ограничивает ввод данных временем и датой без указания часового пояса. | Да |
email |
Ограничивает ввод данных правильно отформатированным имейл адресом. | Да |
month |
Ограничивает ввод данных годом и месяцем. | Да |
number |
Ограничивает ввод данных целым числом или числом с плавающей запятой. | Да |
radiobutton |
Ограничивает ввод данных фиксированным набором выборов. | Нет |
range |
Ограничивает ввод данных указанным диапазоном чисел. | Да |
tel |
Ограничивает ввод данных правильно отформатированным номером телефона. | Да |
time |
Ограничивает ввод данных временем суток. | Да |
week |
Ограничивает ввод данных годом и неделей. | Да |
url |
Ограничивает ввод данных полным URL. | Да |
Некоторые из этих типов input
дают пользователям сильную визуальную подсказку о том, каков вид ограничения на данные, которые они могут ввести или выбрать (например, типы checkbox
и radiobutton
(флажок и радио-кнопка)). Другие типы, такие как email
и url
, основываются на валидации входных данных, о чем я расскажу в главе 14.
Использование элемента input для получения числа
Значение number
атрибута type
создает поле для ввода данных, которое будет принимать только числовые значения. Некоторые браузеры, в частности, Chrome, также будут отображать стрелки, которые увеличивают и уменьшают числовые значения. В таблице 13-8 описываются дополнительные атрибуты, которые доступны при использовании этого типа входных данных.
Таблица 13-8: Дополнительные атрибуты, доступные для типа number
Атрибут | Описание | Новый ли в HTML5 |
list |
Указывает id элемента datalist , который предоставляет значения для этого элемента. Для подробностей по элементу datalist смотрите раздел "Использование списка данных" ранее в этой главе |
Да |
min |
Задает минимальное допустимое значение в целях проверки входных данных (и устанавливает предел для стрелки с минимальным значением, если она отображается). Для подробностей по валидации входных данных см. главу 14. | Да |
max |
Задает максимально допустимое значение в целях проверки входных данных (и устанавливает предел для стрелки с максимальным значением, если она отображается). Для подробностей по валидации входных данных см. главу 14. | Да |
readonly |
Этот атрибут создает поле для ввода данных "только для чтения"(read-only). Для подробностей смотрите раздел "Создание текстовых полей только для чтения и отключенных текстовых полей" ранее в этой главе | Нет |
required |
Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14 | Да |
step |
Задает шаг увеличения или уменьшения значения | Да |
value |
Указывает начальное значение для элемента. | Нет |
Значения атрибутов min
, max
, step
и value
могут быть выражены как целыми числами, так и числами с плавающей точкой; например, числа 3 и 3.14 оба действительны. В листинге 13-7 показано, как используется тип number
элемента input
.
Листинг 13-7: Использование типаnumber
элементаinput
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input value="Apples" id="fave" name="fave" />
</label>
</p>
<p>
<label for="price">
$ per unit in your area:
<input type="number" step="1" min="0" max="100"
value="1" id="price" name="price" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
В листинге 13-7 я запросил цену, которую потребитель платит за свои любимые фрукты в своем регионе. Я указал минимальное значение 1, максимальное значение 100, шаг в 1 пункт и начальное значение 1. Вы можете увидеть, как браузер отображает этот тип элемента input
, на рисунке 13-10. Я показал на этом рисунке Firefox и Chrome; обратите внимание, что Chrome отображает небольшие кнопки со стрелками, которые могут быть использованы для увеличения числового значения, а Firefox нет.
Рисунок 13-10: Chrome и Firefox отображают типnumber
элементаinput
Использование элемента input для получения числа в заданном диапазоне
Альтернативным подходом к получению числового значения является использование типа range
элемента input
, который ограничивает пользователя выбором значения из заданного диапазона. Тип range
поддерживает тот же набор атрибутов, что и тип number
(показано в таблице 13-8), но различие заключается в том, как браузер отображает эти элементы. В листинге 13-8 показано, как используется тип range
.
Листинг 13-8: Использование типаrange
элементаinput
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input value="Apples" id="fave" name="fave" />
</label>
</p>
<p>
<label for="price">
$ per unit in your area: 1
<input type="range" step="1" min="0" max="100"
value="1" id="price" name="price" />100
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
На рисунке 13-11 можно увидеть, как браузер отображает тип range
.
Рисунок 13-11: Использование типаrange
элементаinput
Использование элемента input для получения ответа, выраженного булевой величиной
Тип checkbox
элемента input
создает чекбокс, который позволяет пользователю сделать выбор "истинно/ложно". Это значение атрибута type
поддерживает дополнительные атрибуты, представленные в таблице 13-9.
Таблица 13-9: Дополнительные атрибуты, доступные при использовании типа checkbox
Атрибут | Описание | Новый в HTML5 |
checked |
Этот атрибут гарантирует, что флажок "включен" при первоначальном отображении для пользователя или когда сбрасывается форма. | Нет |
required |
Указывает, что пользователь должен поставить "галочку" в целях проверки входных данных. Для подробностей см. главу 14 | Да |
value |
Указывает значение данных, которые отправляются на сервер при установленном флажке. По умолчанию значение равно on . |
Нет |
В листинге 13-9 показано, как используется тип checkbox
элемента input
.
Листинг 13-9: Использование элемента input
для создания чекбокса.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input value="Apples" id="fave" name="fave" />
</label>
</p>
<p>
<label for="veggie">
Are you vegetarian:
<input type="checkbox" id="veggie" name="veggie" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
На рисунке 13-12 видно, как браузер отображает этот тип элемента input
.
Рисунок 13-12: Создание чекбокса при помощи элемента input
Нюанс, который возникает с типом checkbox
, заключается в том, что при отправке формы значение данных отправляется на сервер только в том случае, если пользователь поставил «галочку». Так что если я отправлю такую форму, как на рисунке 13-12, я получу ответ скрипта Node.js, показанный на рисунке 13-13.
Рисунок 13-13: Отправка данных формы, представленной на предыдущем рисунке
Обратите внимание, что для password
присутствует строка, в которой должно быть представлено значение, но не для checkbox
. Отсутствие данных для типа checkbox
элемента input
указывает на то, что пользователь не установил флажок; а наличие данных указывает на то, что пользователь поставил «галочку», как показано на рисунке 13-14.
Рисунок 13-14: Отправка формы с установленным флажком
Использование элемента input для создания фиксированного выбора
Тип radio
элемента input
позволяет создавать группы радио-кнопок, которые дают пользователю возможность выбирать из фиксированного набора вариантов. Это полезно, когда есть небольшое количество допустимых значений данных, с которыми вы можете работать. В таблице 13-10 описаны дополнительные атрибуты, которые поддерживаются этим типом элемента input
.
Таблица 13-10: Дополнительные атрибуты, доступные при использовании типа radio
Атрибут | Описание | Новый в HTML5 |
checked |
Этот атрибут гарантирует, что радио-кнопка выбрана при первоначальном отображении для пользователя или когда сбрасывается форма. | Нет |
required |
Указывает, что пользователь должен выбрать одну из радио-кнопок в целях проверки входных данных. Для подробностей см. главу 14 | Да |
value |
Указывает значение данных, которые отправляются на сервер при выбранной радио-кнопке. | Нет |
Каждый элемент input
с типом radio
дает пользователю один вариант выбора. Вы можете создать набор взаимоисключающих вариантов, если все элементы input
будут иметь одинаковое значение атрибута name
. В листинге 13-10 показано, как это работает.
Листинг 13-10: Использование типа radio
для создания фиксированного выбора
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<fieldset>
<legend>Vote for your favorite fruit</legend>
<label for="apples">
<input type="radio" checked value="Apples" id="apples"
name="fave" />
Apples
</label>
<label for="oranges">
<input type="radio" value="Oranges" id="oranges" name="fave" />
Oranges
</label>
<label for="cherries">
<input type="radio" value="Cherries" id="cherries" name="fave" />
Cherries
</label>
</fieldset>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
В этом примере я создал три элемента input
типа radio
. Для всех трех значение атрибута name
равно fave
, то есть браузер будет рассматривать их, как связанные друг с другом. Это обозначает, что выбор одной из кнопок автоматически делает две другие кнопки невыбранными. Я использую атрибут value
для указания значений данных, которые должны быть переданы серверу при отправке формы. Также я использую элементы fieldset
и legend
, чтобы дать пользователю визуальную подсказку о том, что три кнопки связаны (это необязательно; оба элемента fieldset
и legend
описаны в главе 12). Я применяю атрибут checked
для первого из элементов radio
, так что у нас всегда есть выбранное значение. Вы можете увидеть, как браузер отображает эти элементы input
, на рисунке 13-15.
Рисунок 13-15: Использование элемента input
для создания радио-кнопок
В нашем случае будет выбрана одна из радио-кнопок. Если атрибут checked
не применяется, и пользователь не сделал выбор, то ни одна из кнопок не будет выбрана. Как и с типом checkbox
элемента input
, значение не будет передано на сервер, если не выбран ни один элемент, это обозначает, что мы не получим никаких данных, если пользователь не сделает выбор.
Использование элемента input для получения отформатированных строк
Типы email
, tel
и url
настраивают элемент input
для ввода только валидного адреса электронной почты, номера телефона или URL, соответственно. Все эти три типа поддерживают дополнительные атрибуты, приведенные в таблице 13-11.
Таблица 13-11: Дополнительные атрибуты, доступные для типовtel
иurl
Атрибут | Описание | Новый ли в HTML5 |
list |
Указывает id элемента datalist , который предоставляет значения для этого элемента. Для подробностей смотрите раздел "Использование списка данных" ранее в этой главе |
Да |
maxlength |
Задает максимальное число символов, которые пользователь может ввести в текстовое поле. Для подробностей смотрите раздел "Указание размера элемента" ранее в этой главе | Нет |
pattern |
Определяет шаблон регулярного выражения в целях проверки входных данных. Для подробностей см. главу 14 | Да |
placeholder |
Дает пользователю подсказку о том,какой вид данных вы ожидаете. Для подробностей смотрите раздел "Установка значений и использование меток-заполнителей (placeholders)" ранее в этой главе | Да |
readonly |
Этот атрибут создает текстовое поле "только для чтения"(read-only), и пользователь не может редактировать контент | Нет |
required |
Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14 | Да |
size |
Задает ширину элемента, выраженную как число символов, которые отображаются в текстовом поле. Для подробностей смотрите раздел "Указание размера элемента" ранее в этой главе | Нет |
value |
Указывает начальное значение для элемента. Для подробностей смотрите раздел "Установка значений и использование меток-заполнителей (placeholders)" ранее в этой главе. Для типа email это может быть один адрес или несколько адресов, разделенных запятой. |
Нет |
Тип email
также поддерживает атрибут multiple
, который позволяет элементу input
принять несколько адресов электронной почты. В листинге 13-11 показано, как используются эти три типа элемента input
.
Листинг 13-11: Использование типовtel
иurl
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="email">
Email:
<input type="email" placeholder="user@domain.com"
id="email" name="email" />
</label>
</p>
<p>
<label for="tel">
Tel:
<input type="tel" placeholder="(XXX)-XXX-XXXX"
id="tel" name="tel" />
</label>
</p>
<p>
<label for="url">
Your homepage:
<input type="url" id="url" name="url" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
Эти типы input
представлены для пользователя как обычные текстовые поля и только проверяют данные, которые пользователь ввел при отправке формы. Это является частью новой поддержки HTML5 для валидации входных данных, о чем я расскажу в главе 14. Качество валидации является переменной. Все основные браузеры справляются с типом email
и правильно определяют действительный адрес электронной почты. С типом url
все немного сложнее. Некоторые браузеры просто добавляют http:// к тому, что ввел пользователь, некоторые требуют от пользователя ввести значение, которое начинается с http://, но не проверяют остальную часть значения, а некоторые просто дают пользователю возможность предоставить любое значение, ничего не проверяя. И, наконец, тип tel
поддерживается очень слабо. Когда я писал эту книгу, ни один из основных браузеров не применял к нему никакой валидации.
Использование элемента input для получения времени и даты
HTML5 также ввел некоторые типы элемента input
для сбора даты и времени со стороны пользователя. В таблице 13-12 описаны эти типы input
.
Таблица 13-12: Типы элемента input
для получения времени и даты
Тип | Описание | Пример |
datetime |
Получает дату и мировое время, включая часовой пояс. | 2011-07-19T16:49:39.491Z |
datetime-local |
Получает местное время и дату (не включая часовой пояс). | 2011-07-19T16:49:39.491 |
date |
Получает дату (не включая часовой пояс или время). | 2011-07-20 |
month |
Получает год и месяц (без информации о времени, дне или часовом поясе). | 2011-08 |
time |
Получает время. | 17:49:44.746 |
week |
Получает текущую неделю. | 2011-W30 |
К сожалению, с датами и временем крайне сложно иметь дело, и спецификация этих новых типов элемента input
далека от идеала. Форматы даты взяты из RFC 3339 (доступно на http://tools.ietf.org/html/rfc3339), где описаны временные метки, которые косно и негибко отформатированы. Есть очень много разных выражений дат из-за многих региональных различий, которые актуальны и ожидаемы для разных пользователей. Например, некоторые пользователи посчитают, что T в формате datetime
обозначает начало отрезка времени, а Z обозначает вариант Zulu Time Zone. Все типы элемента input
, описанные в таблице 13-12, поддерживают дополнительные атрибуты, представленные в таблице 13-13.
Таблица 13-13: Дополнительные атрибуты, доступные для типов элемента input
, отвечающих за время и дату
Атрибут | Описание | Новый ли в HTML5 |
list |
Указывает id элемента datalist , который предоставляет значения для этого элемента. Для подробностей по элементу datalist смотрите раздел "Использование списка данных" ранее в этой главе. |
Да |
min |
Задает минимальное допустимое значение в целях проверки входных данных (и устанавливает предел для стрелки с минимальным значением, если она отображается). Для подробностей по валидации входных данных см. главу 14. | Да |
max |
Задает максимально допустимое значение в целях проверки входных данных (и устанавливает предел для стрелки с максимальным значением, если она отображается). Для подробностей по валидации входных данных см. главу 14. | Да |
readonly |
Этот атрибут создает поле для ввода данных "только для чтения"(read-only), и пользователь не может редактировать содержание. | Нет |
required |
Указывает, что пользователь обязан ввести значение в целях проверки входных данных. Для подробностей см. главу 14. | Да |
step |
Задает шаг увеличения или уменьшения значения. | Да |
value |
Указывает начальное значение для элемента. | Нет |
В листинге 13-12 показано, как используется тип date
.
Листинг 13-12: Использование типаdate
элементаinput
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Fruit:
<input value="Apples" id="fave" name="fave" />
</label>
</p>
<p>
<label for="lastbuy">
When did you last buy:
<input type="date"
id="lastbuy" name="lastbuy" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
В браузерах поддержка этих новых типов input
еще очень ограничена. Когда я писал это, лучшую поддержку предоставлял браузер Opera и предлагал календарь, где можно выбрать дату, как показано на рисунке 13-16.
Рисунок 13-16: Выбор даты в Opera
Далее идет Chrome, который представляет такое же поле, как и для типа number
элемента input
, с небольшими кнопками вверх и вниз для увеличения и уменьшения времени. Другие основные браузеры просто задают одно текстовое поле и дают пользователям «возможность» разобраться самим, что к чему. Я уверен, что эта ситуация улучшится, но до тех пор я рекомендую использовать календари, которые создаются при помощи популярных библиотек JavaScript, таких как jQuery.
Использование элемента input для получения цвета
Тип color
элемента input
ограничивает пользователя выбором цвета. Этот тип input
поддерживает дополнительный атрибут list
, который я описал в разделе "Использование списка данных" ранее в этой главе.
Значение цвета выражается ровно семью символами: сначала идет #
, за которым следуют три двузначных шестнадцатеричных значения, представляющих красный, зеленый и синий цвета (например, #FF1234
). Названия цветов CSS, такие как red
или black
, не поддерживаются. Вы можете увидеть, как используется этот тип элемента input
, в листинге 13-13.
Листинг 13-13: Использование типаcolor
элементаinput
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<input type="text" id="fave" name="fave" />
</label>
</p>
<p>
<label for="color">
Color:
<input type="color" id="color" name="color" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>
Большинство браузеров не осуществляют какой-либо специальной поддержки этого типа элемента input
. Google Chrome позволяет пользователю ввести значение и отчитывается о проблемах в форматировании при выполнении проверки входных данных (см. в главу 14). Лучшая поддержка осуществлена в браузере Opera, где отображается простая выборка цвета, которая может быть расширена до диалогового окна с полной цветовой гаммой, как показано на рисунке 13-17.
Рисунок 13-17: Поддержка выбора цвета в Opera