Формы · Bootstrap 4 на русском v4.5

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.

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.

Custom styles

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.

Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .custom-select, and not .form-control.

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 controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

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.

How it works

Here’s how form validation works with Bootstrap:

• HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
• Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
• To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission.
• As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
• Due to constraints in how CSS works, we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.
• All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
• Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
• You may provide custom validity messages with setCustomValidity in JavaScript.

With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.

Inline

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

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.

You may need to manually address the width and alignment of individual form controls with spacing utilities (as shown below). Lastly, be sure to always include a <label> with each form control, even if you need to hide it from non-screenreader visitors with .sr-only.

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.

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

Without labels

Add .position-static to inputs within .form-check that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

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

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

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

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

Альтернатива скрытым лейблам

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

Есть и другие методы обеспечения читабельности лейбла для вспомогательных технологий, – такие как атрибуты aria-label, aria-labelledby или title.

Без меток

Добавьте класс .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.

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

Размерность

Для создания форм заданной высоты используются классы, такие как .form-control-lg и .form-control-sm.

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

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

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

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

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

Ряд форм

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

Более сложную разметку можно также создать системой сеток.

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

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

Сетка формы

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

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

Добавьте атрибут булеанова типа 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. Это улучшает контроль стилизации и позиционирования в браузерах и девайсах.