Формы · Bootstrap v4.6

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.

Bootstrap 4 login form

Bootstrap 4 login form with footer and social media icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.js

Bootstrap version: 4.0.0

Bootstrap 4 login form #20

A cool login form template to be used for any website and app.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap 5 fancy login form with social login support

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.1

Bootstrap 5 login form using neomorphism

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 5.0.0

Bootstrap 5 validation login form using vue.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: boxicons.css, vue.js

Bootstrap version: 5.0.0

Bootstrap blue login

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Bootstrap version: 4.4.1

Bootstrap login

Bootstrap login form in card with social login buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.0

Bootstrap login form #14

A neat and creative free sign in page template, which you can improve and edit further to meet your expectations to a tee.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #20

A modern and easy-to-use free login form with an animated button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #7

Here is a free creative sign-in template design that you can utilize for heaps of different projects and intentions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login form #8

An attention-grabbing free Bootstrap sign-in template design that guarantees full flexibility and mobile device compatibility.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Bootstrap login screen with floating labels

A login screen for Bootstrap 4 with floating form labels, custom buttons, and social button options.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Bootstrap registration page with floating labels

A responsive Bootstrap 4 registration page with floating form labels and social sign up buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

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 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.

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{@includeform-validation-state($state,map-get($data,color),map-get($data,icon));}

Disabled

Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.

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

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 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.

Modern sign in page with split screen format

A Bootstrap 4 sign in page with a split screen format featuring an image and form fields.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.3.1

Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

Registration

Registration form including a number of input fields with validation and some icons for signing up using a social media account.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Bootstrap version: 4.0.0

Translating or customizing the strings

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.

Без этикетки

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

Валидация

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

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

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

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

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

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

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

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

Группы форм

Класс .form-group то самый простой способ добавить некоторую структуру к формам. Он предоставляет гибкий класс, который поощряет правильную группировку меток, элементов управления, необязательного текста справки и сообщений проверки формы.

По умолчанию он применяет только margin-bПетровm, но при необходимости подбирает дополнительные стили в .form-inline. Используйте его с <fieldset>, <div> или почти любым другим элементом.

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

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

Добавьте в стандартные меню <select> класс .custom-select для придания им стандартных стилей.

Open this select menuOneTwoThree

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

Open this select menuOneTwoThreeOpen this select menuOneTwoThree

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

Open this select menuOneTwoThree

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

Open this select menuOneTwoThree

Диапазон

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

Пример диапазона

Входные данные диапазона имеют неявные значения для min и max — 0 и 100 соответственно. Вы можете указать новые значения для тех, кто использует атрибуты min и max.

Пример диапазона

По умолчанию входные данные диапазона «привязываются» к целочисленным значениям. Чтобы изменить это, Вы можете указать значение шага step. В приведенном ниже примере мы удваиваем количество шагов, используя step=”0.5″.

Пример диапазона

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

Загрузка файлов – самая «прожорливая» из всех и требует дополнительного 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, чтобы отключить набор полей в этих браузерах.

Модальное окно bootstrap: разработка формы входа, регистрации и восстановления пароля

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

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

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

Неактивное состояние

Добавить disabled логический атрибут на входе для предотвращения взаимодействия с пользователем. Входы с ограниченными возможностями светлее и добавить not-allowed курсор.

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

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

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

Параметр readonly входы

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

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

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

Добавьте свой документ

Перевода или настройки струн

В :lang() псевдо-класса используется для облегчения перевода “обзор” и “выбрать файл…” текст на другие языки. Просто переопределить или добавить записи в $custom-file-text SCSS переменных с соответствующими тег языка, а локализованные строки.

$custom-file-text:(placeholder:(en:"Choose file...",es:"Seleccionar archivo..."),button-label:(en:"Browse",es:"Navegar"));

Переменные

Переменные $btn-input-* являются общими глобальными переменными между нашими кнопками и нашими компонентами формы. Вы обнаружите, что они часто переназначаются как значения для других переменных, зависящих от компонента.

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

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

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

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

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

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

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

Проверка

Bootstrap включает в себя стили проверки на опасность, предупреждение и успеха состояния относительно контроля форма. Здесь мы расскажем, как они работают:

Вообще говоря, вы хотите использовать определенный состояние для определенных типов обратной связи:

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

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

Радио-кнопки

Toggle this custom radioOr toggle this other custom radio

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

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

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

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

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

Ряд форм

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

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

Рядный

Группы чекбоксов или радио, которые находятся на одной горизонтальной строки похожи на своих сложенных собратьев, но требуют различных HTML и в один класс. Чтобы перейти с накоплением встроенный, падение окружающие <div> добавьте .form-check-inline на <label>, и сохранить .form-check-input на <input>.

1
2
3

1
2
3

С помощью грид

Для более структурированной форме разметки также aдаптивный, Вы можете использовать Bootstrap предопределенный грид классов или миксины для создания горизонтальных форм. Добавить .row класса формироваться группы и использовать .col-*-* классы, чтобы задать ширину этикетки и элементы управления.

Не забудьте добавить .col-form-label В <label>ИИ, а так, они выровнены по вертикали и связанные с ними элементы управления формы. Для <legend> элементов, вы можете использовать .col-form-legend Для того, чтобы они появились похожими на обычных <label> элементы.

Грид Форма разметки также поддержку больших и малых входов.

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

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

Чекбоксы

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

Элементы управления форм

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

Помните, поскольку Bootstrap использует технологии HTML5 doctype, то все входы должны иметь type атрибут.

Ниже приведен полный список с конкретными мерами форма поддерживается Bootstrap и классы, настроить их. Дополнительная документация доступна для каждой группы.