HTML5 значительно расширяет возможности управления формами, предлагая множество дополнительных input types, несколько new attributes и горстку extra elements.
Получая это предупреждение заранее, на случай, если вы по понятным причинам решите, что чтение остальной части этой страницы было бы пустой тратой времени, огромное большинство этих новых gubbins ещё не будут полностью работать во всех основных браузерах.
Неудивительно, что Internet Explorer — главный профан, практически ничего из этого не работает ни в чём ниже, чем IE 10, и даже эта версия не поддерживает некоторые типы input. Однако всё это не бесплодно — смотрите Примечание о предложениях по использованию в конце Формы HTML5, раздел 2.
Дополнительные типы ввода
Основные поля формы, созданные с помощью элемента input, включают текст, пароль, флажок, радио и отправку, которые уже были рассмотрены в разделе для начинающих в HTML. В HTML5 эти типы были расширены для размещения более специфичных полей.
Поиск
Используется для текстового поля поискового запроса и выполняется точно так же, как и при стандартном вводе текста.
<input type="search" name="search">
Основная цель включения этого типа ввода в спецификацию HTML5 — это стиль. Помимо того, что ваш HTML-код становится более понятным, вы также можете настроить таргетинг на этот элемент с помощью селектора атрибутов CSS:
input[type=search] { background: url(magnifyingglass.png) right no-repeat) }Адрес электронной почты, телефон, URL
К другим “специальным” типам ввода текста относятся tel для телефонных номеров, url для веб-адресов и email для адресов электронной почты.
<input type="tel" name="telephone_number"> <input type="url" name="web_address"> <input type="email" name="email_address">
Вы можете использовать псевдоклассы :valid и :invalid CSS3 для оформления этих полей в зависимости от того, считается ли их содержимое допустимым.
input[type=email]:valid { background: green }
input[type=email]:invalid { background: red }В этом примере фон поля электронной почты будет окрашен в зелёный цвет, если введённый текст распознается как адрес электронной почты (например, “support@foxyforex.ru”), или в красный, если это не так (например, если пользователь вводит “сосиски?”).
Числа и диапазоны
Простое текстовое поле, которое также позволяет пользователю напрямую вводить число или перебирать числа (обычно с помощью стрелок вверх и вниз сбоку от поля), может быть создано с помощью type=»number».
Можно добавить дополнительный step атрибут, чтобы указать, сколько добавляется или вычитается из числа при каждом увеличении.
Если вы также хотите, чтобы число имело минимальное или максимальное значение, вы можете дополнительно использовать атрибуты min и max.
<input type="number" name="quantity" step="2" min="20" max="30">
Ещё раз, если это поддерживается, пользователь сможет либо вводить непосредственно в поле, либо, при использовании стрелок, переключаться между 20 и 30, по две единицы за раз.
Вы также можете использовать псевдоклассы :valid и :invalid применительно к этому. Например, если бы пользователь ввёл “12”, это было бы недопустимо, потому что оно не находится между 20 и 30. Если бы он ввёл ”23″, это также было бы недопустимо, потому что оно не кратно 2.
Альтернативой подходу с цифрами в текстовом поле может быть достигнуто с помощью type=»range». По умолчанию это должно отображаться в виде горизонтальной полосы с ползунком посередине. Затем пользователь может перемещать ползунок влево и вправо, при этом крайний левый будет иметь значение “0”, а крайний правый — значение “100”. Этот диапазон можно регулировать с помощью атрибутов min и max.
<input type="range" name="temperature" min="15" max="25" step="0.5" value="18.5">
Даты и время
Существует несколько типов ввода для дат и времени:
type="datetime" type="date" type="month" type="week" type="time" type="datetime-local"
Если они поддерживаются (широко не поддерживаются, а также несовместимы между браузерами), пользователю будет предложено ввести дату или время в определённом формате, либо путём прямого ввода, циклического просмотра одной недели / дня / часа / минуты / и т.д. за раз, либо путём выбора из выпадающего календаря.
Атрибуты step, min и max также могут использоваться с датами и временем, как и псевдоклассы CSS для стилизации в соответствии с действительностью.
Цвет
Наконец, type=»color» предназначен для того, чтобы позволить пользователю выбирать цвет, отправляя шестизначный шестнадцатеричный код в качестве его значения.
<input name="color" type="color" value="#ff8800">
Страницы в тему:
- Следующая страница: Формы HTML5, раздел 2: Атрибуты и списки данных
- Предыдущая страница: Доступные формы
- HTML — тег: input
