Тег HTML <input>
Тег <input> используется внутри элемента <form> и определяет поля для ввода пользователем данных. Тип поля (текст, флажок, переключатель, поле пароля и т. д.) задаётся значением атрибута type. Тег не содержит текстового содержимого, он включает только атрибуты.
Он относится к группе тегов, называемой элементами формы.
Чтобы связать текст с конкретным элементом, используется тег <label>, который задаёт для него текстовую подпись.
Синтаксис
Тег <input> является пустым, то есть закрывающий тег не требуется. Но в XHTML тег (<input>) должен быть закрыт (<input/>).
Пример тега HTML <input>:
Пример тега HTML <input>
html
<!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>
html
<!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>Результат
Атрибуты
Основным атрибутом, определяющим тип поля ввода, является 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 | verbatim latin latin-name latin-prose full-width-latin kana katakana numeric tel email url | Определяет раскладку клавиатуры. |
| 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 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). |
Практика
What can be achieved with the HTML <input> tag?