HTML-тег <input>

Тег <input> используется для создания интерактивных элементов управления в форме.

Элемент <input> может варьироваться в зависимости от указанного атрибута type. От этого зависит как он будет выглядеть и как использоваться. Чаще всего его используют при создании полей ввода информации.

Тип:	Inline
Контент:	Нет. Это пустой элемент
Открывающий тег:	Обязательный
Закрывающий тег:	Запрещен
Версия:	HTML 2, 3.2, 4, 4.01, 5

Синтаксис

Базовый синтаксис тега <input> выглядит следующим образом:

HTML: <input>; XHTML: <input />

Примеры написания кода тега <input>:

<form action="action.php" method="post">
    <label for="first-name">Имя:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Отправить">
    <input type="reset" name="Сброс">
</form>

Используйте элемент HTML <label>, чтобы определить заголовки для элементов <input>. Это сделает форму более понятной для пользователя.

Специальные атрибуты тега

В следующей таблице приведены атрибуты, которые относятся к тегу <input>:

Атрибут	Значение	Описание
`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`	Определяет тип элемента управления для создания. См. руководство по HTML Forms, HTML5 New Input Types, чтобы узнать больше об элементах управления вводом.
`accept`	file-extension content-type `audio/` `video/` `image/*`	Определяет типы файлов, которые принимает сервер (только для `type="file"`).
`align`	`left` `right` `top` `middle` `bottom`	Определяет выравнивание входного изображения (для `type="image"`).
`alt`	text	Определяет альтернативный текст для использования, когда изображение недоступно (для `type="image"`).
`autocomplete`	`on` `off`	Указывает, включена ли функция автозаполнения браузера для элемента `<input>`.
`autofocus`	`autofocus`	Этот логический атрибут указывает, что элемент ввода должен автоматически получать фокус при загрузке документа.
`checked`	`checked`	Этот логический атрибут указывает, что элемент `<input>` выбран по умолчанию (для `type="radio"` или `type="checkbox"`).
`disabled`	`disabled`	Этот логический атрибут отключает элемент `<input>` для пользовательского ввода или взаимодействия.
`form`	form-id	Определяет элемент `<form>`, с которой связан элемент `<input>`.
`formaction`	URL	Определяет URL-адрес программы, которая обрабатывает информацию, представленную полем `<input>` (для `type="submit"` и `type="image"`).
`formenctype`	`application/x-www-form-urlencoded` `multipart/form-data` `text/plain`	Указывает, как данные формы должны быть закодированы при отправке данных формы на сервер (для `type="submit"` и `type="image"`).
`formmethod`	`get` `post`	Определяет метод HTTP, который браузер будет использовать для отправки данных формы (для `type="submit"` и `type="image"`).
`formnovalidate`	`formnovalidate`	Этот логический атрибут указывает, что элемент управления формы не должен проверяться при его отправке (для `type="submit"` и `type="image"`).
`formtarget`	`_blank` `_self` `_parent` `_top`	Указывает цель для отображения ответа, полученного после отправки формы (для `type="submit"` и `type="image"`)
`height`	pixels	Определяет высоту изображения, отображаемого в виде кнопки (только для `type="image"`).
`list`	datalist-id	Относится к списку предопределенных опций, предлагаемых пользователю. Значение должно быть `id` тега `<datalist>` на той же странице.
`max`	number date-time	Определяет максимальное значение для элемента `<input>`, которое не должно быть меньше допустимого минимального значения `min`.
`maxlength`	number	Определяет максимальное количество символов, которое пользователь может ввести в поле `<input>`.
`min`	number date-time	Определяет минимальное значение для элемента `<input>`, которое не должно быть больше допустимого максимумального значения `max`.
`minlength`	number	Указывает минимальное количество символов, обязательное для ввода пользователем в поле `<input>`.
`multiple`	`multiple`	Этот логический атрибут указывает, может ли пользователь ввести более одного значения.
`name`	text	Присваивает имя элементу `<input>`.
`pattern`	regexp	Определяет регулярное выражение, по которому проверяется значение элемента в поле `<input>`.
`placeholder`	text	Предоставляет пользователю подсказку о том, что можно ввести в элемент `<input>`. Текст заполнителя не должен содержать разрывов строк.
`readonly`	`readonly`	Этот логический атрибут указывает, что пользователь не может изменить значение элемента `<input>`.
`required`	`required`	Этот логический атрибут указывает, что пользователь должен заполнить `<input>` перед отправкой формы.
`size`	number	Устанавливает начальную ширину, в символах, элемента `<input>`. Если не указан, по умолчанию используется значение `20`.
`src`	URL	Определяет расположение изображения для использования в качестве кнопки отправки (для `type="image"`).
`step`	number date-time	Работает с атрибутами `min` и `max` для ограничения приращений, с помощью которых можно установить числовое значение или значение даты-времени.
`value`	text	Определяет начальное значение элемента `<input>`.
`width`	pixels	Определяет ширину изображения, отображаемого в виде кнопки (только для `type="image"`).