Тег <input>
Синтаксис
<input>
Описание
Тег <input> (от англ. input — ввод) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом тег предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Тег <input> не нужно закрывать.
Внимание!
Тег нужно размещать в контейнере <form>, для создания формы на веб-странице.
Атрибуты, которые можно использовать в теге <input>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.
Атрибуты
| Атрибут | Значение | Описание |
| accept | file_extension audio/* image/* video/* media_type |
Задает типы файлов, которые сервер принимает (файлы, которые могут быть загружены для отправки на сервер). Атрибут используется только для <input type = "file"> |
| align | left right top middle bottom |
Определяет выравнивание ввода изображения (только для <input type = "image">). Не поддерживается в HTML5 |
| alt | текст | Определяет альтернативный текст для изображений (только для <input type = "image">) |
| autocomplete | on off tokens |
Указывает должен ли элемент иметь автозаполнение (заполнение автоматически завершается в браузере). По умолчанию автозаполнение включено |
| autofocus | autofocus | Логический атрибут, который указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы |
| checked | checked | Является логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">) |
| disabled | disabled | Является логическим атрибутом и указывает, что элемент должен быть отключен (недоступен для взаимодействия с пользователем) |
| form | id формы |
Задает форму (тег <form>) к которой элемент принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе |
| formaction | URL-адрес | Указывает URL-файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">) |
| formmethod | get post |
Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">) |
| formnovalidate | formnovalidate | Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <input type = "submit">) |
| formtarget | _blank _self _parent _top name iframe |
При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self, которое отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit"> Чтобы вывести ответ в iframe, укажите его атрибут name |
| height | px | Задает высоту элемента (только для <input type = "image">) |
| list | id datalist |
Определяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist> |
| max | number date |
Определяет максимальное значение для элемента (значение может быть как числовым, так и в виде даты) |
| maxlength | number |
Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются) |
| min | number date |
Определяет минимальное значение для элемента (значение может быть как числовым, так и в виде даты) |
| multiple | multiple |
Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">). Является логическим атрибутом |
| name | текст | Задает имя для элемента <input> |
| pattern | regexp |
Задает регулярное выражение, которое сверяется со значением введённым в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются) |
| placeholder | текст |
Указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url) |
| readonly | readonly | Логический атрибут, который указывает, что поле ввода доступно только для чтения |
| required | required | Логический атрибут, который указывает, что поле ввода обязательно должно быть заполнено перед отправкой формы |
| size | number |
Определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию: 20 символов |
| src | URL-адрес | Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">) |
| step | number |
Определяет размер "шага" для поля ввод. Например, если значение атрибута 2, то значение элемента управления будет иметь шаг 2 и увеличиваться, или уменьшаться на 2 (..-4,-2,0,2, 4..). Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию: 1 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Поле ввода принимает вид, в зависимости от применённого значения |
| value | текст | Задает значение для элемента |
| width | px | Задает ширину элемента (только для <input type = "image">) |
Пример
HTML-код:
Отображение в браузере:
Параметры CSS по умолчанию
Нет.
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <input> | Да | Да | Да | Да | Да |
