<input> элемент HTML input

Элемент <input> HTML используется для создания интерактивных элементов управления в веб-формах, позволяющих принимать данные от пользователя. В зависимости от устройства и пользовательского агента доступен широкий выбор типов входных данных и виджетов управления. Элемент <input> — один из самых мощных и сложных элементов HTML из-за огромного количества сочетаний типов входных данных и атрибутов.

Попробуйте

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Типы <input>

Поведение элемента <input> существенно различается в зависимости от значения его атрибута type, поэтому каждый тип рассматривается на отдельной справочной странице. Если этот атрибут не указан, используется тип по умолчанию — text.

Доступны следующие типы:

Атрибуты

Элемент <input> обладает широкими возможностями благодаря своим атрибутам; важнейшим из них является атрибут type, описанный выше на примерах. Поскольку каждый элемент <input>, независимо от типа, основан на интерфейсе HTMLInputElement, технически они имеют один и тот же набор атрибутов. Однако на практике большинство атрибутов влияют только на определённую группу типов полей ввода. Кроме того, воздействие некоторых атрибутов зависит от типа поля ввода и может различаться для разных типов.

В этом разделе приведена таблица со всеми атрибутами и их краткими описаниями. За ней следует список с более подробным описанием каждого атрибута и указанием связанных с ним типов полей ввода. Атрибуты, общие для большинства или всех типов, подробно описаны ниже. Атрибуты, уникальные для отдельных типов, а также атрибуты, общие для всех типов, но имеющие особое поведение при использовании с конкретным типом, описаны на страницах этих типов.

Атрибуты элемента <input> включают глобальные атрибуты HTML, а также:

После описаний стандартных атрибутов перечислены несколько дополнительных нестандартных атрибутов.

Отдельные атрибуты

accept

Допустим только для типа ввода file; атрибут accept определяет, какие типы файлов можно выбрать в элементе управления загрузкой file. См. тип ввода «файл».

alpha

Допустим только для типа ввода color; атрибут alpha позволяет конечному пользователю задать непрозрачность выбранного цвета.

alt

Допустим только для кнопки image; атрибут alt задаёт альтернативный текст для изображения. Значение атрибута отображается, если изображение src отсутствует или не может быть загружено. См. тип ввода «изображение».

autocapitalize

Определяет, преобразуется ли вводимый текст автоматически в верхний регистр и, если да, каким образом. Дополнительные сведения см. на странице глобального атрибута autocapitalize.

autocomplete

(Это не логический атрибут!) Значением атрибута autocomplete является строка, разделённая пробелами, которая описывает, какую функцию автозаполнения, если таковая имеется, должен предоставлять элемент ввода. Типичная реализация автозаполнения подставляет ранее введённые значения из того же поля ввода, однако возможны и более сложные варианты. Например, браузер может интегрироваться со списком контактов устройства и автоматически подставлять адреса email в поле ввода адреса электронной почты. Допустимые значения см. в разделе autocomplete.

Атрибут autocomplete допустим для hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color и password. Этот атрибут не влияет на типы ввода, которые не возвращают числовые или текстовые данные; он допустим для всех типов ввода, кроме checkbox, radio, file и любых типов кнопок.

Дополнительную информацию см. в разделе атрибут autocomplete, включая сведения о безопасности паролей и о том, чем autocomplete для hidden немного отличается от других типов ввода.

autofocus

Логический атрибут, наличие которого указывает, что элемент ввода должен автоматически получить фокус после завершения загрузки страницы (или после отображения <dialog>, содержащего этот элемент).

Примечание: Элемент с атрибутом autofocus может получить фокус до срабатывания события DOMContentLoaded.

В документе не может быть более одного элемента с атрибутом autofocus. Если этот атрибут задан для нескольких элементов, фокус получит первый из них.

Атрибут autofocus нельзя использовать для элементов ввода типа hidden, поскольку скрытые элементы ввода не могут получать фокус.

Предупреждение: Автоматическая фокусировка элемента управления формы может сбить с толку людей с нарушениями зрения, использующих программы чтения с экрана, а также людей с когнитивными нарушениями. Когда задан атрибут autofocus, программы чтения с экрана «переносят» пользователя к элементу управления формы, не предупредив его заранее.

При использовании атрибута autofocus тщательно учитывайте требования доступности. Автоматическая фокусировка элемента управления может привести к прокрутке страницы при загрузке. На некоторых сенсорных устройствах фокус также может вызвать отображение экранной клавиатуры. Хотя программа чтения с экрана озвучит метку элемента управления формы, получившего фокус, она не озвучит ничего перед меткой; зрячий пользователь на небольшом устройстве также не увидит контекст, заданный предшествующим содержимым.

capture

Атрибут capture, появившийся в спецификации HTML Media Capture и допустимый только для типа ввода file, определяет, какое мультимедийное устройство — микрофон, видеокамера или камера — следует использовать для съёмки нового файла, предназначенного для загрузки с помощью элемента управления загрузкой file в поддерживаемых сценариях. См. тип ввода «файл».

checked

Атрибут checked — логический и допустим как для типа radio, так и для типа checkbox. Если он задан для типа radio, это означает, что радиокнопка выбрана в данный момент в группе радиокнопок с одинаковыми именами. Если он задан для типа checkbox, это означает, что флажок установлен по умолчанию (при загрузке страницы). Он не указывает, установлен ли этот флажок в данный момент: если состояние флажка изменится, этот атрибут содержимого не отразит это изменение. (Обновляется только IDL-атрибут checked объекта HTMLInputElement.)

Примечание: В отличие от других элементов управления ввода, значения флажков и радиокнопок включаются в отправляемые данные, только если они в данный момент checked. Если это так, отправляются имена и значения выбранных элементов управления.

Например, если флажок с атрибутом name, равным fruit, имеет атрибут value со значением cherry и установлен, отправляемые данные формы будут содержать fruit=cherry. Если флажок не активен, он вообще не включается в данные формы. Значение on по умолчанию для флажков и радиокнопок — value.

colorspace

Допустим только для типа ввода color; атрибут colorspace задаёт цветовое пространство, используемое элементом ввода type="color". Возможные перечислимые значения:

• "limited-srgb": цвет задан в цветовом пространстве sRGB. Сюда входят значения rgb(), hsl(), hwb() и <hex-color>. Значение цвета ограничено 8 битами на компонент r, g и b. Это значение используется по умолчанию.
• "display-p3": цветовое пространство Display P3, например color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Атрибут dirname, допустимый для типов ввода hidden, text, search, url, tel и email, позволяет отправлять сведения о направлении текста элемента. Если атрибут задан, элемент управления формы отправит две пары «имя/значение»: первая содержит name и value, а вторая — значение атрибута dirname в качестве имени и значение ltr или rtl, определяемое браузером.

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

При отправке формы выше элемент ввода отправляет как пару name / value для fruit=cherry, так и пару dirname / направление для fruit-dir=ltr. Дополнительные сведения см. в разделе атрибут dirname.

disabled

Логический атрибут, наличие которого указывает, что пользователь не должен иметь возможности взаимодействовать с элементом ввода. Отключённые элементы ввода обычно отображаются более тусклым цветом или обозначаются иным способом, показывающим, что поле недоступно для использования.

В частности, отключённые элементы ввода не получают событие click и не отправляются вместе с формой.

Примечание: Хотя это не требуется спецификацией, Firefox по умолчанию сохраняет динамическое состояние отключения элемента <input> при перезагрузке страницы. Используйте атрибут autocomplete, чтобы управлять этой функцией.

form

Строка, указывающая элемент <form>, с которым связан элемент ввода (то есть его владелец формы). Если эта строка задана, её значение должно совпадать со значением id элемента <form> в том же документе. Если этот атрибут не задан, элемент <input> связывается с ближайшей содержащей его формой, если таковая имеется.

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

Примечание: Элемент ввода может быть связан только с одной формой.

formaction

Допустим только для типов ввода image и submit. Дополнительные сведения см. в разделе о типе ввода «отправка».

formenctype

Допустим только для типов ввода image и submit. Дополнительные сведения см. в разделе о типе ввода «отправка».

formmethod

Допустим только для типов ввода image и submit. Дополнительные сведения см. в разделе о типе ввода «отправка».

formnovalidate

Допустим только для типов ввода image и submit. Дополнительные сведения см. в разделе о типе ввода «отправка».

formtarget

Допустим только для типов ввода image и submit. Дополнительные сведения см. в разделе о типе ввода «отправка».

height

Допустим только для кнопки ввода image; атрибут height задаёт высоту файла изображения, которое отображается в качестве графической кнопки отправки. См. тип ввода «изображение».

id

Глобальный атрибут, допустимый для всех элементов, включая все типы ввода. Он задаёт уникальный идентификатор (ID), который должен быть уникальным во всём документе. Его назначение — идентифицировать элемент при создании ссылок. Значение используется в качестве значения атрибута for элемента <label>, чтобы связать метку с элементом управления формы. См. раздел <label>.

inputmode

Глобальное значение, допустимое для всех элементов. Оно подсказывает браузерам, какую конфигурацию виртуальной клавиатуры использовать при редактировании этого элемента или его содержимого. Возможные значения: none, text, tel, url, email, numeric, decimal и search.

list

Значением атрибута list должен быть id элемента <datalist>, расположенного в том же документе. Элемент <datalist> предоставляет список заранее заданных значений, предлагаемых пользователю для этого поля ввода. Значения из списка, несовместимые с атрибутом type, не включаются в предлагаемые варианты. Эти значения являются предложениями, а не обязательными требованиями: пользователи могут выбрать значение из списка или указать другое.

Атрибут допустим для text, search, url, tel, email, date, month, week, time, datetime-local, number, range и color.

Согласно спецификациям, атрибут list не поддерживается для hidden, password, checkbox, radio, file и любых типов кнопок.

В зависимости от браузера пользователь может увидеть предлагаемую пользовательскую палитру цветов, отметки на шкале или даже поле ввода, которое раскрывается как <select>, но при этом позволяет вводить значения, которых нет в списке. Информацию о других типах ввода см. в таблице совместимости браузеров.

См. элемент <datalist>.

max

Атрибут допустим для date, month, week, time, datetime-local, number и range и задаёт наибольшее значение в диапазоне допустимых значений. Если введённое в элемент value превышает это значение, элемент не проходит проверку ограничений. Если значение атрибута max не является числом, максимальное значение для элемента не задано.

Есть особый случай: если тип данных циклический (например, даты или время), значение max может быть меньше значения min, что указывает на возможность перехода диапазона через границу; например, так можно задать временной диапазон с 22:00 до 4:00.

maxlength

Атрибут допустим для text, search, url, tel, email и password и задаёт максимальную длину строки (измеряемую в кодовых единицах UTF-16), которую пользователь может ввести в поле. Значение должно быть целым числом не меньше 0. Если maxlength не задан или задано недопустимое значение, максимальная длина поля не ограничена. Это значение также должно быть больше или равно значению minlength.

Элемент ввода не пройдёт проверку ограничений, если длина введённого в поле текста превышает maxlength кодовых единиц UTF-16. По умолчанию браузеры не позволяют пользователям вводить больше символов, чем разрешено атрибутом maxlength. Проверка ограничений выполняется только при изменении значения пользователем. Дополнительные сведения см. в разделе Проверка на стороне клиента.

min

Атрибут допустим для date, month, week, time, datetime-local, number и range и задаёт наименьшее значение в диапазоне допустимых значений. Если введённое в элемент value меньше этого значения, элемент не проходит проверку ограничений. Если значение атрибута min не является числом, минимальное значение для элемента не задано.

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

Есть особый случай: если тип данных циклический (например, даты или время), значение max может быть меньше значения min, что указывает на возможность перехода диапазона через границу; например, так можно задать временной диапазон с 22:00 до 4:00.

minlength

Атрибут допустим для text, search, url, tel, email и password и задаёт минимальную длину строки (измеряемую в кодовых единицах UTF-16), которую пользователь может ввести в поле. Значение должно быть неотрицательным целым числом, меньшим или равным значению maxlength. Если minlength не задан или задано недопустимое значение, минимальная длина ввода не ограничена.

Элемент ввода не пройдёт проверку ограничений, если длина введённого в поле текста меньше minlength кодовых единиц UTF-16; отправка формы будет предотвращена. Проверка ограничений выполняется только при изменении значения пользователем. Дополнительные сведения см. в разделе Проверка на стороне клиента.

multiple

Если задан логический атрибут multiple, пользователь может ввести в поле адреса электронной почты несколько адресов, разделённых запятыми, или выбрать несколько файлов с помощью элемента ввода file. См. типы ввода «адрес электронной почты» и «файл».

name

Строка, задающая имя элемента управления ввода. Это имя отправляется вместе со значением элемента управления при отправке данных формы.

Считайте name обязательным атрибутом (хотя формально это не так). Если для элемента ввода не задан name или name пуст, значение элемента не отправляется вместе с формой! (Отключённые элементы управления, невыбранные радиокнопки, неустановленные флажки и кнопки сброса также не отправляются.)

Есть два особых случая:

1. _charset_ : Если используется в качестве имени элемента <input> типа «скрытый», значение value элемента ввода автоматически задаётся пользовательским агентом и соответствует кодировке символов, используемой для отправки формы.
2. isindex: По историческим причинам имя isindex недопустимо.

Атрибут name задаёт особое поведение радиокнопок.

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

При переходе с помощью клавиши Tab к группе радиокнопок с одинаковым именем, если одна из них выбрана, фокус получит именно она. Если кнопки группы не расположены рядом в исходном порядке, а одна из них выбрана, переход к группе начнётся с первой встретившейся кнопки этой группы, пропуская все невыбранные. Иными словами, если одна кнопка выбрана, при переходе с помощью клавиши Tab невыбранные радиокнопки группы пропускаются. Если не выбрана ни одна кнопка, группа получит фокус, когда встретится первая кнопка с этим именем.

После получения фокуса одной из радиокнопок группы клавиши со стрелками позволяют перемещаться между всеми радиокнопками с таким же именем, даже если в исходном порядке они не расположены рядом.

Если элементу ввода задан name, это имя становится свойством свойства HTMLFormElement.elements родительского элемента формы. Если у одного элемента ввода name задано значение guest, а у другого name равно hat-size, можно использовать следующий код:

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

После выполнения этого кода guestName будет объектом HTMLInputElement для поля guest, а hatSize — объектом для поля hat-size.

Предупреждение: Не задавайте элементам формы name, совпадающее со встроенным свойством формы, поскольку в этом случае вы переопределите предопределённое свойство или метод ссылкой на соответствующий элемент ввода.

pattern

Атрибут pattern допустим для text, search, url, tel, email и password. Он используется для создания регулярного выражения, которому должно соответствовать value элемента ввода, чтобы значение прошло проверку ограничений. Это должно быть корректное регулярное выражение JavaScript, соответствующее типу RegExp и описанное в нашем руководстве по регулярным выражениям. Не указывайте косые черты вокруг текста шаблона. При компиляции регулярного выражения:

1. шаблон неявно обрамляется ^(?: и )$, поэтому соответствие проверяется для всего значения ввода, то есть ^(?:<pattern>)$.
2. задаётся флаг 'v', чтобы шаблон обрабатывался как последовательность кодовых точек Unicode, а не как ASCII.

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

Примечание: При использовании атрибута pattern сообщите пользователю ожидаемый формат с помощью пояснительного текста рядом с полем. Также можно добавить атрибут title, объясняющий требования к соответствию шаблону; большинство браузеров отображают это значение в виде всплывающей подсказки. Для обеспечения доступности пояснение должно быть видимым. Всплывающая подсказка — лишь дополнительное улучшение.

Дополнительные сведения см. в разделе Проверка на стороне клиента.

placeholder

Атрибут placeholder допустим для text, search, url, tel, email, password и number. Он кратко подсказывает пользователю, какая информация ожидается в поле. Это должно быть слово или короткая фраза, указывающая на ожидаемый тип данных, а не объяснение или инструкция. Текст не должен содержать возвраты каретки или переводы строк. Например, если в поле ожидается имя пользователя, а его метка — «Имя», подходящей подсказкой может быть «например, Мустафа».

Примечание: Атрибут placeholder не так полезен с семантической точки зрения, как другие способы пояснения формы, и может привести к неожиданным техническим проблемам с содержимым. Дополнительные сведения см. в разделе Метки.

popovertarget

Превращает элемент <input type="button"> в кнопку управления всплывающим окном; в качестве значения принимает идентификатор управляемого элемента всплывающего окна. Дополнительные сведения см. на главной странице Popover API. Установка связи между всплывающим окном и вызывающей его кнопкой с помощью атрибута popovertarget даёт два дополнительных полезных эффекта:

• Браузер создаёт неявную связь aria-details и aria-expanded между всплывающим окном и вызывающим его элементом, а при отображении помещает всплывающее окно в логичное место в порядке навигации с клавиатуры. Благодаря этому всплывающее окно становится доступнее для пользователей клавиатуры и вспомогательных технологий (AT); см. также возможности Popover API для обеспечения доступности.
• Браузер создаёт неявную привязку между двумя элементами, благодаря чему очень удобно позиционировать всплывающие окна относительно элементов управления с помощью позиционирования привязок CSS. Дополнительные сведения см. в разделе позиционирование привязок всплывающего окна.

popovertargetaction

Задаёт действие, выполняемое над всплывающим окном, которым управляет элемент управления <input type="button">. Возможные значения:

"hide"

Кнопка скроет отображаемое всплывающее окно. Если попытаться скрыть уже скрытое окно, ничего не произойдёт.

"show"

Кнопка покажет скрытое всплывающее окно. Если попытаться показать уже отображаемое окно, ничего не произойдёт.

"toggle"

Кнопка переключает состояние всплывающего окна между отображением и скрытием. Если окно скрыто, оно будет показано; если отображается — скрыто. Если popovertargetaction не задан, действием по умолчанию для кнопки управления будет "toggle".

readonly

Логический атрибут, наличие которого указывает, что пользователь не должен иметь возможности редактировать значение элемента ввода. Атрибут readonly поддерживается для типов ввода text, search, url, tel, email, date, month, week, time, datetime-local, number и password.

Дополнительные сведения см. в разделе HTML-атрибут: readonly.

required

required — это логический атрибут, который, если он присутствует, указывает, что пользователь должен указать значение для поля ввода, прежде чем можно будет отправить содержащую его форму. Атрибут required поддерживается полями ввода text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio и file.

Дополнительные сведения см. в разделе Проверка на стороне клиента и в описании атрибута HTML: required.

size

Атрибут size применим к элементам email, password, tel, url и text и задаёт, какая часть поля ввода отображается. По сути, результат такой же, как при задании свойства CSS width, но с некоторыми особенностями. Единица измерения значения зависит от типа поля ввода. Для password и text это количество символов (или единиц em); значение по умолчанию — 20. Для остальных типов единицей измерения служат пиксели (или единицы px). Свойство CSS width имеет приоритет над атрибутом size.

src

Атрибут src применим только к кнопке ввода image и содержит строку с URL файла изображения, которое отображается в качестве графической кнопки отправки формы. См. тип поля ввода image.

step

Атрибут step применим к элементам date, month, week, time, datetime-local, number и range и задаёт число, определяющее шаг изменения значения. Допустимы только значения, расположенные на целое число шагов от начального значения шага. Начальным значением шага является min, если он задан, в противном случае — value или 0, если не задано ни одно из этих значений (за исключением week, для которого начальное значение шага по умолчанию равно −259,200,000 и соответствует началу недели 1970-W01).

Если значение не указано явно:

• Для number и range атрибут step по умолчанию равен 1.
• Для каждого типа полей ввода даты и времени задано подходящее значение step по умолчанию; см. страницы соответствующих типов полей ввода: date, datetime-local, month, time и week.

Значение должно быть положительным числом — целым или дробным, — либо специальным значением any, которое означает, что шаг не задан и разрешено любое значение (с учётом других ограничений, таких как min и max).

Например, если задано <input type="number" min="10" step="2">, допустимы любые чётные целые числа, равные 10 или больше. Если атрибут опущен (<input type="number">), допустимо любое целое число, но дробные числа (например, 4.2) недопустимы, поскольку значение step по умолчанию равно 1. Чтобы значение 4.2 было допустимым, значение step должно было бы быть равно any, 0.1 или 0.2 либо значение min должно было бы оканчиваться на .2, например <input type="number" min="-5.2">.

Примечание: Если введённые пользователем данные не соответствуют заданному шагу, значение считается недопустимым при проверке ограничений и соответствует псевдоклассу :invalid.

Дополнительные сведения см. в разделе Проверка на стороне клиента.

switch

Атрибут switch применим только к полю ввода checkbox. Это логический атрибут, указывающий, следует ли отображать флажок в виде переключателя.

Примечание: Этот атрибут всё ещё является экспериментальным и поддерживается лишь ограниченным числом браузеров. В браузерах без поддержки атрибут игнорируется.

tabindex

Глобальный атрибут, применимый ко всем элементам, включая все типы полей ввода. Целочисленный атрибут указывает, может ли элемент получать фокус ввода (то есть находится ли он в фокусе) и должен ли он участвовать в последовательной навигации с помощью клавиатуры. Поскольку все типы полей ввода, кроме полей типа hidden, могут получать фокус, этот атрибут не следует использовать для элементов управления формы: в противном случае потребуется управлять порядком фокуса для всех элементов документа, что при неправильном использовании может ухудшить удобство использования и доступность.

title

Глобальный атрибут, применимый ко всем элементам, включая все типы полей ввода, содержащий текст со справочной информацией об элементе, к которому он относится. Обычно, но не обязательно, такая информация отображается пользователю в виде всплывающей подсказки. Атрибут title НЕ следует использовать в качестве основного объяснения назначения элемента управления формы. Вместо этого используйте элемент <label> с атрибутом for, значение которого равно атрибуту id элемента управления формы. См. раздел Метки ниже.

type

Строка, определяющая тип отображаемого элемента управления. Например, для создания флажка используется значение checkbox. Если атрибут опущен (или указано неизвестное значение), используется тип поля ввода text, создающий текстовое поле.

Допустимые значения перечислены выше в разделе Типы полей ввода.

value

Значение элемента управления ввода. Если оно указано в HTML, это начальное значение; впоследствии его можно изменить или получить в любой момент с помощью JavaScript, обратившись к свойству value соответствующего объекта HTMLInputElement. Атрибут value всегда необязателен, хотя для checkbox, radio и hidden его следует считать обязательным.

width

Атрибут width применим только к кнопке ввода image и задаёт ширину файла изображения, которое отображается в качестве графической кнопки отправки формы. См. тип поля ввода image.

Нестандартные атрибуты

В некоторых браузерах доступны также следующие нестандартные атрибуты. Как правило, следует избегать их использования, если только без них не обойтись.

incremental

Логический атрибут incremental — это расширение WebKit и Blink (поддерживается Safari, Opera, Chrome и другими браузерами). Если он указан, он предписывает пользовательскому агенту обрабатывать поле ввода как поиск в реальном времени. Пока пользователь изменяет значение поля, пользовательский агент отправляет события search объекту HTMLInputElement, представляющему поле поиска. Это позволяет вашему коду обновлять результаты поиска в реальном времени по мере редактирования запроса пользователем.

Если атрибут incremental не указан, событие search отправляется только при явном запуске поиска пользователем (например, при нажатии клавиши Enter или Return во время редактирования поля).

Частота отправки события search ограничена: оно не отправляется чаще, чем через интервал, определяемый реализацией.

orient

Подобно нестандартному свойству CSS -moz-orient, влияющему на элементы <progress> и <meter>, атрибут orient задаёт ориентацию ползунка диапазона. Допустимые значения включают horizontal, при котором диапазон отображается горизонтально, и vertical, при котором он отображается вертикально. Современный способ создания вертикальных элементов управления формы описан в статье Создание вертикальных элементов управления формы.

results

Атрибут results, поддерживаемый только Safari, принимает числовое значение, которое позволяет переопределить максимальное количество записей в раскрывающемся меню предыдущих поисковых запросов, которое браузер автоматически предоставляет для элемента <input>.

Значение должно быть неотрицательным десятичным числом. Если оно не указано или указано неверно, используется максимальное количество записей по умолчанию для браузера.

webkitdirectory

Логический атрибут webkitdirectory, если он присутствует, указывает, что в интерфейсе выбора файлов пользователь может выбирать только каталоги. Дополнительные сведения и примеры см. в описании HTMLInputElement.webkitdirectory.

Изначально реализованный только в браузерах на основе WebKit, атрибут webkitdirectory также поддерживается Microsoft Edge и Firefox 50 и более поздних версий. Однако, несмотря на относительно широкую поддержку, он всё ещё не является стандартным, и его не следует использовать, если есть альтернатива.

Методы

Интерфейс HTMLInputElement, представляющий элементы <input> в DOM, предоставляет следующие методы. Также доступны методы родительских интерфейсов: HTMLElement, Element, Node и EventTarget.

checkValidity()

Возвращает true, если значение элемента проходит проверку допустимости; в противном случае возвращает false и отправляет элементу событие invalid.

reportValidity()

Возвращает true, если значение элемента проходит проверку допустимости; в противном случае возвращает false, отправляет элементу событие invalid и (если событие не отменено) сообщает пользователю о проблеме.

select()

Выделяет всё содержимое элемента <input>, если его содержимое можно выделить. Для элементов, содержимое которых нельзя выделить (например, визуального средства выбора цвета или ввода даты в календаре), этот метод ничего не делает.

setCustomValidity()

Задаёт пользовательское сообщение, которое будет отображаться, если значение элемента ввода недопустимо.

setRangeText()

Заменяет указанную последовательность символов в элементе ввода заданной строкой. Параметр selectMode позволяет управлять тем, как изменяется имеющееся содержимое.

setSelectionRange()

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

showPicker()

Отображает средство выбора браузера для элемента ввода, которое обычно появляется при выборе элемента, но запускает его отображение нажатием кнопки или другим действием пользователя.

stepDown()

Уменьшает значение числового поля ввода на единицу по умолчанию или на указанное количество единиц.

stepUp()

Увеличивает значение числового поля ввода на единицу или на указанное количество единиц.

CSS

Поля ввода относятся к замещаемым элементам и имеют ряд особенностей, не свойственных элементам, не являющимся элементами форм. Существуют CSS-селекторы, позволяющие выбирать элементы управления формы по особенностям их пользовательского интерфейса; такие селекторы также называют псевдоклассами пользовательского интерфейса. Элемент input также можно выбирать по типу с помощью селекторов атрибутов. Кроме того, существуют свойства, которые особенно полезны в этом контексте.

Псевдоклассы пользовательского интерфейса

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

Можно задать стиль метки флажка в зависимости от того, отмечен флажок или нет. В этом примере мы задаём свойства color и font-weight для элемента <label>, который непосредственно следует за отмеченным полем ввода. Если input не отмечен, стили не применяются.

input:checked + label {
  color: red;
  font-weight: bold;
}

Селекторы атрибутов

Разные типы элементов управления формы можно выбирать по их атрибуту type с помощью селекторов атрибутов. Селекторы атрибутов CSS выбирают элементы по наличию атрибута или по его значению.

/* matches a password input */
input[type="password"] {
}

/* matches a form control whose valid values are limited to a range of values */
input[min][max] {
}

/* matches a form control with a pattern attribute */
input[pattern] {
}

::placeholder

По умолчанию текст заполнителя отображается полупрозрачным или светло-серым. Псевдоэлемент ::placeholder представляет текст placeholder поля ввода. Его можно стилизовать с помощью ограниченного набора свойств CSS.

::placeholder {
  color: blue;
}

В правиле с ::placeholder в селекторе можно использовать только те свойства CSS, которые применимы к псевдоэлементу ::first-line.

caret-color

Для элементов, связанных с вводом текста, особенно полезно свойство CSS caret-color, позволяющее задавать цвет курсора текстового поля ввода:

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    sans-serif;
}

Результат

field-sizing

Свойство field-sizing позволяет управлять изменением размеров полей формы (по умолчанию им задаётся предпочтительный размер). С помощью этого свойства можно переопределить поведение по умолчанию и настроить изменение размеров элементов управления формы в соответствии с их содержимым.

Это свойство обычно используют для создания полей формы, размер которых подстраивается под содержимое и увеличивается по мере ввода текста. Оно работает с типами полей ввода, допускающими непосредственный ввод текста (например, text и url), полями ввода типа file и элементами <textarea>.

object-position и object-fit

В некоторых случаях (обычно для нетекстовых полей ввода и специализированных интерфейсов) элемент <input> является замещаемым элементом. В этом случае положение и размер элемента внутри его рамки можно настроить с помощью свойств CSS object-position и object-fit.

Стилизация

Дополнительные сведения о добавлении цвета элементам HTML см. в материале:

• Применение цвета к элементам HTML с помощью CSS.

См. также:

• Стилизация HTML-форм
• Расширенные возможности стилизации HTML-форм и

Дополнительные возможности

Метки

Метки необходимы для связывания поясняющего текста с элементом <input>. Элемент <label> содержит пояснительную информацию о поле формы, которая всегда уместна (если не учитывать особенности макета). Использовать элемент <label> для пояснения того, что следует ввести в <input> или <textarea>, всегда полезно.

Связанные метки

Семантическая связь между элементами <input> и <label> полезна для вспомогательных технологий, например программ экранного доступа. Связав их с помощью атрибута for элемента <label>, вы связываете метку с полем ввода так, что программы экранного доступа могут точнее описывать поля ввода пользователям.

Недостаточно разместить обычный текст рядом с элементом <input>. Для удобства использования и обеспечения доступности необходимо добавить явную или неявную <label>:

<!-- inaccessible -->
<p>Enter your name: <input id="name" type="text" size="30" /></p>

<!-- implicit label -->
<p>
  <label>Enter your name: <input id="name" type="text" size="30" /></label>
</p>

<!-- explicit label -->
<p>
  <label for="name">Enter your name: </label>
  <input id="name" type="text" size="30" />
</p>

Первый пример недоступен: между пояснением и элементом <input> нет связи.

Помимо доступного имени, метка увеличивает область нажатия для пользователей мыши и сенсорных экранов. Если связать <label> с <input>, щелчок или касание любого из них переведёт фокус на <input>. При использовании обычного текста в качестве «метки» этого не произойдёт. Включение пояснения в активную область поля ввода полезно для людей с нарушениями моторики.

Веб-разработчикам важно никогда не считать, что люди знают всё то же, что и мы. Разнообразие людей, пользующихся интернетом и, как следствие, вашим сайтом, практически гарантирует, что некоторые посетители будут иметь особенности мышления и/или обстоятельства, из-за которых они будут воспринимать ваши формы совсем иначе, чем вы, если метки не будут чёткими и правильно оформленными.

Заполнители не обеспечивают доступность

Атрибут placeholder позволяет указать текст, который отображается непосредственно в области содержимого элемента <input>, когда она пуста. Для понимания ваших форм пользователь не должен полагаться на текст заполнителя. Это не метка, и его нельзя использовать вместо неё. Заполнитель подсказывает, как должно выглядеть вводимое значение, но не объясняет назначение поля и не содержит инструкции.

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

Клиентская проверка

Помимо использования CSS для стилизации полей ввода на основе состояний пользовательского интерфейса :valid или :invalid, зависящих от текущего состояния каждого поля, как отмечено в разделе Псевдоклассы пользовательского интерфейса выше, браузер выполняет клиентскую проверку при попытке отправить форму. При отправке формы, если какое-либо поле управления формы не проходит проверку ограничений, поддерживающие эту возможность браузеры покажут сообщение об ошибке для первого некорректного поля управления формы: стандартное сообщение, соответствующее типу ошибки, или сообщение, заданное вами.

Некоторые типы полей ввода и другие атрибуты ограничивают допустимые значения для конкретного поля. Например, <input type="number" min="2" max="10" step="2"> означает, что допустимы только числа 2, 4, 6, 8 или 10. Может возникнуть несколько ошибок: например, ошибка rangeUnderflow, если значение меньше 2; rangeOverflow, если оно больше 10; stepMismatch, если значение — число от 2 до 10, но не чётное целое (не соответствует требованиям атрибута step); или typeMismatch, если значение не является числом.

Для типов полей ввода, множество возможных значений которых является периодическим (то есть при достижении наибольшего возможного значения отсчёт начинается заново, а не заканчивается), значения свойств max и min можно поменять местами. Это означает, что диапазон допустимых значений начинается с min, продолжается после перехода к наименьшему возможному значению и заканчивается на max. Это особенно полезно для дат и времени, например, если нужно разрешить диапазон с 8 вечера до 8 утра:

<input type="time" min="20:00" max="08:00" name="overnight" />

Определённые атрибуты и их значения могут приводить к определённой ошибке ValidityState:

Если у элемента управления формы нет атрибута required, значения или пустой строки, он не считается некорректным. Даже если присутствуют перечисленные выше атрибуты, пустая строка не приведёт к ошибке, за исключением required.

Мы можем задать ограничения на принимаемые значения, а поддерживающие эту возможность браузеры будут проверять значения формы и сообщать пользователю об ошибке при отправке формы.

Помимо ошибок, описанных в таблице выше, интерфейс validityState содержит логические свойства только для чтения badInput, valid и customError. Объект validity включает:

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

Для каждого из этих логических свойств значение true означает, что указанная причина возможной ошибки проверки действительно имеет место. Исключение составляет свойство valid: оно равно true, если значение элемента соответствует всем ограничениям.

При наличии ошибки поддерживающие эту возможность браузеры предупредят пользователя и не позволят отправить форму. Важное замечание: если для пользовательской ошибки задано истинное значение (любое, кроме пустой строки или null), отправка формы будет заблокирована. Если пользовательское сообщение об ошибке отсутствует и ни одно из остальных свойств не равно true, valid будет равно true, и форму можно будет отправить.

function validate(input) {
  let validityState = input.validity;
  if (validityState.valueMissing) {
    input.setCustomValidity("A value is required");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("Your value is too low");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("Your value is too high");
  } else {
    input.setCustomValidity("");
  }
}

Последняя строка, в которой пользовательское сообщение проверки корректности устанавливается в пустую строку, крайне важна. Если пользователь допустит ошибку и будет задано состояние некорректности, отправка не удастся, даже если все значения допустимы, пока сообщение не будет null.

Пример пользовательского сообщения об ошибке проверки

Чтобы показать пользовательское сообщение об ошибке, когда поле не проходит проверку, необходимо использовать API проверки ограничений (Constraint Validation API), доступный для элементов <input> (и связанных с ними). Рассмотрим следующую форму:

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

Базовые возможности проверки форм в HTML приведут к показу стандартного сообщения об ошибке, если попытаться отправить форму, не заполнив ни одно допустимое поле, либо указав значение, не соответствующее pattern.

Чтобы вместо этого показывать пользовательские сообщения об ошибках, можно использовать следующий JavaScript:

const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("Enter your username!");
  } else {
    nameInput.setCustomValidity(
      "Usernames can only contain upper and lowercase letters. Try again!",
    );
  }
});

Пример отображается следующим образом:

Кратко:

• Мы проверяем состояние корректности элемента ввода при каждом изменении его значения, вызывая метод checkValidity() через обработчик события input.
• Если значение некорректно, возникает событие invalid и запускается функция-обработчик события invalid. Внутри этой функции с помощью блока if () мы определяем, некорректно ли значение из-за того, что оно пустое, или потому, что не соответствует шаблону, а затем задаём пользовательское сообщение об ошибке проверки.
• В результате, если значение поля ввода некорректно при нажатии кнопки отправки, будет показано одно из пользовательских сообщений об ошибке.
• Если значение корректно, форма отправится ожидаемым образом. Для этого пользовательское состояние некорректности необходимо сбросить, вызвав setCustomValidity() с пустой строкой. Поэтому мы делаем это каждый раз при возникновении события input. Если этого не сделать, а пользовательское состояние некорректности было задано ранее, поле будет считаться некорректным, даже если при отправке оно содержит допустимое значение.

Локализация

Допустимые значения для некоторых типов <input> зависят от локали. В одних локалях допустимо число 1,000.00, а в других для ввода этого числа нужно использовать формат 1.000,00.

Firefox использует следующие эвристики для определения локали, по правилам которой проверяются введённые пользователем данные (по крайней мере, для type="number"):

• Пробует использовать язык, заданный атрибутом lang/xml:lang самого элемента или любого из его родительских элементов.
• Пробует использовать язык, заданный HTTP-заголовком Content-Language. Или,
• Если язык не указан, использует локаль браузера.

Специальные возможности

Подписи

При добавлении полей ввода необходимо сопровождать их подписями — этого требуют рекомендации по доступности. Они нужны, чтобы пользователи вспомогательных технологий могли понять назначение поля. Кроме того, щелчок или касание подписи переводит фокус на связанный с ней элемент управления формы. Это повышает доступность и удобство использования для зрячих пользователей, увеличивая область, по которой можно щёлкнуть или коснуться, чтобы активировать элемент управления формы. Это особенно полезно (а иногда и необходимо) для переключателей и флажков, которые очень малы. Общие сведения о подписях см. в разделе Подписи.

Ниже приведён пример того, как связать <label> с элементом <input> в стиле, описанном выше. Элементу <input> необходимо задать атрибут id. Затем элементу <label> нужно задать атрибут for, значение которого совпадает со значением атрибута id поля ввода.

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />

Размер

Интерактивные элементы, например поля ввода формы, должны иметь достаточно большую область, чтобы их было легко активировать. Это помогает самым разным людям, в том числе людям с нарушениями моторного контроля и тем, кто использует неточные способы ввода, например стилус или пальцы. Рекомендуется, чтобы минимальный размер интерактивной области составлял 44×44 пикселя CSS.

• Понимание критерия успеха 2.5.5: размер цели | Понимание WCAG 2.1 от W3C
• Размер цели и критерий 2.5.5 | Адриан Розелли
• Быстрая проверка: большие сенсорные цели — проект A11Y

Техническая сводка

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

Совместимость с браузерами

См. также

• Свойство CSS appearance
• Ваша первая HTML-форма
• Как структурировать HTML-форму
• Встроенные элементы управления форм
• Отправка данных формы
• Проверка ограничений формы
• Стилизация HTML-форм