Тег <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>

Результат

inputexample1

Атрибуты

Основным атрибутом, определяющим тип поля ввода, является 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>:

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

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

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

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

chrome edge firefox safari opera

Практикуйте свои знания

Что из перечисленного ниже является атрибутами тега <input> в HTML?
Считаете ли это полезным?