Атрибут type | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
| HTML | |
| XHTML | |
Обязательный атрибут
Да
Значения
В табл. 1 перечислены возможные значения атрибута type и получаемый вид поля формы.
В HTML5 добавлены новые значения, представленные в табл. 2.
| Тип | Описание |
|---|---|
| color | Виджет для выбора цвета. |
| date | Поле для выбора календарной даты. |
| datetime | Указание даты и времени. |
| datetime-local | Указание местной даты и времени. |
| Для адресов электронной почты. | |
| number | Ввод чисел. |
| range | Ползунок для выбора чисел в указанном диапазоне. |
| search | Поле для поиска. |
| tel | Для телефонных номеров. |
| time | Для времени. |
| url | Для веб-адресов. |
| month | Выбор месяца. |
| week | Выбор недели. |
Поддержка этих значений браузерами показана в табл. 3.
| Значение | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| color | 21.0+ | 11.01+ | |||||
| date | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| datetime-local | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ | |
| month | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| number | 10.0 | 6.0+ | 10.62+ | 5.0+ | 2.3+ | 4.0+ | |
| range | 10.0 | 5.0+ | 10.62+ | 5.0+ | 23.0+ | 5.0+ | |
| search | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 4.0+ | |
| tel | 10.0 | 5.0+ | 11.01+ | 5.0+ | 4.0+ | 3.1+ | |
| time | 5.0+ | 10.62+ | 5.0+ | 5.0+ | |||
| url | 10.0 | 5.0+ | 10.62+ | 5.0+ | 4.0+ | 2.3+ | 3.1+ |
| week | 5.0+ | 10.62+ | 5.0+ | 5.0+ |
Значение по умолчанию
text
Пример 1
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег input, атрибут type</title> </head> <body> <form action="input10.php"> <p><input type="radio" name="drink" value="rad1"> Пиво<Br> <input type="radio" name="drink" value="rad2"> Чай<Br> <input type="radio" name="drink" value="rad3"> Кофе</p> <p><input type="image" src="images/imgbutton.gif"></p> </form> </body> </html>
Пример 2
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег input, атрибут type</title>
</head>
<body>
<form>
<p>Введите число от 1 до 10</p>
<p><input type="range" min="1" max="10"></p>
</form>
</body>
</html>HTML и CSS с примерами кода
Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
Синтаксис
Закрывающий тег не требуется.
Атрибуты
accept- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
alt- Альтернативный текст для кнопки с изображением.
autocomplete- Включает или отключает автозаполнение.
autofocus- Устанавливает фокус в поле формы.
checked- Предварительно активированный переключатель или флажок.
dirname- Параметр, который передаёт на сервер направление текста.
disabled- Блокирует доступ и изменение элемента.
form- Связывает поле с формой по её идентификатору.
formaction- Определяет адрес обработчика формы.
formenctype- Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod- Сообщает браузеру каким методом следует передавать данные формы на сервер.
-
formnovalidate - Отменяет встроенную проверку данных на корректность.
formtarget- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list- Указывает на список вариантов, которые можно выбирать при вводе текста.
max- Верхнее значение для ввода числа или даты.
maxlength- Максимальное количество символов разрешённых в тексте.
min- Нижнее значение для ввода числа или даты.
minlength- Минимальное количество символов разрешённых в тексте.
multiple- Позволяет загрузить несколько файлов одновременно.
name- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern- Устанавливает шаблон ввода.
placeholder- Выводит подсказывающий текст.
readonly- Устанавливает, что поле не может изменяться пользователем.
required- Обязательное для заполнения поле.
size- Ширина текстового поля.
src- Адрес графического файла для поля с изображением.
step- Шаг приращения для числовых полей.
type- Сообщает браузеру, к какому типу относится элемент формы.
value- Значение элемента.
Также для этого элемента доступны универсальные атрибуты.
accept
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла (<input type="file">
Поддержка браузерами
Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.
Синтаксис
<input type="file" accept="<MIME-тип>" />
Значения
Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.
В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.
Список MIME-типов файлов.
Значение по умолчанию
Нет.
alt
Атрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
<input type="image" alt="<текст>" />
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
Нет.
autocomplete
Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete.
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
<input type="text" autocomplete="on | off" />
<input type="password" autocomplete="on | off" />
<input type="email" autocomplete="on | off" />
<input type="search" autocomplete="on | off" />
<input type="url" autocomplete="on | off" />
<input type="tel" autocomplete="on | off" />
Значения
on- Включает автозаполнение текста.
off- Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
Зависит от настроек браузера.
autofocus
Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут autofocus
checked
Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
<input type="radio" checked />
<input type="checkbox" checked />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
dirname
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname, а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr, а для текста справа налево (иврита, к примеру) значение будет rtl.
Синтаксис
<input type="text" dirname="<строка>" />
<input type="search" dirname="<строка>" />
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir.
Значение по умолчанию
Нет.
disabled
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
form
Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами <form>, например, при создании её программно или по соображениям дизайна.
Синтаксис
<input type="<тип>" form="<идентификатор>" />
<form>...</form>
Значения
Идентификатор формы (значение атрибута id элемента <form>).
Значение по умолчанию
Нет.
formaction
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>.
Синтаксис
<input type="submit" formaction="<адрес>" />
Значения
Нет.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>, при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
<input
type="submit"
formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
/>
Значения
application/x-www-form-urlencoded- Вместо пробелов ставится
+, символы вроде русских букв кодируются их шестнадцатеричными значениями (например,%D0%9F%D0%B5%D1%82%D1%8FвместоПетя). multipart/form-data- Данные не кодируются. Это значение применяется при отправке файлов.
text/plain- Пробелы заменяются знаком
+, буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
formmethod
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
<input type="submit" formmethod="get | post" />
Значения
Различают два метода — GET и POST, которые задаются ключевыми словами get и post.
get- Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «
имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ&). Полный адрес к примеру будетhttp://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб. post- Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
Значение по умолчанию
get
formnovalidate
Отменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.
Синтаксис
<input type="submit" formnovalidate />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
<input
type="submit"
formtarget="<имя фрейма> | _blank | _self | _parent | _top"
/>
Значения
В качестве значения используется имя фрейма, заданное атрибутом name. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
_blank- Загружает страницу в новую вкладку браузера.
_self- Загружает страницу в текущую вкладку.
_parent- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как
_self. _top- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как
_self.
Значение по умолчанию
_self
list
Указывает на список вариантов, созданный с помощью элемента <datalist>, которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
<input list="<идентификатор>" />
<datalist>
<option value="Текст1"></option>
<option value="Текст2"></option>
</datalist>
Значения
Имя идентификатора элемента <datalist>.
Значение по умолчанию
Нет.
max
Устанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
<input type="number" max="<число>" />
<input type="range" max="<число>" />
<input type="date" max="<дата>" />
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
maxlength
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
<input type="text" maxlength="<число>" />
<input type="password" maxlength="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
min
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
<input type="number" min="<число>" />
<input type="range" min="<число>" />
<input type="date" min="<дата>" />
Значения
Целое положительное или отрицательное число (для type="number", type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date".
Значение по умолчанию
Нет.
minlength
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
<input type="text" minlength="<число>" />
<input type="password" minlength="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
Нет.
multiple
Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
<input type="file" multiple />
<input type="email" multiple />
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут multiple выключен.
name
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
<input name="<имя>" />
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name.
Значение по умолчанию
Нет.
pattern
Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.[ 0-9]+$
[0-9]{6}\d+(,\d{2})?\d+(\.\d{2})?\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}placeholder
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
<input placeholder="<текст>" />
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
readonly
Когда к элементу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
<input type="text" readonly />
<input type="password" readonly />
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
required
Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Нет.
Значение по умолчанию
По умолчанию атрибут required выключен.
size
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
<input type="text" size="<число>" />
<input type="password" size="<число>" />
Значения
Любое целое положительное число.
Значение по умолчанию
20
src
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
<input type="image" src="<адрес>" />
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
step
Устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
<input type="number" step="<число>" />
<input type="range" step="<число>" />
Значения
Любое целое или дробное число.
Значение по умолчанию
1
type
Сообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email, tel, url:
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
color:
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
range:
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
number:
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
search:
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date, time, datetime:
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
<input
type="button|checkbox|file|hidden|image|password|radio|reset|submit|text"
/>
Значения
Значения type:
button- Кнопка.
checkbox- Флажки. Позволяют выбрать более одного варианта из предложенных.
file- Поле для ввода имени файла, который пересылается на сервер.
hidden- Скрытое поле. Оно никак не отображается на веб-странице.
image- Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password- Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio- Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset- Кнопка для возвращения данных формы в первоначальное значение.
submit- Кнопка для отправки данных формы на сервер.
text- Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
В HTML5 добавлены новые значения:
color- Виджет для выбора цвета.
date- Поле для выбора календарной даты.
datetime- Указание даты и времени.
datetime-local- Указание местной даты и времени.
email- Для адресов электронной почты.
number- Ввод чисел.
range- Ползунок для выбора чисел в указанном диапазоне.
search- Поле для поиска.
tel- Для телефонных номеров.
time- Для времени.
url- Для веб-адресов.
month- Выбор месяца.
week- Выбор недели.
Значение по умолчанию
text
value
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <input>, а значение — атрибутом value.
В зависимости от типа элемента атрибут value выступает в следующей роли:
- для кнопок (
input type="button | reset | submit") устанавливает текстовую надпись на них; - для текстовых полей (
input type="password | text") указывает предварительно введённую строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введённый в атрибутеvalue; - для флажков и переключателей (
input type="checkbox | radio") уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь. - для файлового поля (
input type="file") не оказывает влияние.
Синтаксис
<input value="<текст>" />
Значения
Любая текстовая строка.
Значение по умолчанию
Нет.
Значения ARIA role
<input type=button>—role=button<input type=checkbox>—role=checkbox<input type=email>—role=textbox<input type=image>—role=button<input type=number>—role=spinbutton<input type=radio>—role=radio<input type=range>—role=slider<input type=reset>—role=button<input type=search>—role=searchbox<input type=submit>—role=button<input type=tel>—role=textbox<input type=text>—role=textbox<input type=text, search, tel, url, или email с атрибутом list>—role=combobox<input type=url>—role=textbox
Спецификации
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>INPUT</title>
</head>
<body>
<form name="test" method="post" action="input1.php">
<p>
<b>Ваше имя:</b><br />
<input type="text" size="40" />
</p>
<p>
<b>Каким браузером в основном пользуетесь:</b><br />
<input type="radio" name="browser" value="ie" />
Internet Explorer<br />
<input type="radio" name="browser" value="opera" />
Opera<br />
<input
type="radio"
name="browser"
value="firefox"
/>
Firefox<br />
</p>
<p>
Комментарий<br />
<textarea
name="comment"
cols="40"
rows="3"
></textarea>
</p>
<p>
<input type="submit" value="Отправить" />
<input type="reset" value="Очистить" />
</p>
</form>
</body>
</html>
Ссылки
улучшенные возможности, новые типы полей и атрибуты
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5Создание HTML5-формы
1. Элемент <form>
Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
| Атрибут | Значение / описание |
|---|---|
| accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1">. |
| action | Обязательный атрибут, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение #. Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
| enctype | Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data". Указывается только в случае method="post". application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21. multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
| method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. <form action="action.php" enctype="multipart/form-data" method="post"></form> |
| name | Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros". |
| novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
| target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
2. Группировка элементов формы
Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за открывающим тегом элемента <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:
<form>
<fieldset>
<legend>Контактная информация</legend>
<p><label for="name">Имя <em>*</em></label><input type="text"></p>
<p><label for="email">E-mail</label><input type="email"></p>
</fieldset>
<p><input type="submit" value="Отправить"></p>
</form>| Атрибут | Значение / описание |
|---|---|
| disabled | Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>. |
| form | Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. |
| name | Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id. |
3. Создание полей формы
Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.
| Атрибут | Значение / описание |
|---|---|
| accept | Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file">. Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов. |
| alt | Определяет альтернативный текст для изображений, указывается только для <input type="image">. |
| autocomplete | Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм. |
| autofocus | Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. |
| checked | Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio". |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. |
| formaction | Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы. |
| formenctype | Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Варианты: application/x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +, специальные символы преобразуются в значения ASCII HEX) multipart/form-data — символы не кодируются text/plain — пробелы заменяются на символ +, а специальные символы не кодируются. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса. |
| formnovalidate | Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. |
| formtarget | Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута target формы. _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent – загружает ответ в родительский фрейм _top – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем. |
| height | Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля. |
| list | Является ссылкой на элемент <datalist>, содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. |
| max | Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week. |
| maxlength | Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов. |
| min | Позволяет ограничить допустимый ввод числовых данных минимальным значением. |
| multiple | Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. |
| name | Определяет имя, которое будет использоваться для доступа к элементу <form>, к примеру, в таблицах стилей css. Является аналогом атрибута id. |
| pattern | Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. |
| placeholder | Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). |
| readonly | Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. |
| size | Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password. |
| src | Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">. |
| step | Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). |
| type | button — создает кнопку. |
| checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль | |
| color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. | |
| date — позволяет вводить дату в формате дд.мм.гггг. День рождения: | |
| datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм. День рождения — день и время: | |
| email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail: | |
| file — позволяет загружать файлы с компьютера пользователя. Выберите файл: | |
| hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. | |
| image — создает кнопку, позволяя вместо текста на кнопке вставить изображение. | |
| month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. | |
| number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5): | |
| password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль: | |
| radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец: | |
| range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора | |
| reset — создает кнопку, которая очищает поля формы от введенных пользователем данных. | |
| search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск: | |
| submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки. | |
| text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста. | |
| time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время: | |
| url — поле предназначено для указания URL-адресов. Главная страница: | |
| week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю: | |
| value | Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. |
| width | Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. |
4. Текстовые поля ввода
Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь.
Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает фокус на нужном начальном текстовом поле автоматически. |
| cols | Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки. |
| disabled | Отключает возможность редактирования и копирования содержимого поля. |
| form | Значение атрибута должно быть равно значению атрибута id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. |
| maxlength | Значение атрибута задает максимальное число символов для ввода в поле. |
| name | Задает имя текстового поля. |
| placeholder | Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. |
| readonly | Отключает возможность редактирования содержимого поля. |
| required | Выводит сообщение о том, что данное поле является обязательным для заполнения. |
| rows | Указывает число, которое означает, сколько строк должно отображаться в текстовой области. |
| wrap | Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard, то должно указываться значение атрибута cols. |
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.
Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает автоматический фокус на элементе при загрузке страницы. |
| disabled | Отключает раскрывающийся список. |
| form | Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы. |
| multiple | Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl. |
| name | Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. |
| required | Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. |
| size | Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. |
| Атрибут | Значение / описание |
|---|---|
| disabled | Делает недоступным для выбора элемент списка. |
| label | Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка. |
| selected | Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером. |
| value | Указывает значение, которое будет отправлено на сервер при отправке формы. |
| Атрибут | Значение / описание |
|---|---|
| disabled | Отключает данную группу элементов списка для выбора. |
| label | Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием. |
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.
<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>
<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>| Атрибут | Значение / описание |
|---|---|
| for | Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: <input>, <textarea>, <select>. Значение атрибута содержит идентификатор поля формы. |
7. Кнопки
Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.
Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
| Атрибут | Значение / описание |
|---|---|
| autofocus | Устанавливает фокус на кнопке при загрузке страницы. |
| disabled | Отключает кнопку, делая ее некликабельной. |
| form | Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы. |
| formaction | Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit". Переопределяет значение атрибута action, указанного для элемента <form>. |
| formenctype | Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit". Переопределяет значение атрибута enctype, указанного для элемента <form>. Возможные значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы. multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. text/plain — символы не кодируются, а пробелы заменяются на символ +. |
| formmethod | Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method, указанного для элемента <form>. Указывается только для кнопок типа type="submit". Возможные значения: get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру. |
| formnovalidate | Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit". |
| formtarget | Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit". Переопределяет значение атрибута target, указанного для элемента <form>. _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent — загружает ответ в родительский фрейм _top — загружает ответ во весь экран framename — загружает ответ во фрейм с указанным именем. |
| name | Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript. |
| type | Определяет тип кнопки. Возможные значения: button — кликабельная кнопка reset — кнопка сброса, возвращает первоначальное значение submit — кнопка для отправки данных формы. |
| value | Задает значение по умолчанию, отправляемое при нажатии на кнопку. |
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked, то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.
input (type = number) элемент
Специальные атрибуты
автофокус
Логическое значение, указывающее браузеру установить фокус на этот элемент управления, когда документ завершил загрузку или когда отображается диалоговое окно , в котором находится элемент управления. Если атрибут имеет значение «autofocus» или пустая строка («»), или если он просто присутствует, элемент управления должен получить фокус как можно скорее, после загрузки страницы или диалогового окна .
Пример
Имеющиеся автомобили:
отключен
Логическое значение, указывающее, отключен ли элемент управления. Если атрибут принимает значение «отключен» или пустую строку («»), или если он просто присутствует, элемент управления будет отключен.
Отключенные элементы управления отображаются серым цветом (если они видны), блокируются от взаимодействия с пользователем и, что более важно, их значения (если есть) не отправляются при отправке формы .
Пример
форма
Значение атрибута id формы, с которой связан этот элемент управления.
Этот атрибут является новым в HTML 5 и помогает определять принадлежность элементов управления во вложенных или удаленных формах.
Пример
Выходные:
список
Маркер, соответствующий значению атрибута id списка данных , с которым связан этот элемент управления.Список данных , на который ссылается этот атрибут, предоставит ряд предложений, которые пользователи могут выбрать для автозаполнения элемента управления.
Поддержка браузером datalist не завершена. Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности.
Значения, предоставляемые элементом datalist , должны соответствовать требованиям числовых строк.
Пример
макс.
Максимальное количество, которое может выбрать пользователь.Предполагается, что поддерживающие браузеры запрещают выбор любого числа, большего, чем указанное в этом атрибуте.
Значение, указанное в этом атрибуте, должно соответствовать требованиям числовых строк.
Пример
мин.
Минимальное число, которое может выбрать пользователь.Предполагается, что поддерживающие браузеры запрещают выбор любого числа, меньшего, чем указанное в этом атрибуте.
Значение, указанное в этом атрибуте, должно соответствовать требованиям числовых строк.
Пример
наименование
Имя элемента управления.Это имя будет отправлено браузером агенту обработки вместе с содержимым атрибута value . Оба атрибута вместе будут соответствовать паре имя-значение, которая будет использоваться для обработки данных формы.
В настоящее время значение isindex , ранее использовавшееся особым образом в некоторых браузерах и включенное в стандарт HTML , в этом атрибуте не допускается.
Пример
только чтение
Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если этот атрибут имеет значение «только для чтения» или пустую строку («»), или если он просто присутствует, пользователю не будет разрешено изменять значение в элементе управления.
Хотя этот атрибут предотвращает изменение значения элемента управления, не все взаимодействия блокируются: пользователи по-прежнему смогут выбирать и копировать текст в элементе управления.
Пример
требуется
Логическое значение, указывающее, можно ли оставить этот элемент пустым или нет.Если этот атрибут имеет значение «required» или пустую строку («»), или если он просто присутствует, пользователь должен будет заполнить элемент управления, чтобы иметь возможность отправить форму .
Если элемент управления с присутствующим атрибутом required оставлен пустым, поддерживающие браузеры выдадут ошибку при отправке и немедленно отменит процесс.
Браузер поддерживает атрибут Требуется не полностью. Авторам, возможно, придется полагаться на скрипты, чтобы обеспечить кроссбраузерность этой функциональности.
Пример
шаг
Число, которое будет использоваться в качестве промежутка между допустимым значением и следующим. Наличие этого атрибута уменьшает количество вариантов выбора, которые будет у пользователя, за счет ограничения выбора промежуточных значений.
Специальное значение any снимает ограничение по умолчанию на гранулярность элемента управления и позволяет пользователям вводить значения, которые они хотят.
Чтобы избежать неожиданного поведения, авторы должны указать номер в качестве начального шага. Это можно сделать через атрибуты min и значение . Когда присутствуют оба, атрибут мин. имеет приоритет.
Значение, указанное в этом атрибуте, должно соответствовать требованиям числовых строк.
Пример
тип
Значение, указывающее тип поля, которое представляет этот элемент.Есть двадцать два возможных значения (без учета регистра):
- скрытый: скрытый элемент управления, используемый для отправки информации на сервер, обычно управляемый сценариями.
- текст: элемент управления, используемый для ввода однострочного фрагмента текста.
- поиск: то же, что и текст, но для целей поиска.
- tel: контрольная панель для ввода телефонного номера.
- url: текстовое поле, используемое для ввода единственного и абсолютного URL .
- электронная почта: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты.
- пароль: текстовое поле для редактирования паролей, где символы представлены точками. Дата
- : элемент управления для ввода определенной даты.
- месяц: элемент управления для ввода определенного месяца.
- неделя: элемент управления для ввода определенной недели.
- время: элемент управления для ввода определенного времени.
- datetime-local: элемент управления для ввода определенной местной даты и времени.
- число: элемент управления для ввода числа.
- диапазон: элемент управления для ввода одного или двух чисел внутри диапазона.
- color: элемент управления для ввода цвета. Флажок
- : элемент управления для ввода логического значения (истина / ложь). Радио
- : элемент управления, используемый для выбора одного варианта из множества.
- файл: элемент управления, используемый для загрузки файлов на сервер.
- submit: кнопка, используемая для отправки формы. Изображение
- : то же, что и submit, но с возможностью отображения в виде изображения вместо использования кнопки по умолчанию.
- сброс: кнопка, используемая для сброса элементов управления формы до значений по умолчанию. Кнопка
- : кнопка, не связанная с действием по умолчанию.
Если этот атрибут отсутствует, элемент ведет себя так, как если бы он имел значение «текст».
Пример
значение
Начальное значение для элемента управления, которое будет установлено при загрузке страницы и при нажатии кнопки сброса.
Значение, указанное в этом атрибуте, должно соответствовать требованиям числовых строк.
Пример
HTML5 Tutorial — Тип ввода: Число
В HTML5 у вас может быть поле ввода числа в качестве счетчика, у которого есть стрелки вверх и вниз справа от текстовое поле для увеличения или уменьшения числового значения.См. Галерею прядильщиков, как показано ниже
На момент написания статьи веб-браузеры, которые выполняют эту работу в Windows, — это Google Chrome и Opera.
| Браузеры | Визуализировать ввод «Число» как Spinner |
|---|---|
| IE 9 Beta | |
| Firefox 13 | |
| Safari 5 | 0, но не в Windows OS|
| Chrome 8 | ✓ |
| Opera 11 | ✓ |
Давайте устроим реальную демонстрацию, чтобы вы могли прикоснуться к ней самостоятельно.
Как часто вы смотрите фильм в неделю:
Если вы используете Google Chrome 8, попробуйте ввести нечисловое значение, например «a», «B», «?», Chrome не позволяет вам этого делать, но позволяет вводить «е»? Почему это так? потому что «e» может быть частью числа с плавающей запятой. Например: 5,34 e + 12
С другой стороны, Opera позволяет вводить все, что угодно.
Мы рассмотрим некоторые важные атрибуты, которые мы можем иметь во входных данных Number Type ().
| Атрибуты | Описания |
|---|---|
| значение | Значение — это значение по умолчанию для поля ввода при первой загрузке страницы. Это общий атрибут для элемента независимо от того, к какому типу вы относитесь. с использованием. |
| мин. | Очевидно, минимальное значение вашего числа.Я должен был указать минимальное значение 0 для моей демонстрации, так как отрицательное число не имеет смысла для количества фильмов, просмотренных за неделю. |
| макс | По-видимому, это наибольшее число введенного числа. |
| шаг | Коэффициент масштабирования шага, значение по умолчанию — 1, если этот атрибут не указан. |
Давайте проведем еще одну демонстрацию, если вы компания-разработчик программного обеспечения и ваше программное обеспечение продается по количеству пользовательских лицензий минимальное количество продаваемых лицензий — 5, каждое увеличение — 5, максимальное лицензий на одного покупателя, которые вы можете продать, составляет 30.
Количество пользовательских лицензий:
Если вы используете javascript для увеличения или уменьшения значения, вот решение.
- spinner.stepUp (x) — x — значение, которое вы хотите увеличить в поле.
- spinner.stepDown (x) — x — значение, которое вы хотите уменьшить в поле.
- spinner.valueAsNumber — возвращает значение ввода в виде числа с плавающей запятой вместо строки.
Счетчик с относительно крошечной стрелкой вверх / вниз может быть не очень удобен для использования с сенсорным экраном. Веб-браузеры iPhone (iOS 4.2) и Android 2.2 отображают как обычное текстовое поле, но предоставить пользователям цифровую клавиатуру для ввода данных.
Экран iPhone (iOS 4.2) слева и HTC Desire (Android 2.2) справа.
Почему GOV.Команда UK Design System изменила тип ввода для чисел
.Чтобы предоставить пользователям качественные услуги, правительственным организациям обычно требуется сбор данных. Множество данных. Команда Дизайн-системы GOV.UK публикует шаблоны и компоненты, которые позволяют пользователям легко и доступно вводить свои данные. Последнее, что мы хотим сделать, — это создать препятствия для пользователей, выполняющих задачу, и вынудить их найти альтернативный метод использования службы, например, позвонить по горячей линии.
Числа — одна из наиболее часто запрашиваемых частей данных, обычно используемых в датах.Из исследований пользователей мы знаем, что некоторые пользователи предпочитают цифровую клавиатуру с большими кнопками (напоминающую клавиатуру телефона) для ввода чисел на мобильном телефоне. До сих пор компонент ввода даты GOV.UK Design System использовал HTML-элемент для обеспечения этой цифровой клавиатуры, когда пользователь вводит даты.
Однако недавно мы отказались от на и опубликовал новое руководство о том, как запрашивать номера у пользователей.
Хотя у нас есть исследования пользователей за 2017 год, которые не выявили каких-либо серьезных проблем с , мы выявили много проблем с удобством использования этого типа ввода.
Мы обнаружили, что :
Разумно предположить, что можно использовать для сбора любых числовых данных: в конце концов, он содержит слово «number».Однако примечание в спецификации HTML гласит, что «не подходит для ввода, который состоит только из чисел, но не является, строго говоря, числом».
Это означает, что можно использовать только для увеличиваемых чисел, таких как даты или количество людей в семье. Использование для сбора чисел, которые не могут быть увеличены, может вызвать проблемы с браузерами, проверяющими их таким образом.
Например, браузеры пытаются округлить большие числа при увеличении или уменьшении (нажатие клавиши вверх или вниз), а в случае очень больших чисел они преобразуются в экспоненциальное представление.
Chrome 79.0: type = number отображает большие числа в экспоненциальном формате, если пользователь нажимает на клавиатуре стрелки вверх или вниз
После того, как число проанализировано браузером как экспонента, как показано выше, и возможно по ошибке, действие не может быть отменено пользователем.Это могло сбить с толку пользователей.
Если пользователи заходят на ваш сайт с помощью более старых версий Safari, также может быть проблематичным при сборе значений из 16 и более цифр. В Safari 6 браузер округляет число, когда пользователь покидает поле, поэтому ошибки с клавишами «вверх» или «вниз» не требуются.
Safari 6 округляет последнюю цифру при размытии
Safari 5.1 пытается сделать значения, содержащие не менее 16 цифр, более удобочитаемыми, вставляя запятые.
Safari 5.1 пытается сделать число более удобочитаемым при размытии
3. Письма В спецификации HTML указано, что при использовании «пользовательские агенты не должны позволять пользователю устанавливать значение в непустую строку, которая не является допустимым числом с плавающей запятой». В версиях Chrome для Интернета и Android это реализовано путем молчаливого отказа от ввода всех букв, кроме буквы «e».
Это означает, что пользователям не сообщается, какой тип символов принимает , а вспомогательные технологии не предупреждают пользователя о том, что введенные им символы были автоматически отброшены.
Пользователи могут случайно увеличить или уменьшить число, используя колесо прокрутки мыши или жест прокрутки на трекпаде. Эта функция может быть полезна при сборе счетных данных, но неэффективна при вводе таких данных, как номера паспортов.
Решение Использование допускает определенное разделение между тем, как пользователь вводит данные («режим ввода»), и тем, что ожидает браузер. пользовательский ввод, который должен содержать (тип равен числу), и, возможно, то, как он пытается его проверить.
До 2019 года поддержка браузеров, особенно на мобильных устройствах, была недостаточной, чтобы мы могли с уверенностью развернуть ее вместо использования . Однако атрибут inputmode теперь поддерживается всеми мобильными браузерами, в которых мы тестируем.
Мы по-прежнему включаем атрибут шаблона для обратной совместимости со старыми устройствами iOS.
Мы обновили компонент ввода даты и остальные соответствующие шаблоны.
Мы также опубликовали руководство, чтобы помочь пользователям понять, как собирать числа в формах HTML.
Наконец, мы предложили изменить руководство по спецификации HTML для перекрестной ссылки inputmode при использовании с содержанием, которое состоит только из чисел.
Вы можете заглянуть в список невыполненных работ по системе дизайна GOV.UK, чтобы узнать, над чем еще мы работаем.
Если вы хотите узнать больше о подобных изменениях, послушайте февральский выпуск подкаста GDS.
Schema Explorer | Адаптивные карты
{
"$ schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"версия": "1.0",
"тело": [
{
"type": "Input.ChoiceSet",
"id": "input1",
"style": "компактный",
"isMultiSelect": ложь,
"label": "По умолчанию Input.ChoiceSet label (компактный)",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
},
{
"type": "Ввод.ChoiceSet ",
"id": "input2",
"style": "компактный",
"isMultiSelect": ложь,
"label": "Обязательный Input.ChoiceSet label (компактный)",
"isRequired": правда,
"errorMessage": "Обязательный ввод",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "input3",
"style": "расширенный",
"isMultiSelect": ложь,
"label": "Ввод по умолчанию.Ярлык ChoiceSet (развернутый) ",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "input4",
"style": "расширенный",
"isMultiSelect": ложь,
"label": "Обязательный Input.ChoiceSet label (развернутый)",
"isRequired": правда,
"errorMessage": "Обязательный ввод",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
},
{
"type": "Ввод.ChoiceSet ",
"id": "input5",
"style": "расширенный",
"isMultiSelect": истина,
"label": "Метка Input.ChoiceSet по умолчанию (развернутая, множественный выбор)",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
},
{
"type": "Input.ChoiceSet",
"id": "input6",
"style": "расширенный",
"isMultiSelect": истина,
"isRequired": правда,
"label": "Обязательный ввод.ChoiceSet label (развернутый, множественный выбор) ",
"errorMessage": "Обязательный ввод",
"выбор": [
{
"title": "Вариант 1",
"значение": "1"
},
{
"title": "Вариант 2",
"значение": "2"
}
]
}
],
"действия": [
{
"type": "Action.Submit",
"title": "ОК"
}
]
}
Поля ввода начальной загрузки — примеры и руководство
Текст
Текст формы на уровне блока или на уровне строки может быть создан с помощью .текст формы .
Связывание текста формы с элементами управления формы
Текст формы должен быть явно связан с элементом управления формы, к которому он относится, используя ария описывается атрибутом . Это гарантирует, что вспомогательные технологии, такие как
программы чтения с экрана — озвучат этот текст формы, когда пользователь фокусируется или входит в элемент управления.
Текст формы под полями может быть оформлен с помощью .form-text . Если элемент блочного уровня
будет использоваться, верхнее поле добавлено для упрощения расстояния от полей ввода выше.
<ввод
type = "текст"
aria-describeby = "textExample1"
/>
Мы никогда никому не передадим вашу электронную почту.
Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то , или что-то еще) с не более чем .форма-текст класс.
<ввод
type = "пароль"
aria-describeby = "textExample2"
/>
Должен состоять из 8-20 символов.
Вспомогательный текст
Добавьте класс form-helper в div для создания вспомогательного текста.
Пример помощника
типов ввода HTML-форм — javatpoint
В HTML является важным элементом HTML-формы. Атрибут «type» элемента input может быть различных типов, который определяет информационное поле. Например, дает текстовое поле.
Ниже приводится список всех типов элемента
HTML.| type = «» | Описание |
|---|---|
| текст | Определяет однострочное поле ввода текста |
| пароль | Определяет однострочное поле ввода пароля |
| представить | Определяет кнопку отправки для отправки формы на сервер |
| сброс | Определяет кнопку сброса для сброса всех значений в форме. |
| радио | Определяет переключатель, который позволяет выбрать один вариант. |
| флажок | Определяет флажки, которые позволяют выбрать несколько вариантов формы. |
| кнопка | Определяет простую кнопку, которую можно запрограммировать для выполнения задачи по событию. |
| файл | Определяет выбор файла из хранилища устройства. |
| изображение | Определяет графическую кнопку отправки. |
HTML5 добавил новые типы в элемент . Ниже приведен список типов элементов HTML5
.| type = «» | Описание |
|---|---|
| цвет | Определяет поле ввода определенного цвета. |
| дата | Определяет поле ввода для выбора даты. |
| локальная дата и время | Определяет поле ввода для ввода даты без часового пояса. |
| электронная почта | Определяет поле ввода для ввода адреса электронной почты. |
| мес | Определяет элемент управления с месяцем и годом без часового пояса. |
| номер | Определяет поле ввода для ввода числа. |
| url | Определяет поле для ввода URL |
| неделя | Определяет поле для ввода даты с неделей и годом без часового пояса. |
| поиск | Определяет однострочное текстовое поле для ввода строки поиска. |
| тел | Определяет поле ввода для ввода телефонного номера. |
Ниже приводится описание типов элемента с примерами.
1.
:элемента типа «текст» используются для определения однострочного текстового поля ввода.
Пример:
<форма>
Примечание. Максимальная длина по умолчанию — 20 символов.
Проверить это сейчасВыход:
Ввод «текстового» типа:
Поле «текст» определяет однострочное текстовое поле ввода.
2.
:Элемент типа «пароль» позволяет пользователю безопасно вводить пароль на веб-странице. Введенный текст в поле пароля преобразован в «*» или «.», Чтобы его не мог прочитать другой пользователь.
Пример:
<форма>
Выход:
Введите «пароль» типа:
Поле «пароль» определяет поле ввода пароля одной строки для безопасного ввода пароля.
3.
:Элемент типа «submit» определяет кнопку отправки для отправки формы на сервер при возникновении события «click».
Пример:
Проверить это сейчасВыход:
Тип ввода «submit»:
После нажатия кнопки отправки форма будет отправлена на сервер и страница будет перенаправлена на действие . Значение .Мы узнаем об атрибуте «действие» в следующих главах.
.4.
:«Сброс» типа также определяется как кнопка, но когда пользователь выполняет событие щелчка, он по умолчанию сбрасывает все введенные значения.
Пример:
<форма>
Выход:
Тип входа «сброс»:
Попробуйте изменить входные значения идентификатора пользователя и пароля, затем, когда вы нажмете на сброс, поля ввода будут сброшены до значений по умолчанию.
5.
:Тип «radio» определяет радиокнопки, которые позволяют выбирать вариант между набором связанных опций. Одновременно можно выбрать только один вариант переключателя.
Пример:
<форма>
Пожалуйста, выберите свой любимый цвет
Красныйсиний
зеленый
розовый
Проверить это сейчас
Выход:
6.
:«Флажок» типа отображается в виде квадратных полей, которые можно отмечать или снимать, чтобы выбрать один из вариантов.
Примечание. «Переключатели» похожи на флажки, но есть важное различие между обоими типами: переключатели позволяют пользователю выбирать только один вариант за раз, тогда как флажок позволяет пользователю выбирать от нуля до нескольких вариантов за один раз. время.
Пример:
<форма>
Пожалуйста, выберите свой любимый вид спорта
КрикетТеннис
Футбол
Бейсбол
Бадминтон
Проверить это сейчас
Выход:
Введите «флажок» типа
Регистрационная форма
7.
:«Кнопка» типа определяет простую кнопку, которую можно запрограммировать для функционального управления любым событием, например событием щелчка.
Примечание. В основном работает с JavaScript.
Пример:
<форма>
Проверить это сейчасВыход:
Тип входа «кнопка».
Нажмите кнопку, чтобы увидеть результат:
Примечание. В приведенном выше примере мы использовали «предупреждение» JS, о котором вы узнаете в нашем руководстве по JS.Используется для отображения всплывающего окна.
8.
:Элемент типа «файл» используется для выбора одного или нескольких файлов из памяти пользовательского устройства. После того, как вы выберете файл и после отправки, этот файл можно загрузить на сервер с помощью JS-кода и файлового API.
Пример:
<форма>
Проверить это сейчасВыход:
Входной «файловый» тип.
Мы можем выбрать любой тип файла, пока не укажем его! Выбранный файл появится рядом с опцией
«выбрать файл».9.
:Тип «изображение» используется для представления кнопки отправки в форме изображения.
Пример:
Введите тип «изображения».
Мы можем создать изображение как кнопку отправки
<форма>HTML5 недавно добавлен элемент типов
1.
:Тип «цвет» используется для определения поля ввода, которое содержит цвет. Это позволяет пользователю указывать цвет с помощью визуального цветового интерфейса в браузере.
Примечание. Тип «цвет» поддерживает значение цвета только в шестнадцатеричном формате, а значение по умолчанию — # 000000 (черный).
Пример:
<форма> Выберите свой любимый цвет:
Upclick
Щелкните вниз
Выход:
Входные «цветные» типы:
Примечание: Значение по умолчанию для типа «цвет» — # 000000 (черный). Он поддерживает только значение цвета в шестнадцатеричном формате.
2.
:Элемент типа «date» создает поле ввода, которое позволяет пользователю вводить дату в заданном формате. Пользователь может ввести дату с помощью текстового поля или интерфейса выбора даты.
Пример:
<форма> Выберите дату начала и окончания:
Дата начала:
Дата окончания:
Выход:
3.
:Элемент типа «datetime-local» создает поле ввода, которое позволяет пользователю выбрать дату, а также местное время в часах и минутах без информации о часовом поясе.
Пример:
<форма> <метка> Выберите расписание встречи:
Выберите дату и время:
Выход:
Ввод типа «datetime-local»
4.
:Тип «email» создает поле ввода, которое позволяет пользователю вводить адрес электронной почты с проверкой шаблона. Множественные атрибуты позволяют пользователю вводить более одного адреса электронной почты.
Пример:
<форма>
Примечание. Пользователь также может ввести несколько адресов электронной почты, разделяя их запятыми или пробелами, как показано ниже:
Проверить это сейчасВыход:
5.
:Тип «месяц» создает поле ввода, которое позволяет пользователю легко вводить месяц и год в формате «ММ, ГГГГ», где ММ определяет значение месяца, а ГГГГ определяет значение года. Новый
Пример:
<форма>
Проверить это сейчасВыход:
Тип ввода «месяц»:
6.
:Номер типа элемента создает поле ввода, которое позволяет пользователю вводить числовое значение. Вы также можете ограничить ввод минимального и максимального значения, используя атрибут min и max.
Пример:
<форма>
Проверить это сейчасВыход:
Ввод типа «число»
Примечание: Позволяет ввести номер в диапазоне 50-80.Если вы хотите ввести номер, отличный от диапазона, отобразится ошибка.
7.
:Элемент типа «url» создает поле ввода, которое позволяет пользователю вводить URL-адрес.
Пример:
<форма>
Выход:
Введите тип «url»
8.
:Неделя типа создает поле ввода, которое позволяет пользователю выбрать неделю и год из раскрывающегося календаря без часового пояса.
Пример:
<форма>
Выход:
9.
:Тип «search» создает поле ввода, которое позволяет пользователю ввести строку поиска. Они функционально симметричны типу ввода текста, но могут иметь другой стиль.
Пример:
<форма>
Проверить это сейчасВыход:
Вход типа «поиск»
10.
:Элемент типа? Tel? создает поле ввода для ввода телефонного номера. Тип «tel» не имеет проверки по умолчанию, такой как адрес электронной почты, потому что шаблон номера телефона может варьироваться во всем мире.
Пример:
<форма>
Выход:
Вход «тел» типа
Примечание: Здесь мы используем два атрибута: «шаблон» и «обязательный», которые позволяют пользователю вводить число в заданном формате, а также необходимо ввести число в поле ввода.
Где они сейчас? — Smashing Magazine
Краткое резюме ↬ HTML5 представил тринадцать новых типов ввода форм, значительно увеличив количество различных полей, которые веб-дизайнеры и разработчики могли добавлять в наши формы.Все эти новые типы требуют, чтобы браузеры поддерживали их, и внедрение происходит медленнее, чем хотелось бы некоторым из нас. Каково состояние этих типов полей в 2019 году? Что мы можем использовать, а чего следует избегать?
Одной из отличительных черт заголовков HTML5 для многих дизайнеров и разработчиков было добавление ряда новых типов ввода формы, которые можно было использовать. В течение многих лет мы ограничивались использованием однострочного ввода текста ( type = "text" ) и накладывали на JavaScript и пользовательские инструкции, чтобы попытаться точно захватить достоверные данные разных типов через это одно простое поле.
HTML5 принес с собой новые значения атрибута типа , которые позволили нам быть более конкретными в отношении типов данных, которые нам нужны для захвата через поле, с обещанием, что браузер затем предоставит интерфейс и проверку, необходимые для принуждать пользователя к точному заполнению поля.
От URL-адресов до электронных писем и от полей поиска до дат, мы надеялись, что вместо того, чтобы писать громоздкий JavaScript, чтобы попытаться проверить эти поля, мы могли бы просто предоставить браузеру сделать эту тяжелую работу за нас.Более того, добавив то, что он знает о контексте пользователя (тип устройства, тип взаимодействия, часовые пояса и т. Д.), Браузер сможет гораздо лучше настроить интерфейс для удовлетворения потребностей пользователя, которые мы когда-либо могли как авторы страницы.
Рекомендуемая литература : UX и HTML5: давайте поможем пользователям заполнить вашу мобильную форму
Наличие новых элементов в спецификации — это одно, но на самом деле это не слишком много значит, если браузеры, которые использует наша аудитория, не поддерживают эти функции.Эти новые значения атрибута type имели большое преимущество в виде возврата к type = "text" , если браузер не имел поддержки, но это также могло произойти за счет устранения императива производителей браузеров, когда он появился. внедрять эти новые типы в свои продукты.
Это начало 2019 года, и HTML5 является текущей версией HTML уже более четырех лет. Какие из этих новых типов были реализованы, какие мы можем использовать и чего следует избегать?
- Поля поиска
- Поля телефонных номеров
- Поля URL
- Поля электронной почты
- Числовые поля
- Поля диапазонов
- Цветные поля
- Поля даты
Давайте разберемся с TypeScript и рассмотрим, как его правильно использовать.В своем предстоящем онлайн-семинаре «Мастер-класс TypeScript» Стефан Баумгартнер подробно расскажет о системах типов и о том, как их правильно использовать при написании JavaScript. В сети, а в сети и в прямом эфире . 5–19 августа 2021 г.
Перейти в мастерскую ↬
1. Поля поиска
Ввод type = "search" предназначен для использования в полях поиска. Функционально они очень похожи на базовые текстовые поля, но наличие специального типа позволяет браузеру применять различные стили.Это особенно полезно, если в операционной системе пользователя задан стиль для полей поиска, поскольку это позволяет браузеру настраивать стили для полей поиска на веб-страницах в соответствии с ними.
В спецификации указано, что разница между search и text носит чисто стилистический характер, поэтому, возможно, лучше этого избежать, если вы все равно собираетесь изменить стиль поля с помощью CSS. Похоже, что его использование не имеет смыслового преимущества.
Могу ли я использовать поиск по вводу? Данные о поддержке функции ввода-поиска в основных браузерах от caniuse.com.
Рекомендация
Используйте type = "search" , если вы собираетесь оставить стиль поля поиска на усмотрение браузера.
2. Поля телефонных номеров
Вход type = "tel" используется для ввода телефонных номеров. Они похожи на уникальные имена пользователей, используемые Whatsapp. Если вы не уверены, спросите бабушку и дедушку.
На международном уровне телефонные номера принимают множество различных форматов как по техническим причинам, так и по причинам локализации.По этой причине ввод tel не пытается проверить формат телефонного номера. Вы можете использовать связанные инструменты проверки, такие как атрибут шаблона в теге или метод setCustomValidity () JavaScript для принудительного применения формата, если это необходимо.
В настольных браузерах использование телефонных полей не оказывает большого влияния. Однако на устройствах с виртуальными клавиатурами они могут быть действительно полезны. Например, в iOS при фокусировке ввода на поле телефона появляется цифровая клавиатура, готовая к вводу числа.Кроме того, срабатывают механизмы автозаполнения устройства и предлагают номера телефонов, которые можно автоматически заполнить одним нажатием.
Могу ли я использовать input-email-tel-url? Данные о поддержке функции input-email-tel-url в основных браузерах от caniuse.com.
Рекомендация
Используйте type = "tel" для любых полей номера телефона. Он очень полезен там, где он реализован, и предоставляется бесплатно, когда это не так.
3. Поля URL-адреса
Поле type = "url" может использоваться для захвата URL-адресов.Вы можете использовать это, например, когда просите пользователя ввести адрес своего веб-сайта для бизнес-справочника. Любопытно, что поле URL-адреса занимает только полные абсолютных URL-адресов. Невозможно записать только доменное имя или, например, только путь. Это действительно ограничивает его полезность в некоторых отношениях, поскольку я полагаю, что разработчики CMS и веб-приложений нашли бы множество применений для поля, которое принимает и проверяет относительные пути.
Хотя это будет действительный абсолютный URL:
https: // twitter.com / drewm
Оба они не пройдут проверку поля:
smashingmagazine.com
/ 2019/01 / CSS-несколько столбцов макета-мультикол /
Кажется, что невозможно указать разные части URL-адреса, но это то, что у нас есть. Поддержка браузеров по всем направлениям довольно велика, с устройствами виртуальной клавиатуры, предлагающими некоторую настройку для ввода URL. iOS настраивает свою клавиатуру на . , / и кнопка автозаполнения для общих TLD, таких как .com , а для моего региона — .co.uk . Это хороший пример того, что браузер может предложить более разумный выбор, чем мы, веб-разработчики.
Могу ли я использовать input-email-tel-url? Данные о поддержке функции input-email-tel-url в основных браузерах от caniuse.com.
Рекомендация
Используйте type = "url" всякий раз, когда вам нужно получить полный абсолютный URL. Браузерная поддержка прекрасна, но помните, что она не подходит для отдельных компонентов URL.
4. Поля электронной почты
Возможно, одна из наиболее часто используемых новых опций — это type = "email" для адресов электронной почты. Как и в случае с телефонными номерами и URL-адресами, устройства с виртуальными клавиатурами настраивают клавиши (включая такие вещи, как кнопки @ ) и включают автозаполнение из своей базы данных контактов.
для настольных ПК тоже используют это, а Safari в macOS также включает автозаполнение полей электронной почты на основе данных в системном приложении «Контакты».
Адреса электронной почты часто выглядят так, как будто они имеют очень простой формат, но на самом деле вариации делают их довольно сложными. Наивная попытка проверки адресов электронной почты может привести к тому, что совершенно правильный адрес будет помечен как недопустимый, поэтому здорово иметь возможность использовать более сложные и проверенные методы проверки браузера для проверки формата.
Полезно добавить несколько атрибутов в поля электронной почты для сбора списка адресов электронной почты. В этом случае каждый адрес электронной почты в списке проверяется индивидуально.
Могу ли я использовать input-email-tel-url? Данные о поддержке функции input-email-tel-url в основных браузерах от caniuse.com.
Рекомендация
По возможности используйте type = "email" для полей адреса электронной почты.
5.Числовые поля
Поле type = "number" предназначено для числовых значений и имеет несколько очень полезных атрибутов в виде min , max и step . Допустимое значение для числового поля должно быть числом с плавающей запятой между любым минимальным и максимальным значением, заданным атрибутами min и max .
Если шаг установлен, то действительное значение делится на значение шага.
Допустимый ввод для вышеуказанного поля: 10 , 15 , 20 , 25 и 30 , любое другое значение будет отклонено.
Браузер поддерживает широкую поддержку, опять же, виртуальные клавиатуры часто по умолчанию используют числовой режим ввода для ввода значений.
Некоторые настольные браузеры (включая Chrome, Firefox и Safari, но не Edge) добавляют кнопки-переключатели для смещения значений вверх и вниз на значение , шаг , или, если шаг не указан, шагом по умолчанию будет 1 в каждой реализации.
Могу ли я использовать входной номер? Данные о поддержке функции input-number в основных браузерах от caniuse.com.
Рекомендация
Используйте type = "number" для любых чисел с плавающей запятой, так как он широко поддерживается и может помочь предотвратить случайный ввод.
6. Поля диапазонов
Менее очевиден в использовании, так как некоторые другие типы type = "range" можно рассматривать как альтернативу type = "number" , когда пользователя не волнует точное значение.
принимают и часто используют одни и те же атрибуты min , max и step в качестве числовых полей, и браузеры почти всегда отображают это как графический ползунок.Пользователь не обязательно видит точное значение, которое он устанавливает.
Range могут быть полезны для таких вопросов в формах, как «Какова вероятность, что вы порекомендуете это другу?» с «Вероятно» на одном конце и «Маловероятно» на другом. Пользователь может переместить ползунок туда, где, по его мнению, выражает его мнение, и под капотом, который передается в виде числового значения, которое вы можете хранить и обрабатывать.
Браузер поддерживает хорошее, хотя внешний вид зависит от реализации.
Могу ли я использовать диапазон ввода? Данные о поддержке функции диапазона ввода в основных браузерах с сайта caniuse.com.
Рекомендация
Использование type = "range" может быть немного нишевым, но поддержка хорошая, и ползунок обеспечивает удобный метод ввода там, где это необходимо.
7. Цветовые поля
Поле type = "color" предназначено для захвата цветов RGB в шестнадцатеричной системе счисления, например #aabbcc . Спецификация HTML называет это «контролем цветовой гаммы», имея в виду, что браузер должен предоставлять удобное средство выбора цвета в некотором роде.
Некоторые браузеры предоставляют это, особенно Chrome и Firefox, оба предоставляют доступ к системному палитре цветов с помощью небольшого образца цвета.
Ни IE, ни Safari не предоставляют здесь никакой поддержки, оставляя пользователю самому решать, что он должен вводить семизначное шестнадцатеричное число самостоятельно.
ПоляColor могут найти применение в темах для персонализации и при использовании CMS, но если пользователи не обладают достаточными техническими знаниями для работы с шестнадцатеричными цветовыми кодами, может быть лучше не полагаться на браузер, предоставляющий для них приятный интерфейс.
Могу ли я использовать цвет ввода? Данные о поддержке функции ввода цвета в основных браузерах с сайта caniuse.com.
Рекомендация
Если вы не знаете, что ваши пользователи будут рады вернуться к вводу шестнадцатеричных цветовых кодов, лучше не полагаться на браузеры, поддерживающие type = "color" .
8. Поля даты
HTML5 представил ряд различных значений типа для создания входных данных для даты и времени.К ним относятся дата , время , datetime-local , месяц и неделя .
На первый взгляд, они кажутся ниспосланными небесами, поскольку сбор дат в форме — сложная задача как для разработчика, так и для пользователя, и они нужны довольно часто.
Обещание здесь состоит в том, что новые типы полей позволяют браузеру предоставлять стандартизированный, доступный и согласованный пользовательский интерфейс для легкого захвата даты и времени от пользователя.Это действительно важно, поскольку форматы даты и времени различаются в зависимости от языка и локали, и поэтому удобный интерфейс браузера, который переводит простой в использовании выбор даты в однозначный технический формат даты, действительно звучит как идеальное решение. .
Таким образом, допустимый ввод для поля type = "date" представляет собой однозначное значение год-месяц-день , например 2019-01-16 . Разработчикам это нравится, поскольку они в значительной степени соответствуют формату даты ISO 8601, который используется в большинстве технических контекстов.К сожалению, немногие обычные люди используют этот формат даты и вряд ли дойдут до него, когда его попросят указать дату в одном пустом текстовом поле.
И, конечно же, одно пустое текстовое поле — это то, что предоставляется пользователю, если его браузер не предоставляет пользовательский интерфейс для выбора дат. В таких случаях пользователю становится очень сложно ввести допустимое значение даты, если он не знаком с требуемым форматом или ввод не снабжен четкими инструкциями.
Однако многие браузеры предоставляют хороший пользовательский интерфейс для выбора дат. В Firefox действительно отличный выбор даты, а в Chrome и Edge также есть неплохие интерфейсы. Однако нет поддержки ни в старом IE, ни в Safari, что может быть проблемой.
Могу ли я использовать input-datetime? Данные о поддержке функции input-datetime в основных браузерах с caniuse.com.
Рекомендация
Несмотря на удобство работы, режим отказа type = "date" и связанные с ним типы даты и времени очень плохи.Это делает его рискованным выбором, из-за которого пользователи могут столкнуться с трудностями при соблюдении критериев проверки.
Заключение
За четыре года, прошедшие с тех пор, как спецификация HTML5 стала рекомендацией, многое изменилось в браузере. Поддержка новых типов ввода довольно сильна, особенно в мобильных устройствах с виртуальной клавиатурой, таких как планшеты и телефоны. В большинстве случаев эти входы безопасны в использовании и предоставляют пользователю дополнительную полезность.
Есть несколько примечательных исключений, худшее из которых — поля даты и времени, которые не только лишены утилит, но и имеют более неоднородную поддержку браузеров.Когда поддержка недоступна, резервный режим этих полей не работает. В этих случаях, возможно, лучше всего придерживаться решений на основе JavaScript для постепенного улучшения базовых полей ввода type = "text" .
Если вы хотите узнать больше, я настоятельно рекомендую веб-документацию MDN по этим типам полей и, как всегда, спецификацию W3C.