HTML тег <input>
Тег <input> используется в HTML-формах для определения поля ввода данных пользователем. Описание тега, атрибуты и примеры использования.
Тег <input> используется внутри элемента <form> и определяет поля для ввода данных пользователем. Тип поля — текстовое поле, флажок, переключатель, поле пароля, выбор файла и многое другое — определяется значением атрибута type. Элемент является пустым: он не содержит текстового содержимого и несёт только атрибуты.
<input> относится к группе элементов формы и является одним из наиболее используемых тегов на интерактивных страницах. Практически каждая форма входа, строка поиска и форма регистрации построены из одного или нескольких элементов <input>.
Чтобы подписать поле так, чтобы пользователи (и вспомогательные технологии) понимали его назначение, свяжите его с тегом <label>. Чтобы превратить ввод в действие — отправку или сброс формы — используйте <input> типа submit/reset или элемент <button>.
На этой странице рассматриваются синтаксис, все значения type с запускаемыми примерами, передача пар name/value при отправке, связывание с меткой и встроенная валидация HTML.
Синтаксис
Тег <input> является пустым, поэтому закрывающий тег не требуется. Но в XHTML тег (<input>) должен быть закрыт (<input/>).
Пример HTML тега <input>:
Пример HTML тега <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Пример HTML тега <input> с HTML тегом <label>:
Пример HTML тега <input> с HTML тегом <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Связывание метки с полем ввода
Пустое поле ввода не даёт пользователям никакой подсказки о том, что вводить. Тег <label> исправляет это и делает больше, чем просто отображает текст:
- Программы чтения с экрана объявляют метку, когда поле ввода получает фокус, поэтому пользователи вспомогательных технологий знают, что ожидается от поля.
- Область клика увеличивается. Нажатие на текст метки переводит фокус на поле ввода (и переключает флажок или переключатель). Это значительно улучшает удобство использования маленьких флажков.
Существует два способа связать метку с полем ввода:
1. Явный — for совпадает с id. Атрибут for метки должен быть равен атрибуту id поля ввода:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Неявный — оберните поле ввода внутри метки. Атрибуты id/for не нужны:
<label>
Username:
<input type="text" name="username" />
</label>Предпочитайте явную форму, когда ваш CSS-макет разделяет метку и поле. В любом случае, дайте каждому полю ввода метку — атрибут placeholder не является заменой, потому что подсказка исчезает, как только пользователь начинает вводить текст.
Атрибуты
Основной атрибут, определяющий тип поля ввода, — это type. Если атрибут отсутствует, значение по умолчанию — "text".
| Атрибут | Значение | Описание |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Указывает типы файлов, которые можно отправить через поле загрузки файла. (Используется с type="file"). |
| align | left right top middle bottom | Определяет тип выравнивания изображения. (Используется только с изображениями). Не поддерживается в HTML5. |
| alt | text | Определяет альтернативный текст для изображения. (Используется только с изображениями). |
| autocomplete | on off | Включает/отключает автодополнение. Новый атрибут в HTML5. |
| autofocus | autofocus | Указывает, что поле формы должно получить фокус после загрузки страницы. Новый атрибут в HTML5. |
| checked | checked | Указывает, что элемент должен быть предварительно выбран при загрузке страницы. (Используется только для <input type = "checkbox"> и <input type = "radio">). |
| disabled | disabled | Указывает, что элемент должен быть недоступен для взаимодействия с пользователем. |
| form | form_id | Указывает форму (заданную элементом <form>) для элемента управления. Значение — идентификатор формы (id) в том же документе. Новый атрибут в HTML5. |
| formaction | URL | Указывает адрес, на который будут отправлены данные формы при нажатии на кнопку. (Используется только для <input type = "image"> и <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только с <input type="image"> и <input type="submit">). Значения: application/x-www-form-urlencoded (по умолчанию, кодирует все символы), multipart/form-data (без кодирования, используется для загрузки файлов), text/plain (пробелы заменяются на +, другие символы не кодируются). |
| formmethod | get post | Указывает метод HTTP-запроса, который будет использоваться при отправке данных формы. (Используется только для <input type = "image"> и <input type = "submit">). get отправляет данные формы в адресной строке. post отправляет данные на сервер для обработки. |
| formnovalidate | formnovalidate | Указывает, что проверка данных на корректность не требуется. (Используется только для <input type = "submit">). |
| formtarget | _blank _self _parent _top | Указывает, где отображать ответ после отправки формы. (Используется только для <input type = "image"> и <input type = "submit">). |
| height | pixels | Определяет высоту элемента (используется только для <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Подсказывает, какой тип виртуальной клавиатуры показать на сенсорных устройствах (например, numeric показывает цифровую клавиатуру). |
| list | datalist_id | Определяет список вариантов, из которых пользователь может выбрать. Значение атрибута — это id элемента <datalist>. |
| max | number date | Задаёт верхнее значение для ввода числа или даты. |
| maxlength | number | Определяет максимальное количество символов, которые пользователь может ввести. |
| min | number date | Задаёт минимальное значение для ввода числа или даты. |
| multiple | multiple | Указывает, что пользователь может ввести более одного значения в элемент (только для <input type = "file"> и <input type = "email">). |
| name | text | Определяет имя элемента. (Используется для идентификации формы). |
| pattern | regular expression | Указывает регулярное выражение, которому должны соответствовать данные, введённые в поле формы. (Только для элементов управления text, search, tel, url, email и password). |
| placeholder | text | Определяет краткую подсказку, описывающую ожидаемое значение поля ввода. Пользователь видит подсказку в поле ввода. Она исчезает, когда пользователь начинает вводить данные или когда поле получает фокус. |
| readonly | readonly | Указывает, что поле ввода доступно только для чтения. Пользователь не может вносить изменения. |
| required | required | Указывает, что поле ввода должно быть заполнено перед отправкой формы. |
| size | number | Определяет видимую ширину текстового поля в символах. (Только для text, search, tel, url, email и password). По умолчанию — 20 символов. |
| src | URL | Указывает путь к изображению, используемому в качестве кнопки отправки. (Используется только для <input type = "image">). |
| step | number | Задаёт шаг приращения для числовых полей. Используется совместно с атрибутами min и max, которые определяют минимальное и максимальное значения. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Определяет тип поля ввода. |
| value | text | Определяет значение элемента. |
| width | width | Определяет ширину элемента (только для <input type = "image">). |
Тег <input> также поддерживает глобальные атрибуты и атрибуты событий.
Значения атрибута type
| Значение | Описание |
|---|---|
| button | Определяет активную кнопку. |
| checkbox | Флажок (пользователь может выбрать несколько вариантов). |
| color | Указывает палитру цветов (пользователь может выбирать значения цвета в шестнадцатеричном формате). |
| date | Определяет поле ввода для выбора даты из календаря. |
| datetime (deprecated) | Определяет поле ввода для даты и времени. (Устарело в HTML5, вместо него используйте datetime-local.) |
| datetime-local | Определяет поле ввода для даты и времени без указания часового пояса. |
| Определяет поле ввода для e-mail. | |
| file | Создаёт элемент управления с кнопкой обзора, нажав которую можно выбрать и загрузить файл. |
| hidden | Определяет скрытое поле ввода. Оно не видно пользователю. |
| image | Указывает, что вместо кнопки для отправки данных на сервер используется изображение. Путь к изображению задаётся атрибутом src. Также можно использовать атрибут alt для указания альтернативного текста, а атрибуты height и width — для задания высоты и ширины изображения. |
| month | Определяет поле выбора месяца, после чего данные будут отображены в формате год-месяц (например: 2018-07). |
| number | Определяет поле ввода для чисел. |
| password | Определяет поле для ввода пароля (введённые символы отображаются в виде звёздочек, точек или других символов). |
| radio | Создаёт переключатель (при выборе одного переключателя все остальные сбрасываются). |
| range | Создаёт ползунок для выбора числа в заданном диапазоне. Диапазон по умолчанию — от 0 до 100. Диапазон чисел задаётся атрибутами min и max. |
| reset | Определяет кнопку для сброса данных формы. |
| search | Создаёт текстовое поле для поиска. |
| submit | Создаёт кнопку отправки данных формы (кнопка «отправить»). |
| text | Создаёт однострочное текстовое поле. |
| time | Задаёт числовое поле для ввода времени в 24-часовом формате (например, 13:45). |
| url | Создаёт поле ввода для URL. |
| week | Создаёт поле выбора недели, после чего данные будут отображены в формате год-неделя (например: 2018-W25). |
Примеры распространённых типов полей ввода
Значение type меняет как внешний вид поля ввода, так и его поведение. Вот те, которые используются чаще всего.
Флажки и группировка с помощью name
Флажок позволяет пользователю включить или выключить параметр. Используйте checked для предварительного выбора. Когда несколько флажков имеют одинаковое значение name, они образуют группу, и каждый отмеченный флажок отправляется отдельно как name=value:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>При отправке с отмеченными Cheese и Onion будет отправлено topping=cheese&topping=onion.
Переключатели (общий name)
Переключатели с одинаковым значением name являются взаимоисключающими — выбор одного сбрасывает все остальные. Всегда устанавливайте value для каждого, чтобы сервер знал, какой вариант был выбран:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Загрузка файла
type="file" добавляет кнопку обзора. Добавьте accept для фильтрации файлов в диалоговом окне и multiple, чтобы разрешить выбор нескольких файлов:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Число с атрибутами min, max и step
type="number" показывает числовое поле со стрелками прокрутки. min/max ограничивают диапазон, а step задаёт шаг приращения (используйте step="0.01" для денежных значений, step="any" для любых десятичных чисел):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Ползунок диапазона
type="range" — это ползунок для приблизительного значения, которое пользователю не нужно видеть точно. Он использует те же атрибуты min, max и step:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Пароль
type="password" маскирует введённые символы. Значение по-прежнему отправляется в открытом виде, поэтому форму следует отправлять через HTTPS:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Как передаются name и value
При отправке формы браузер формирует строку запроса из пар name=value от её элементов управления. Роль value зависит от типа поля ввода:
- Текстовые поля (
text,email,url,password,number,search,tel):value— это текст по умолчанию, отображаемый в поле; то, что вводит пользователь, заменяет его и отправляется. - Переключатели и флажки:
value— это данные, отправляемые только когда элемент управления отмечен. Неотмеченный флажок не отправляет ничего. Именно поэтому каждый вариант должен иметь собственныйvalue. - Submit и button:
value— это текст на кнопке. Именованная кнопка отправки также отправляет свою паруname=value, что позволяет серверу определить, какая кнопка была нажата.
Поле ввода без атрибута name никогда не отправляется — оно по-прежнему может быть полезно для клиентских сценариев, но сервер его никогда не увидит.
Валидация формы
Браузеры могут проверять поля ввода до отправки формы без использования JavaScript. Если поле не проходит проверку, браузер блокирует отправку и показывает сообщение. Основные инструменты:
required— поле не должно быть пустым.type="email"/type="url"— значение должно быть синтаксически корректным email или URL.pattern— регулярное выражение, которому должно соответствовать значение (работает с text, search, tel, url, email, password).min/max/step— ограничения диапазона для числовых полей и дат.minlength/maxlength— ограничения длины строки.
Этот пример объединяет их. Попробуйте отправить пустую форму, а затем с некорректными данными:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Чтобы пропустить эту встроенную проверку для конкретной кнопки отправки, добавьте formnovalidate. Для стилизации поля через CSS псевдоклассы :valid, :invalid и :required соответствуют состоянию валидации. Подробнее об организации форм и их отправке см. тег <form>.