HTML-тег input создаёт элемент управления формой, позволяющий вводить данные пользователю. Это может быть текстовое поле, флажок или кнопка отправки.
Элемент input не содержит содержимого и, следовательно, не имеет закрывающего тега.
Необязательные атрибуты
name
Атрибут: name.
Описание: имя элемента управления формой, которое должно быть сопряжено с его значением.
Возможные значения: текст (без пробелов).
type
Атрибут: type.
Описание: тип элемента управления формой.
Возможные значения:
text ─ текстовое поле — текст без разрывов строк. (по умолчанию).
password ─ текстовое поле со скрытым вводом.
checkbox ─ установите флажок / tick box.
radio ─ переключатель — позволяет выбрать один элемент управления в группе элементов, имеющих одинаковое name значение атрибута.
submit ─ кнопка отправки — отправляет форму.
reset ─ кнопка сброса — возвращает элементы управления в форме к их начальным значениям по умолчанию.
hidden ─ скрытый элемент управления, к которому пользователь не может получить прямой доступ, но значение которого передаётся вместе с остальными данными формы.
image ─ изображение, на которое при нажатии или выборе иного параметра будет отправлена форма. Координаты точки пикселя, по которой нажимается изображение, станут значением элемента управления.
file ─ загрузка файла — позволяет выбрать локальный файл для отправки.
button ─ кнопка без поведения по умолчанию.
search ─ текстовое поле для строк поиска.
tel ─ текстовое поле для телефонных номеров.
url ─ текстовое поле для абсолютных URL-адресов.
email ─ текстовое поле для адресов электронной почты.
date ─ элемент управления выбором даты.
time ─ управление выбором времени.
number ─ текстовое поле или счётчик для числовых значений.
range ─ ползунок или аналогичный для выбора числового значения из потенциально неточного диапазона.
color ─ правильно раскрашивать, используя 8-битное значение RGB.
value
Атрибут: value.
Описание: начальное значение.
Возможные значения: зависит от типа.
checked
Атрибут: checked.
Описание: задаёт тип checkbox или radio, который будет проверяться по умолчанию.
Возможные значения: нет.
maxlength
Атрибут: maxlength.
Описание: максимальное количество допустимых символов в значении.
Возможные значения: число.
minlength
Атрибут: minlength.
Описание: минимальное количество допустимых символов в значении.
Возможные значения: число.
src
Атрибут: src
Описание: используется и является обязательным, если используется type image. Расположение файла изображения, который будет использоваться.
Возможные значения: URL-адрес.
alt
Атрибут: alt.
Описание: используется и требуется, когда используется type image. Альтернативный текст, который заменит изображение, если изображение, указанное src, недоступно.
Возможные значения: текст.
width
Атрибут: width.
Описание: используется, когда используется type image. Ширина изображения в пикселях.
Возможные значения: число.
height
Атрибут: height.
Описание: используется, когда используется type image. Высота изображения в пикселях.
Возможные значения: число.
accept
Атрибут: accept.
Описание: используется, когда используется значение type file. Указывает, какие типы файлов принимаются.
Возможные значения: единственный экземпляр или разделённый запятыми список:
audio/* ─ аудиофайлы.
video/* ─ видеофайлы.
image/* ─ файлы изображений.
Тип MIME, такой как application/pdf.
Определённые расширения файлов, такие как .pdf.
disabled
Атрибут: disabled.
Описание: отключает элемент управления формой.
Возможные значения: нет.
readonly
Атрибут: readonly.
Описание: делает элемент управления формой неизменяемым пользователем.
Возможные значения: нет.
autocomplete
Атрибут: autocomplete.
Описание: должен ли браузер реализовывать автозаполнение элемента управления или нет.
Возможные значения:
on (по умолчанию)
off
autofocus
Атрибут: autofocus.
Описание: указывает, что элемент управления формой должен быть ориентирован на загрузку страницы. Должен использоваться только для одного элемента управления формой на странице.
Возможные значения: нет.
dirname
Атрибут: dirname.
Описание: добавляет дополнительное поле для отправки, содержащее направленность значения элемента управления формой.
Возможные значения: текст (без пробелов). dirname=»this.dir» будет добавляться this.dir=ltr (слева направо) или this.dir=rtl (справа налево), например, к отправленным данным.
form
Атрибут: form.
Описание: явно связывает элемент управления с form элементом, в который он может быть вложен, а может и не быть. Если элемент управления отсутствует, он будет связан со своим form предком.
Возможные значения: текст, соответствующий значению атрибута form элемента id.
formaction
Атрибут: formaction.
Описание: используется, когда типом является submit или image. Адрес, на который должны быть отправлены отправленные данные формы. Переопределяет атрибут form элемента action.
Возможные значения: URL-адрес.
formmethod
Атрибут: formmethod.
Описание: используется, когда тип — submit или image. HTTP-метод, с помощью которого должны быть отправлены отправленные данные формы. Переопределяет атрибут form элемента method.
Возможные значения:
get ─ привязывает значения формы к URL-адресу, на который отправляется форма. Используется для простой отправки данных, таких как поисковые запросы, например.
post ─ незаметно отправляет данные формы в теле отправленного HTTP-запроса. Используется для более подробной или безопасной отправки данных, таких как контактные формы, например.
formenctype
Атрибут: formenctype
Описание: используется, когда type является submit или image. Тип MIME, используемый для кодирования данных формы. Переопределяет атрибут form элемента enctype.
Возможные значения:
application/x-www-form-urlencoded ─ по умолчанию.
multipart/form-data ─ для случаев, когда в форме используется элемент file input.
text/plain ─ базовый текст.
formnovalidate
Атрибут: formnovalidate.
Описание: используется, когда type равен submit или image. Указывает, что форма не должна проверяться перед её отправкой. Переопределяет атрибут form элемента novalidate.
Возможные значения: нет.
formtarget
Атрибут: formtarget.
Описание: используется, когда type является submit или image. Контекст просмотра, в котором должен открываться URL-адрес назначения отправленной формы. Переопределяет атрибут form элемента target.
Возможные значения:
_self ─ открывается в текущем окне / вкладке.
_blank ─ открывается в новом окне / вкладке.
list
Атрибут: list.
Описание: связывает элемент управления формой со списком опций, которые можно предложить пользователю.
Возможные значения: текст, соответствующий значению атрибута datalist элемента id.
max
Атрибут: max.
Описание: используется, когда типом является date, time number или range. Максимальное значение.
Возможные значения: число.
min
Атрибут: min.
Описание: используется, когда тип — date, time, number или range. Минимальное значение.
Возможные значения: число.
step
Атрибут: step
Описание: используется, когда тип — date, time, number или range. Приращения, с которыми значение может быть увеличено или уменьшено.
Возможные значения: число или any.
multiple
Атрибут: multiple.
Описание: используется, когда тип — email или file. Указывает, что пользователь может ввести более одного значения.
Возможные значения: нет.
pattern
Атрибут: pattern.
Описание: регулярное выражение, по которому можно проверять значение.
Возможные значения: регулярное выражение.
placeholder
Атрибут: placeholder.
Описание: видимый намёк на то, какие данные пользователь должен ввести.
Возможные значения: текст.
ruired
Атрибут: ruired.
Описание: указывает, что поле формы должно быть заполнено.
Возможные значения: нет.
size
Атрибут: size.
Описание: количество символов в элементе управления текстового типа, которое пользователь должен увидеть при редактировании.
Возможные значения: число.
Глобальные атрибуты
Глобальный атрибут title играет особую роль, когда используется атрибут pattern. В этих случаях заголовки должны представлять описание используемого шаблона. Тем не менее, по-прежнему рекомендуется использовать отдельное текстовое объяснение в основном содержимом.
Пример
<form action="someKindOfProcessingScript.php" method="post"> <label for="username">Name</label> <input name="username" id="username"> <label for="housenumber">House number</label> <input type="number" name="housenumber" id="housenumber"> <label for="street">Street</label> <input name="street" id="street"> <label for="emailaddress">Email address</label> <input type="email" placeholder="you@somewhere.com" name="emailaddress" id="emailaddress"> <input type="submit" value="Sign up!"> </form>
Страницы в тему:
Все HTML-теги
a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del dfn div dl dt em embed fieldset figcaption figure footer form h1 — h6 head header hr html i iframe img input ins kbd keygen label legend li link main map mark meta meter nav noscript object ol optgroup option output p param pre progress q rb rp rt rtc ruby s samp script section select small source span strong style sub sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr
Уроки:
- Формы (Урок HTML для начинающих)
- Формы HTML5, пункт 1: типы ввода (Внушительный урок HTML)
- Формы HTML5, раздел 2: Атрибуты и списки данных (Внушительный урок HTML)