Input class что за элемент

Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Основной атрибут , определяющий вид элемента — type . Он позволяет задавать следующие элементы формы: текстовое поле ( text ), поле с паролем ( password ), переключатель ( radio ), флажок ( checkbox ), скрытое поле ( hidden ), кнопка ( button ), кнопка для отправки формы ( submit ), кнопка для очистки формы ( reset ), поле для отправки файла ( file ), кнопка с изображением ( image ) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.

Демо¶

Синтаксис¶

input /> 

Закрывающий тег не требуется.

Атрибуты¶

Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

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

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

Устанавливает фокус в поле формы.

Предварительно активированный переключатель или флажок.

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

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

Связывает поле с формой по её идентификатору.

Определяет адрес обработчика формы.

Устанавливает способ кодирования данных формы при их отправке на сервер.

Сообщает браузеру каким методом следует передавать данные формы на сервер.

Отменяет встроенную проверку данных на корректность.

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

Указывает на список вариантов, которые можно выбирать при вводе текста.

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

Максимальное количество символов разрешённых в тексте.

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

Минимальное количество символов разрешённых в тексте.

Позволяет загрузить несколько файлов одновременно.

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

Устанавливает шаблон ввода.

Выводит подсказывающий текст.

Устанавливает, что поле не может изменяться пользователем.

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

Ширина текстового поля.

Адрес графического файла для поля с изображением.

Шаг приращения для числовых полей.

Сообщает браузеру, к какому типу относится элемент формы.

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

accept¶

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

Применяется к полю для отправки файла ( ).

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

Can I Use input-file-accept? Data on support for the input-file-accept feature across the major browsers from caniuse.com.

Синтаксис

input type="file" accept="" /> 

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Значение по умолчанию

alt¶

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

Синтаксис

input type="image" alt="" /> 

Значения

Любая подходящая текстовая строка.

Значение по умолчанию

autocomplete¶

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

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

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

1 2 3 4 5 6

input type="text" autocomplete="on | off" /> input type="password" autocomplete="on | off" /> input type="email" autocomplete="on | off" /> input type="search" autocomplete="on | off" /> input type="url" autocomplete="on | off" /> input type="tel" autocomplete="on | off" /> 

Значения

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

Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Значение по умолчанию

Зависит от настроек браузера.

autofocus¶

Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.

Синтаксис

input autofocus /> 

Значения

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

checked¶

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

Синтаксис

input type="radio" checked /> input type="checkbox" checked /> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

dirname¶

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .

Синтаксис

input type="text" dirname="" /> input type="search" dirname="" /> 

Значения

Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir .

Значение по умолчанию

disabled¶

Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.

Синтаксис

input disabled /> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

form¶

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

Синтаксис

input type="" form="" /> form id="">. form> 

Значения

Идентификатор формы (значение атрибута id элемента ).

Значение по умолчанию

formaction¶

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

Синтаксис

input type="submit" formaction="" /> 

Значения

formenctype¶

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента , при совместном использовании formenctype и enctype последний игнорируется.

Синтаксис

1 2 3 4

input type="submit" formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" /> 

Значения

Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ).

Данные не кодируются. Это значение применяется при отправке файлов.

Пробелы заменяются знаком + , буквы и другие символы не кодируются.

Значение по умолчанию

formmethod¶

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

input type="submit" formmethod="get | post" /> 

Значения

Различают два метода — GET и POST , которые задаются ключевыми словами get и post .

Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.

Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

Значение по умолчанию

formnovalidate¶

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

Синтаксис

input type="submit" formnovalidate /> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget¶

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

Синтаксис

1 2 3 4

input type="submit" formtarget=" | _blank | _self | _parent | _top" /> 

Значения

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

Загружает страницу в новую вкладку браузера.

Загружает страницу в текущую вкладку.

Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .

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

Значение по умолчанию

list¶

Синтаксис

1 2 3 4 5

input list="" /> datalist id=""> option value="Текст1">option> option value="Текст2">option> datalist> 

Значения

Имя идентификатора элемента .

Значение по умолчанию

max¶

Устанавливает верхнее значение для ввода числа или даты в поле формы.

Синтаксис

1 2 3

input type="number" max="" /> input type="range" max="" /> input type="date" max="" /> 

Значения

Целое положительное или отрицательное число (для type=»number» , type=»range» ).

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .

Значение по умолчанию

maxlength¶

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

Синтаксис

input type="text" maxlength="" /> input type="password" maxlength="" /> 

Значения

Любое целое положительное число.

Значение по умолчанию

Ввод символов не ограничен.

min¶

Устанавливает нижнее значение для ввода числа или даты в поле формы.

Синтаксис

1 2 3

input type="number" min="" /> input type="range" min="" /> input type="date" min="" /> 

Значения

Целое положительное или отрицательное число (для type=»number» , type=»range» ).

Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type=»date» .

Значение по умолчанию

minlength¶

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

Синтаксис

input type="text" minlength="" /> input type="password" minlength="" /> 

Значения

Любое целое положительное число.

Значение по умолчанию

multiple¶

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

Синтаксис

input type="file" multiple /> input type="email" multiple /> 

Значения

Значение по умолчанию

По умолчанию атрибут multiple выключен.

name¶

Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.

Синтаксис

input name="" /> 

Значения

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

Значение по умолчанию

pattern¶

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.

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

Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.

Синтаксис

1 2 3 4 5

input type="email" pattern="" /> input type="tel" pattern="" /> input type="text" pattern="" /> input type="search" pattern="" /> input type="url" pattern="" /> 

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

placeholder¶

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

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

Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.

Синтаксис

input placeholder="" /> 

Значения

Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.

Значение по умолчанию

readonly¶

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

Синтаксис

input type="text" readonly /> input type="password" readonly /> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

required¶

Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

input required /> 

Значения

Значение по умолчанию

По умолчанию атрибут required выключен.

size¶

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

Синтаксис

input type="text" size="" /> input type="password" size="" /> 

Значения

Любое целое положительное число.

Значение по умолчанию

src¶

Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.

Синтаксис

input type="image" src="" /> 

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

step¶

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

Синтаксис

input type="number" step="" /> input type="range" step="" /> 

Значения

Любое целое или дробное число.

Значение по умолчанию

type¶

Сообщает браузеру, к какому типу относится элемент формы.

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

email , tel , url :

Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.

Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.

Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.

Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.

date , time , datetime :

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Синтаксис

1 2 3

input type="button|checkbox|file|hidden|image|password|radio|reset|submit|text" /> 

Значения

Флажки. Позволяют выбрать более одного варианта из предложенных.

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

Скрытое поле. Оно никак не отображается на веб-странице.

Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.

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

Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.

Кнопка для возвращения данных формы в первоначальное значение.

Кнопка для отправки данных формы на сервер.

Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

В HTML5 добавлены новые значения:

Виджет для выбора цвета.

Поле для выбора календарной даты.

Указание даты и времени.

Указание местной даты и времени.

Для адресов электронной почты.

Ползунок для выбора чисел в указанном диапазоне.

Поле для поиска.

Для телефонных номеров.

Плавающие метки

Создавайте красивые простые метки для полей формы, плавающие над полями ввода.

На этой странице На этой странице

Пример

Оберните пару элементов и в .form-floating , чтобы включить плавающие метки с полями текстовой формы Bootstrap. placeholder требуется для каждого , поскольку наш метод плавающих меток только для CSS использует псевдоэлемент :placeholder-shown . Также обратите внимание, что должен идти первым, чтобы мы могли использовать селектор-брат (например, ~ ).

Адрес электронной почты

div class="form-floating mb-3">  input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">  label for="floatingInput">Адрес электронной почтыlabel> div> div class="form-floating">  input type="password" class="form-control" id="floatingPassword" placeholder="Пароль">  label for="floatingPassword">Парольlabel> div>

Когда уже определено значение value , автоматически подстраиваются под свое плавающее положение.

form class="form-floating">  input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">  label for="floatingInputValue">Ввод со значениемlabel> form>

Стили проверки формы также работают должным образом.

form class="form-floating">  input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">  label for="floatingInputInvalid">Неверный Вводlabel> form>

Текстовые области

По умолчанию, с .form-control будет той же высоты, что и .

Комментарии

div class="form-floating">  textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea">textarea>  label for="floatingTextarea">Комментарииlabel> div>

Чтобы установить произвольную высоту для Вашего , не используйте атрибут rows . Вместо этого установите явную height (встроенную или через собственный CSS).

Комментарии

div class="form-floating">  textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px">textarea>  label for="floatingTextarea2">Комментарииlabel> div>

Элемент выбора

За исключением .form-control , плавающие метки доступны только для .form-select . Они работают таким же образом, но в отличие от , они всегда будут показывать в плавающем состоянии. Выборки с size и multiple не поддерживаются.

Работает с элементом выбора

div class="form-floating">  select class="form-select" id="floatingSelect" aria-label="Floating label select example">  option selected>Откройте это меню выбораoption>  option value="1">Одинoption>  option value="2">Дваoption>  option value="3">Триoption>  select>  label for="floatingSelect">Работает с элементом выбораlabel> div>

Открытый текст только для чтения

Плавающие метки также поддерживают .form-control-plaintext , который может быть полезен для переключения с редактируемого на значение открытого текста, не влияя на макет страницы.

Пустой ввод
Ввод со значением

div class="form-floating mb-3">  input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">  label for="floatingEmptyPlaintextInput">Пустой вводlabel> div> div class="form-floating mb-3">  input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">  label for="floatingPlaintextInput">Ввод со значениемlabel> div>

Группы ввода

Плавающие метки также поддерживают .input-group .

Имя пользователя

div class="input-group mb-3">  span class="input-group-text">@span>  div class="form-floating">  input type="text" class="form-control" id="floatingInputGroup1" placeholder="Имя пользователя">  label for="floatingInputGroup1">Имя пользователяlabel>  div> div>

При использовании .input-group и .form-floating вместе с проверкой формы, -feedback должен быть размещен вне .form-floating , но внутри .input-group . Это означает, что обратную связь нужно будет отображать с помощью javascript.

Имя пользователя
Пожалуйста, выберите имя пользователя.

div class="input-group has-validation">  span class="input-group-text">@span>  div class="form-floating is-invalid">  input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Имя пользователя" required>  label for="floatingInputGroup2">Имя пользователяlabel>  div>  div class="invalid-feedback">  Пожалуйста, выберите имя пользователя.  div> div>

Макет

При работе с сеткой Bootstrap обязательно размещайте элементы формы в классах столбцов.

Адрес электронной почты
Работает с элементом выбора

div class="row g-2">  div class="col-md">  div class="form-floating">  input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">  label for="floatingInputGrid">Адрес электронной почтыlabel>  div>  div>  div class="col-md">  div class="form-floating">  select class="form-select" id="floatingSelectGrid">  option selected>Откройте это меню выбораoption>  option value="1">Одинoption>  option value="2">Дваoption>  option value="3">Триoption>  select>  label for="floatingSelect">Работает с элементом выбораlabel>  div>  div> div>

Sass

Переменные

$form-floating-height: add(3.5rem, $input-height-border); $form-floating-line-height: 1.25; $form-floating-padding-x: $input-padding-x; $form-floating-padding-y: 1rem; $form-floating-input-padding-t: 1.625rem; $form-floating-input-padding-b: .625rem; $form-floating-label-opacity: .65; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem); $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;