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 type="radio">):
Использование переключателей

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

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

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

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


Учебник HTML

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

HTML Элементы



Contema