Forms · Bootstrap

Alternatives to hidden labels

Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute.

Auto-sizing

The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row.

They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Customizing

Validation states can be customized via Sass with the $form-validation-states map. Located in our _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states.

Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.

// Sass map from `_variables.scss`// Override this and recompile your Sass to generate different states$form-validation-states:map-merge(("valid":("color":$form-feedback-valid-color,"icon":$form-feedback-icon-valid),"invalid":("color":$form-feedback-invalid-color,"icon":$form-feedback-icon-invalid)),$form-validation-states);// Loop from `_forms.scss`// Any modifications to the above Sass map will be reflected in your compiled// CSS via this loop.@each$state,$datain$form-validation-states{@include form-validation-state($state,map-get($data,color),map-get($data,icon));}

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

File browser

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

Choose file

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Horizontal form label sizing

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Input group validation workaround

We’re unable to resolve the broken border-radius of input groups with validation due to selector limitations, so manual overrides are required. When you’re using a standard input group and don’t customize the default border radius values, add .rounded-right to the elements with the broken border-radius.

Overview

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

Range inputs

Set horizontally scrollable range inputs using .form-control-range.

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Supported elements

Validation styles are available for the following form controls and components:

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

Translating or customizing the strings with html

Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):

Voeg je document toe

Translating or customizing the strings with scss

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings.

$custom-file-text:(en:"Browse",es:"Elegir");

Here’s lang(es) in action on the custom file input for a Spanish translation:

Seleccionar Archivo

Автоматический размер

В приведенном ниже примере используется утилита flexbox для вертикального центрирования содержимого и изменение .col на .col-auto, чтобы Ваши столбцы занимали ровно столько места, сколько необходимо. Другими словами, размер столбца зависит от содержимого.

Затем Вы можете снова смешать это с классами столбцов, зависящими от размера.

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

Без меток

Добавьте класс .position-static в формы ввода, которые находятся внутри элемента класса .form-check и не имеют какого-либо пояснительного текста. Также помните что некоторые формы можно обеспечить доступным именем для вспомогательных технологий (например, использовав aria-label).

Вложенные формы

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

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

Обычные органы контроля и выбора также поддерживаются.

Всплывающие подсказки

Если Ваш макет формы позволяет это, Вы можете заменить классы .{valid|invalid}-feedback на классы .{valid|invalid}-tooltip, чтобы отображать отзывы о проверке в стилизованной всплывающей подсказке. Убедитесь, что у Вас есть родительский элемент с position: relative для позиционирования всплывающей подсказки.

Встроенные

Группируйте чекбоксы или «радио» кнопки по одной горизонтальной линии, добавив класс .form-check-inline в любой элемент класса .form-check.

Входы диапазона

Установите горизонтальные прокручиваемые входы диапазона с использованием .form-control-range.

Выключатели

Выключатель имеет разметку пользовательского флажка, но использует класс .custom-switch для рендеринга тумблера. Выключатели также поддерживают атрибут отключенния disabled.

Горизонтальные формы

Создайте горизонтальные формы с помощью сеток, добавив класс .row к группам форм и используя классы .col-*-* для задания ширины ваших надписей и элементов контроля. Обязательно добавьте класс .col-form-label также и в ваши <label> для того, чтобы они приобрели вертикальное центрирование относительно связанных с ними элементов контроля форм.

Временами вам может понадобиться классы марджина или паддинга, чтобы создать классное выравнивание. Например, мы удалили padding-top в наших вертикально расположенных лейблах ввода «радио», для лучшего выравнивания текста.

Деактивированные

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

Деактивированные формы

Добавьте булеан disabled в форму ввода, чтобы сделать ее светлее и предотвратить возможность взаимодействия юзера с данной формой.

Диапазон

Создавайте обычные элементы контроля <input type=»range»> с помощью класса .custom-range. Ползунок (т.е. его фон и все элементы) и элемент управления («каретка») стилизованы для одинакового вида во всех браузерах. Т.к.

Example range

Загрузка файлов

Рекомендуемый плагин для анимации ввода пользовательских файлов: bs-custom-file-input, это то, что мы сейчас используем здесь, в наших документах.

Загрузка файлов – самая требовательная из всех и требует дополнительного JavaScript для оснащения её функциональностью «Выберите файл» и текста названия выбранного файла.

Choose file

Мы скрываем файл по умолчанию <input> через opacity и вместо этого ставим <label>. Кнопка генерируется и позиционируется с ::after.

Инструменты контроля форм

Текстовые инструменты контроля – такие как <input>, <select> и <textarea> — стилизованы классом .form-control, который содержит основные стили внешнего вида, активного состояния, размерности и т.д.

Изучите наши обычные формы для дальнейшего понимания стилизации <select>.

Для создания формы загрузки файлов замените .form-control на .form-control-file.

Как это работает

Вот как проверка формы работает с Bootstrap:

• Проверка формы HTML применяется через два псевдокласса CSS, :invalid и :valid. Он применяется к элементам <input>, <select> и <textarea>.
• Bootstrap применяет стили :invalid и :valid к родительскому классу .was-validated, обычно применяемому к <form>. В противном случае любое обязательное поле без значения будет отображаться как недопустимое при загрузке страницы. Таким образом, Вы можете выбрать, когда их активировать (обычно после попытки отправки формы).
• Чтобы сбросить внешний вид формы (например, в случае отправки динамической формы с использованием AJAX), удалите класс .was-validated из <form> снова после отправки.
• В качестве запасного варианта могут использоваться классы .is-invalid и .is-valid вместо псевдоклассов для [проверки на стороне сервера проверки на стороне сервера. Им не нужен родительский класс .was-validated.
• Из-за ограничений в том, как работает CSS, мы не можем (в настоящее время) применять стили к <label>, который стоит перед элементом управления формой в DOM, без помощи пользовательского JavaScript.
• Все современные браузеры поддерживают API проверки ограничений, серию методов JavaScript для проверки формы управления.
• В сообщениях обратной связи могут использоваться настройки браузера по умолчанию (разные для каждого браузера и не стилизованные с помощью CSS) или наши пользовательские стили обратной связи с дополнительным HTML и CSS.
• Вы можете предоставлять настраиваемые сообщения о действительности с помощью setCustomValidity в JavaScript.

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

Кастомизация

Состояния проверки можно настроить через Sass с помощью карты $form-validation-states. Эта карта Sass, расположенная в нашем файле _variables.scss, зацикливается для генерации состояний валидации по умолчанию valid/invalid.

Обратите внимание, что мы не рекомендуем настраивать эти значения без изменения миксина form-validation-state.

// Карта Sass из `_variables.scss`// Переопределите это и перекомпилируйте свой Sass для генерации разных состояний$form-validation-states:map-merge(("valid":("color":$form-feedback-valid-color,"icon":$form-feedback-icon-valid),"invalid":("color":$form-feedback-invalid-color,"icon":$form-feedback-icon-invalid)),$form-validation-states);// Цикл из `_forms.scss`// Любые изменения в приведенной выше карте Sass будут отражены в вашей скомпилированной// CSS через этот цикл.@each$state,$datain$form-validation-states{@include form-validation-state($state,map-get($data,color),map-get($data,icon));}

Кроссбраузерная совместимость

Хотя Bootstrap будет применять эти стили во всех браузерах, Internet Explorer 11 и ниже не полностью поддерживает атрибут disabled в <fieldset>. Используйте собственный JavaScript, чтобы отключить набор полей в этих браузерах.

Меню выбора

Для пользовательских меню <select> нужен только пользовательский класс .custom-select для запуска пользовательских стилей. Пользовательские стили ограничены начальным внешним видом <select> и не могут изменять <option> из-за ограничений браузера.

Откройте это меню выбораОдинДваТри

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

Откройте это меню выбораОдинДваТриОткройте это меню выбораОдинДваТри

Также поддерживается атрибут multiple:

Откройте это меню выбораОдинДваТри

Как и атрибут size:

Откройте это меню выбораОдинДваТри

На стороне сервера

Мы рекомендуем использовать проверку на стороне клиента, но если Вам требуется проверка на стороне сервера, Вы можете указать недопустимые и допустимые поля формы с помощью .is-invalid и .is-valid. Обратите внимание, что эти классы также поддерживают .invalid-feedback.

Для недопустимых полей убедитесь, что недопустимый отзыв/сообщение об ошибке связано с соответствующим полем формы с помощью aria-describedby. Этот атрибут позволяет ссылаться на более чем один id, если поле уже указывает на дополнительный текст формы.

Настройки браузера по умолчанию

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

Хотя эти стили обратной связи нельзя стилизовать с помощью CSS, Вы все равно можете настроить текст отзыва с помощью JavaScript.

Обзор

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

Удостоверьтесь, что используете правильный атрибут type во всех формах ввода (т.е., email для почты и number для цифровой информации), это даст вам преимущества в виде новейших инструментов (таких как проверка email, выборка чисел и т.д.) контроля данных ввода.

Вот демонстрация стилей форм Bootstrap. Читайте документацию по требуемым классам, расположению форм и т.д.

Обходной путь проверки группы ввода

Мы не можем разрешить сломанное border-radius групп ввода с проверкой из-за ограничений селектора, поэтому требуются ручные переопределения. Если вы используете стандартную группу ввода и не настраиваете значения радиуса границы по умолчанию, добавьте .rounded-right к элементам с нарушенной границей радиуса border-radius.

Отключенные формы

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

Добавьте атрибут disabled r <fieldset>, чтобы отключить все элементы управления внутри.

Перевод или настройка строк с помощью html

Bootstrap также предоставляет способ перевода текста «Обзор» в HTML с помощью атрибута data-browse, который можно добавить к пользовательской метке ввода (например, на голландском языке):

Voeg je document toe

Перевод или настройка строк с помощью scss

Псевдокласс :lang() pseudo-class используется для легкого перевода текста “Browse” и “Choose file…» на другие языки. Просто перепишите или добавьте к переменной SCSS $custom-file-text нужный тэг языка и локализованных строк.

$custom-file-text:(en:"Browse",es:"Elegir");

Здесь псевдокласс lang(es) в используется для загрузки файла на испанском языке:

Seleccionar Archivo

По умолчанию (расположенные по вертикали)

По умолчанию, любое количество идущих один за другим чекбоксов и «радио» кнопок будет располагаться сверху вниз, а класс .form-check правильно отрегулирует пространство между ними.

Поддерживаемые элементы

Стили проверки доступны для следующих элементов управления формы и компонентов:

Пользовательские стили

Для пользовательских сообщений проверки формы Bootstrap Вам необходимо добавить логический атрибут novalidate к Вашему тегу <form>. Это отключает всплывающие подсказки обратной связи браузера по умолчанию, но по-прежнему обеспечивает доступ к API проверки формы в JavaScript.

В пользовательских стилях обратной связи применяются пользовательские цвета, границы, стили фокуса и фоновые значки, чтобы лучше передавать отзывы. Фоновые иконки для <select> доступны только с .custom-select, но не с .form-control.

Пользовательские формы

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

Предупреждение с якорями

Браузеры обрабатывают все элементы управления собственными формами (элементы <input>, <select> и <button>) внутри <fieldset disabled> как отключенными, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши.

Проверка

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

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

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

Если в ваших формах вы хотите стилизовать элементы <input readonly> как простой текст, используйте класс .form-control-plaintext для удаления оформления форм по умолчанию и сохранения правильных отступов.

Размеры колонок

Как показано в предыдущих примерах, наша система сеток позволит вам расположить любое количество классов .col внутри рядов класса .row или .form-row.

Такая верстка разделит доступную ширину поровну между колонками. Вы также можете создать субнабор колонок, которые займут либо меньше, либо больше места (как необходимо), в то время как колонки класса .col равномерно распределятся по оставшейся ширине, к примеру, как классы .col-7.

Размеры надписей горизонтальных форм

Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих <label> для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.

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

Текст справки должен быть явно связан с элементом управления формы, к которому он относится, с помощью атрибута aria-describedby. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут озвучивать этот текст справки, когда пользователь фокусируется или входит в элемент управления.

Сетка форм

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

Строка формы

Вы также можете заменить .row на .form-row, разновидность нашей стандартной строки сетки, которая переопределяет отступы столбцов по умолчанию для более плотных и компактных макетов.

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

Только чтение

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

Чекбоксы

Check this custom checkbox

Стандартные чекбоксы могут использовать псевдокласс :indeterminate, заданный вручную через JavaScript (т.к. нет в HTML атрибута для его спецификации).

Check this custom checkbox

Если вы используете jQuery, делайте так:

$('.your-checkbox').prop('indeterminate',true)

Чекбоксы и кнопки «радио»

Каждый чекбокс и «радио» обернут в <div> с помощью sibling <span> для создания настраиваемого элемента управления и <label> для сопроводительного текста. Структурно, это тот же подход, что и наша стандартная .form-check.

Мы используем селектор вложенных элементов (~) для всех состояний <input> — как :checked – для правильной стилизации наших обычных индикаторов форм.

Мы спрятали дефолтные <input> с помощью opacity и используем класс .custom-control-indicator для создания нового обычного индикатора формы на его обычном месте.

В «проверенных» состояниях используются встроенные, созданные по стандарту кодирования двоичных данных при помощи только 64 символов ASCII иконки (SVG) из Open Iconic. Это улучшает контроль стилизации и позиционирования в браузерах и девайсах.