Использование элементов 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
