Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег input HTML

Тег input HTML

HTML - тег <input> определяет поле ввода, в которое пользователь может вводить данные.

Тег <input> - синтаксис и код

Тег <input> пуст, что означает, что закрывающий тег не требуется. Но в XHTML тег (<input>) должен быть закрыт (<input/>).

Пример формы с применением HTML-тега <input>:

<form action="/form/submit" method="get">
  <input type="email" name="user_email" placeholder="Введите ваш email" />
  <input type="submit" value="Отправить" />
</form>

Определение и использование

HTML - тег <input> используется внутри элемента <form> и определяет поля для пользовательского ввода;
Input принадлежит к группе тегов, называемой элементами формы;
Тип поля (текст, флажок, переключатель, поле пароля и т. д.) определяется значением атрибута type;
Тег не имеет текстового содержимого, он содержит только атрибуты.

Существуют следующие типы ввода:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (значение по умолчанию)
<input type="time">
<input type="url">
<input type="week">

✪ Рекомендация: чтобы связать текст с определенным элементом, используйте тег <label>, который устанавливает для него текстовую метку.

★ Примечание: элемент input является самым важным элементом формы и может отображаться несколькими способами, в зависимости от атрибута type. Всегда используйте этот тег для определения меток для: <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file"> и <input type="password">

Поддержка <input> браузерами

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Атрибут	Значение	Описание
accept	file_extension audio/* video/* image/* media_type	Указывает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type="file")
alt	text	Указывает альтернативный текст для изображений (только для type="image")
autocomplete	on off	Указывает, должно ли в форме быть включено или выключено автозаполнение для элемента <input>
autofocus	autofocus	Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы
checked	checked	Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type="checkbox" или type="radio")
dirname	inputname.dir	Указывает что при отправке формы также будет отправлено направление текста поля ввода
disabled	disabled	Указывает, что элемент <input> должен быть отключен
form	form_id	Указывает форму, к которой принадлежит элемент <input>
formaction	URL	Указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type="submit" и type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Указывает, как данные формы должны быть закодированы при отправке на сервер (для type="submit" и type="image")
formmethod	get post	Определяет метод HTTP для отправки данных на URL-адрес действия (для type="submit" и type="image")
formnovalidate	formnovalidate	Определяет, что элементы формы не должны проверяться при отправке
formtarget	f_blank _self _parent _top framename	Указывает, где отображать ответ, полученный после отправки формы (для type="submit" и type="image")
height	pixels	Указывает высоту элемента <input> (только для type="image")
list	datalist_id	Относится к элементу <datalist>, который содержит предварительно определенные параметры для элемента <input>
max	number date	Указывает максимальное значение для элемента <input>
maxlength	number	Указывает максимальное количество символов, разрешенное в элементе <input>
min	number date	Указывает минимальное значение для элемента <input>
minlength	number	Указывает минимальное количество символов, необходимое в элементе <input>
multiple	multiple	Указывает, что пользователь может ввести более одного значения в элемент <input>
name	text	Указывает имя элемента <input>
pattern	regexp	Указывает регулярное выражение, по которому проверяется значение элемента <input>
placeholder	text	Указывает короткую подсказку, описывающую ожидаемое значение элемента <input>
popovertarget	element_id	Указывает, какой элемент всплывающего окна вызывать (только для type="button")
popovertargetaction	hide show toggle	Указывает, что происходит с элементом всплывающего окна при нажатии кнопки (только для type="button")
readonly	readonly	Указывает, что поле ввода доступно только для чтения
required	required	Указывает, что поле ввода должно быть заполнено перед отправкой формы
size	number	Указывает ширину в символах элемента <input>
src	URL	Указывает URL-адрес изображения, которое будет использоваться в качестве кнопки отправки (только для type="image")
step	number any	Указывает интервал между допустимыми числами в поле ввода
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Указывает тип элемента <input> для отображения
value	text	Указывает значение элемента <input>
width	pixels	Указывает ширину элемента <input> (только для type="image")

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

Тег <input> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

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

Настройки CSS по умолчанию

Отсутствуют.

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Поделиться ссылкой