HTML тег <input>

HTML теги

Значение и применение

Элемент <input> является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу.

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<input>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
acceptfile_extension
audio/*
image/*
video/*
media_type
Задает типы файлов, которые сервер принимает (файлы, которые могут быть загружены для отправки на сервер). Атрибут используется только для <input type = "file">.
alignleft
right
top
middle
bottom
Не поддерживается в HTML5.
Определяет выравнивание ввода изображения (только для <input type = "image">).
alttextОпределяет альтернативный текст для изображений (только для <input type = "image">).
autocompletehtml5on
off
tokens
Указывает должен ли элемент иметь автозаполнение (заполнение автоматически завершается в браузере). По умолчанию автозаполнение включено.
autofocushtml5autofocusЛогический атрибут, который указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы.
checkedcheckedЯвляется логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">).
disableddisabledЯвляется логическим атрибутом и указывает, что элемент должен быть отключен (недоступен для взаимодействия с пользователем).
formhtml5form_idЗадает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formactionhtml5URLУказывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">).
formenctypehtml5application/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">).
formmethodhtml5get
post
Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">).
formnovalidatehtml5formnovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <input type = "submit">).
formtargethtml5_blank
_self
_parent
_top
framename
При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit">.
heighthtml5pixelsЗадает высоту элемента (только для <input type = "image">).
listhtml5datalist_idОпределяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist>.
maxhtml5number
date
Определяет максимальное значение для элемента (значение может быть как числовым, так и в виде даты).
maxlengthnumberУказывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).
minhtml5number
date
Определяет минимальное значение для элемента (значение может быть как числовым, так и в виде даты).
multiplehtml5multipleУказывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">). Является логическим атрибутом.
nametextЗадает имя для элемента <input>.
patternhtml5regexpЗадает регулярное выражение, которое сверяется со значением введёным в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).
placeholderhtml5textУказывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url).
readonlyreadonlyЛогический атрибут, который указывает, что поле ввода доступно только для чтения.
requiredhtml5requiredЛогический атрибут, который указывает, что поле ввода должно быть заполнено перед отправкой формы.
sizenumberОпределяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.
srcURLЗадаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">).
stephtml5numberОпределяет размер "шага" для поля ввод. Например, если значение атрибута 2, то значение элемента управления будет иметь шаг 2 и увеличиваться, или уменьшаться на 2 (..-4,-2,0,2, 4..). Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию 1.
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Поле ввода принимает вид, в зависимости от применённого значения.
valuetextЗадает значение для элемента.
widthhtml5pixelsЗадает ширину элемента (только для <input type = "image">).

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование элементов <input></title>
</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname"value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex"value =  "male" checked>
			Женщина <input type = "radio" name = "sex"value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

Результат нашего примера в браузере:

Пример использования элементов <input>
Пример использования элементов <input>.

Рассмотрим следующий пример, в котором рассмотрим использование атрибута checked элемента <input>.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования атрибута checked HTML тега <input></title>
<style>
input:checked { /* псевдокласс :checked выбирает элементы input с атрибутом checked*/
width: 25px; /* устанавливает ширину если элемент выбран */
height: 25px; /* устанавливает высоту если элемент выбран */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}
input:not(:checked) { /* псевдокласс отрицания :not  выбирает все элементы input без атрибута checked (которые не выбрал псевдокласс :checked) */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}
</style>
</head>
	<body>
		<form>
			<input type = "radio"  name = "first" checked>Мужчина<br> /* элемент предопределен */
			<input type = "radio"  name = "first">Женщина<br>
			<input type = "radio"  name = "first" disabled>Собака<br> /* элемент должен быть отключен */
			<input type = "checkbox">Старше 16
			<input type = "checkbox" checked>Младше 16 /* элемент предопределен */
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом радио-кнопка (type = "radio") и флажок (type = "checkbox") атрибут checked. Для одного элемента мы указали атрибут disabled, который не дает нам сделать выбор (элемент отключен).

Кроме того мы создали стиль для элементов, которые выбраны (checked), используя псевдокласс :checkedcss3 и для элементов, которые не выбраны, используя псевдокласс отрицания :notcss3 и псевдокласс :checkedcss3 в качестве селектора.

Результат нашего примера:

Пример использования атрибута checked и disabled HTML тега <input> (предварительный выбор элемента и отключение элемента).
Пример использования атрибута checked и disabled HTML тега <input> (предварительный выбор элемента и отключение элемента).

Рассмотрим пример в котором мы зададим URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы, тип кодирования и метод HTTP внутри элемента <input>, а не <form>.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута formenctype HTML тега <input></title>
	</head>
	<body>
		<form id = "subscribeForm"> <!-- определяем id для нашей формы -->
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться" formaction = "script.php" formenctype = "multipart/form-data"  formmethod = "post"> <!-- определяем элемент управления для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), глобальным атрибутом id указали для неё идентификатор. Внутри формы мы поместили элементы управления <input>, которые позволяют пользователю ввести логин, адрес электронной почты и отправить нашу форму. Для элемента управления, предназначенного для отправки формы (type = "submit") мы указали:

Результат нашего примера:

Пример использования атрибутов formenctype, formmethod и formaction HTML тега <input>.
Пример использования атрибутов formenctype, formmethod и formaction HTML тега <input>.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлено 18 новых атрибутов и один удалён (align).

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML теги