HTML тег <input>

❮ Назад Вперед ❯

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="getform.php" method="get">
      Имя: <input type="text" name="first_name" />
      Фамилия: <input type="text" name="last_name" />
      E-Mail: <input type="email" name="user_email" />
      <input type="submit" value="Отправить" />
    </form>
  </body>
</html>

Попробуйте сами!

Результат

Атрибуты

Основным атрибутом, определяющим тип поля ввода, является type. Если атрибут отсутствует, то значением по умолчанию является “text”.

Атрибут	Значение	Описание
accept	audio/* video/* image/* MIME_type	Указывает типы файлов, которые вы можете отправить через поле загрузки файлов. (Используется вместе с атрибутом type="file")
align	left right top middle bottom	Определяет тип выравнивания изображения. (Используется только с изображениями). Не поддерживается в HTML5.
alt	text	Устанавливает альтернативный текст для изображения. (Используется только с изображениями).
autocomplete	on off	Включает/отключает автозаполнение. Новый атрибут в HTML5.
autofocus	autofocus	Указывает, что поле формы должно получить фокус после загрузки страницы. Новый атрибут в HTML5.
checked	checked	Указывает, что элемент должен быть предварительно выбран при загрузке страницы (Используется только для <input type = "checkbox"> и <input type = "radio">).
disabled	disabled	Указывает, что элемент должен быть недоступен для взаимодействия с пользователем.
form	form_id	Указывает форму (определенную элементом <form>) к которой относится элемент управления. Значением является идентификатор формы (id) в этом же документе. Новый атрибут в HTML5.
formaction	URL	Задаeт адрес, куда будут пересылаться данные формы при нажатии на кнопку. (Используется только для <input type = "image"> и <input type = "submit">).
formenctype	application/x-www-form- urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы перед отправкой на сервер. (Используется только для <input type = "image"> и <input type = "submit">) все символы кодируются перед отправкой (значение по умолчанию). Символы не кодируются пробелы заменяются знаком "+", но символы не кодируются.
formmethod		Указывает метод HTTP запроса, который будет использован при отправке данных формы. (Используется только для <input type = "image"> и <input type = "submit">)
	get	Передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya)
	post	Браузер устанавливает связь с сервером и посылает данные для обработки.
formnovalidate	formnovalidate	Указывает, что не нужно проверять данные на корректность. (Используется только для <input type = "submit">).
formtarget		Указывает, где показывать ответ после отправки формы. (Используется только для <input type = "image"> и <input type = "submit">).
	blank	открывает ответ в новом окне.
	self	открывает ответ в текущем окне.
	parent	открывает ответ в родительском фрейме.
	top	открывает ответ во всю ширину окна.
heigh	pixels	Определяет высоту элемента (Используется только для <input type = "image">)
inputmode	verbatim latin latin-name latin-prose full-width-latin kana katakana numeric tel email url	Определяет раскладку клавиатуры.
list	datalist_id	Определяет список вариантов, из которых пользователь может выбрать. В качестве значения для атрибута указывается идентификатор элемента <datalist>. З
ma	number date	Устанавливает верхнее значение для ввода числа или даты.
maxlength	number	Определяет максимальное количество символов, которое пользователь может ввести.
min	number date	Определяет минимальное значение для ввода числа или даты.
multiple	multiple	Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).
name	text	Определяет имя элемента. (используется для идентификации формы).
pattern	regexp	Задает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы (Только для элементов управления text, search, tel, url, email и password).
placeholder	text	Определяет короткую подсказку, которая описывает ожидаемое значение для поля ввода. Пользователь видит подсказку в поле ввода. Она исчезает, когда пользователь начинает вводить данные или когда поле получает фокус.
readonly	readonly	Определяет, что поле ввода доступно только для чтения. Пользователь не может вносить изменения.
required	required	Указывает, что поле ввода должно быть заполнено перед отправкой формы.
selectionDirection	forward backward none	Устанавливает направление в котором происходит выбор.
size	number	Устанавливает ширину текстового поля. (Только для text, search, tel, url, email и password). начение по умолчанию 20 символов.
src	URL	Указывает путь к изображению, которое используется в качестве кнопки “отправить”. (Используется только для <input type = "image"> )
step	number	Задает шаг приращения (величину инкремента) для числовых полей. Используется с атрибутами min и max которые определяют минимальное и максимальное значение.
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	Определяет тип поля ввода.
value	text	Устанавливает значение элемента.
width	width	Определяет ширину элемента (только для <input type = "image">).

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

Значения атрибута type

Значение	Описание
button	Определяет активную кнопку.
checkbox	Устанавливают флажки (пользователь может выбрать более одного варианта из предложенных).
color	Определяет палитру цветов (пользователь может выбрать значения цветов в шестнадцатеричном формате).
date	Задает поле для ввода календарной даты.
datetime	Задает поле для ввода даты и времени.
datetime-local	Задает поле для ввода даты и времени без часового пояса.
e-mail	Задает поле для ввода адреса электронной почты.
file	Задает элемент управления с кнопкой "Обзор", нажав на которую можно выбрать и загрузить файл.
hidden	Определяет скрытое поле ввода. Пользователю оно не видно.
image	Указывает, что вместо кнопки для отправки данных на сервер используется изображение. Путь к изображению указывается атрибутом src. Также могут быть использованы атрибут alt для указания альтернативного текста, атрибуты heigh и width для указания высоты и ширины изображения.
month	Определяет поле для выбора месяца, после чего данные будут вводиться в виде год-месяц (например: 2018-07).
number	Определяет поле для ввода чисел.
password	Определяет поле для ввода пароля (вводимые символы отображаются звездочками, точками или другими знаками).
radio	Создает радио-кнопки (при выборе одной радио-кнопки все остальные становятся неактивными)
range	Создает ползунок для выбора чисел в указанном диапазоне. По умолчанию диапазон - от 0 до 100. Диапазон чисел задается атрибутами min и max.
reset	Определяет кнопку для сброса информации.
search	Создает текстовое поле для поиска.
submit	Создает кнопку отправки данных формы (кнопка”отправить”).
text	Создает однострочное текстовое поле.
time	Определяет числовое поле для ввода времени в 24-часовом формате (например, 13:45).
url	Создает поле для ввода URL.
week	Создает поле для выбора недели, после чего данные вводятся в формате год-неделя (например: 2018-W25).

Как добавить стиль к тегу <input> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <input>:

CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
CSS свойство font-size задает размер щрифта.
CSS свойство font-weight устанавливает насыщенность шрифта.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <input>:

CSS свойство color определяет цвет контента и оформления текста.
CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <input>:

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

Другие свойства для тега <input>:

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.