Тег <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").

Глобальные атрибуты

Как и все другие HTML-теги, тег <input> поддерживает все глобальные атрибуты в HTML5.

Атрибуты для событий

Тег <input> так же поддерживает атрибуты событий в HTML5.

Поддержка браузеров

Тег <input> поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.