HTML тег <input>

Элемент <input> (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации.

Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу. Это могут быть разнообразные кнопки, поля ввода текста, пароля или имени файла, переключатели, флажки и т.д.

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

Примечание: Для определения метки для элемента <input> используется элемент <label>.

Примечание: Тег <input> не может содержать какой-либо контент, он может содержать только атрибуты.

Синтаксис

<input type="...">

Закрывающий тег

Не требуется.

Атрибуты

type

Основной атрибут, определяет тип элемента ввода. Если атрибут не указан, то по умолчанию используется значение "text".
Возможные значения:

button – определяет активную кнопку с надписью.
checkbox – определяет элементы управления флажки.
color – генерирует палитру цветов, давая возможность пользователям выбирать значения цветов в шестнадцатеричном формате.
date – определяет поле для ввода календарной даты (год, месяц, день).
datetime – определяет поле для ввода даты и времени.
datetime-local – определяет элемент управления датой и временем (год, месяц, день, час, минуты, секунды и доли секунды (без часового пояса)).
email – определяет поле для адреса электронной почты.
file – определяет элемент управления с кнопкой "Обзор", для выбора и загрузки файлов.
hidden – определяет скрытое поле ввода (не отображается на Web-странице).
image – определяет изображение, как кнопку для отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
month – позволяет выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца (например: 2017-07).
number – определяет поле для ввода чисел.
password – определяет поле для ввода пароля (замаскированные символы).
radio – создает радио-кнопки, которые являются взаимоисключающими, если выбрать одну радио-кнопку, то все остальные становятся неактивными. Атрибут checked указывает, что вариант выбран по умолчанию.
range – создает ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:

min = 1
max = 100
value = min + ( max - min ) / 2, или min , если max < min
step = 1

reset – создает кнопку сброса данных формы в первоначальное состояние.
search – определяет текстовое поле для ввода строки поиска.
submit – определяет кнопку "Отправить" для отправки данных формы на сервер.
tel – определяет поле для ввода телефонного номера.
text – определяет однострочное текстовое поле (ширина по умолчанию составляет 20 символов).
time – определяет поле для ввода времени в 24-часовом формате, например 17:30.
url – определяет поле для ввода URL-адреса.
week – позволяет выбрать одну неделю, после чего обеспечит ввод данных в формате года и недели (например: 2017-W15).

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип text.

accept

Устанавливает типы/форматы файлов, которые можно прикреплять к форме (отправлять на сервер). Атрибут используется только для <input type = "file">.

alignУстарел

Определяет выравнивание ввода изображения (только для <input type = "image">).

alt

Альтернативный текст для кнопки с изображением.

autocompleteHTML5

Включает или отключает автозаполнение.

autofocusHTML5

Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы.

borderУстарел

Толщина рамки вокруг изображения.

checked

Указывает, что элемент должен быть предварительно выбран при загрузке страницы (только для <input type = "checkbox"> и <input type = "radio">).

dirnameHTML5

Параметр, который передаёт на сервер направление текста.

disabled

Блокирует доступ и изменение элемента.

formHTML5

Задает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

formactionHTML5

Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <input type = "image"> и <input type = "submit">).

formenctypeHTML5

Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <input type = "image"> и <input type = "submit">).

formmethodHTML5

Определяет метод HTTP для отправки данных (только для <input type = "image"> и <input type = "submit">).

formnovalidateHTML5

Отменяет встроенную проверку данных на корректность (только для <input type = "submit">).

formtargetHTML5

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы. По умолчанию установлено значение _self - отображает ответ в текущем окне. Атрибут используется только только для <input type = "image"> и <input type = "submit">.

listHTML5

Указывает на список вариантов, которые можно выбирать при вводе текста. Значение атрибута должно соответствовать идентификатору элемента <datalist>.

maxHTML5

Верхнее значение для ввода числа или даты.

maxlengthHTML5

Указывает максимально допустимое количество символов в элементе. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

min

Нижнее значение для ввода числа или даты.

minlengthHTML5

Минимальное количество символов разрешённых в тексте. Только для элементов управления следующих типов: text, search, tel, url, email и password.

multipleHTML5

Указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

patternHTML5

Устанавливает шаблон ввода с которым сверяется значение введённое в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются).

placeholderHTML5

Выводит подсказывающий текст. Атрибут может быть использован с полями данных определенных типов (атрибут type) со значениями email, password, search, tel, text и url).

readonly

Указывает, что поле ввода доступно только для чтения.

requiredHTML5

Обязательное для заполнения поле.

size

Определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.

src

Задаёт URL-адрес изображения, которое используется в качестве кнопки отправки (только для <input type = "image">).

stepHTML5

Шаг приращения для числовых полей. Только для элементов управления следующих типов: number, range, tel, date, date, time, datetime-local, month, time и week (остальные игнорируются). Значение по умолчанию 1.

value

Значение элемента.

widthHTML5

Задает ширину элемента (только для <input type = "image">).

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

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается.

В HTML5 у тега <input появилось несколько новых атрибутов, а у атрибута type несколько новых значений.

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

HTML форма с тремя полями ввода данных — двумя текстовыми и одной кнопкой отправки данных:

Пример HTML:

Попробуй сам

<form action="action_form.php">
   Имя: <input type="text" name="firstname"><br>
   Фамилия: <input type="text" name="lastname"><br>
   <input type="submit" value="Отправить">
</form>

Спецификации

Спецификация	Статус
WHATWG HTML Living Standard (WHATWG)	Живой стандарт
HTML 4.01 (W3C)	Рекомендация
HTML5 (W3C)	Рекомендация
HTML 5.1 (W3C)	Рекомендация

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

Элемент
<input>	2+	1+	1+	1+	1+	1+

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

Как создать переключатели (<input type="radio">):
Использование переключателей

Как создать флажки (<input type="checkbox">):
Использование флажков

Как создать кнопку отправки данных (<input type="submit">):
Использование submit

Как создать ползунковый регулятор (<input type="range">):
Регулятор

Как создать поле для поиска (<input type="search">):
Поле для поиска

Учебник HTML

HTML уроки: HTML элемент input

HTML Элементы

Справочники