Формы
Примеры и рекомендации по использованию стилей управления формой, параметров макета и настраиваемых компонентов для создания широкого спектра форм.
Обзор
Формы в Bootstrap по сути являются просто расширением наших стилей перезагрузки форм с добавлением классов. Используйте эти классы для более точной настройки отображения и лучшей отрисовки на разных браузерах и устройствах.
Удостоверьтесь, что используете правильный атрибут type во всех формах ввода (т.е., email для почты и number для цифровой информации), это даст вам преимущества в виде новейших инструментов (таких как проверка email, выборка чисел и т.д.) контроля данных ввода.
Вот демонстрация стилей форм Bootstrap. Читайте документацию по требуемым классам, расположению форм и т.д.
<form><divclass="form-group"><labelfor="exampleInputEmail1">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"><smallid="emailHelp"class="form-text text-muted">Мы никогда никому не передадим Вашу электронную почту.</small></div><divclass="form-group"><labelfor="exampleInputPassword1">Пароль</label><inputtype="password"class="form-control"id="exampleInputPassword1"></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Проверить меня</label></div><buttontype="submit"class="btn btn-primary">Отправить</button></form>Инструменты контроля форм
Текстовые инструменты контроля – такие как <input>, <select> и <textarea> - стилизованы классом .form-control, который содержит основные стили внешнего вида, активного состояния, размерности и т.д.
Изучите наши обычные формы для дальнейшего понимания стилизации <select>.
<form><divclass="form-group"><labelfor="exampleFormControlInput1">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="form-group"><labelfor="exampleFormControlSelect1">Пример меню выбора</label><selectclass="form-control"id="exampleFormControlSelect1"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><divclass="form-group"><labelfor="exampleFormControlSelect2">Пример множественного выбора</label><selectmultipleclass="form-control"id="exampleFormControlSelect2"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><divclass="form-group"><labelfor="exampleFormControlTextarea1">Пример текстового поля</label><textareaclass="form-control"id="exampleFormControlTextarea1"rows="3"></textarea></div></form>Для создания формы загрузки файлов замените .form-control на .form-control-file.
<form><divclass="form-group"><labelfor="exampleFormControlFile1">Пример ввода файла</label><inputtype="file"class="form-control-file"id="exampleFormControlFile1"></div></form>Размерность
Для создания форм заданной высоты используются классы, такие как .form-control-lg и .form-control-sm.
<inputclass="form-control form-control-lg"type="text"placeholder=".form-control-lg"><inputclass="form-control"type="text"placeholder="Ввод по умолчанию"><inputclass="form-control form-control-sm"type="text"placeholder=".form-control-sm"><selectclass="form-control form-control-lg"><option>Большое меню выбора</option></select><selectclass="form-control"><option>Меню выбора по умолчанию</option></select><selectclass="form-control form-control-sm"><option>Маленькое меню выбора</option></select>«Только чтение»
Добавьте атрибут булеанова типа readonly в форму ввода для предотвращения возможности изменения значения ввода. Такие типы ввода выглядят светлее (как неактивные формы ввода), но сохраняют стандартный курсор.
<inputclass="form-control"type="text"placeholder="Здесь поле ввода только для чтения..."readonly>Простой текст только для чтения
Если в ваших формах вы хотите стилизовать элементы <input readonly> как простой текст, используйте класс .form-control-plaintext для удаления оформления форм по умолчанию и сохранения правильных отступов.
<form><divclass="form-group row"><labelfor="staticEmail"class="col-sm-2 col-form-label">Эл. адрес</label><divclass="col-sm-10"><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail"value="email@example.com"></div></div><divclass="form-group row"><labelfor="inputPassword"class="col-sm-2 col-form-label">Пароль</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword"></div></div></form><formclass="form-inline"><divclass="form-group mb-2"><labelfor="staticEmail2"class="sr-only">Эл. адрес</label><inputtype="text"readonlyclass="form-control-plaintext"id="staticEmail2"value="email@example.com"></div><divclass="form-group mx-sm-3 mb-2"><labelfor="inputPassword2"class="sr-only">Пароль</label><inputtype="password"class="form-control"id="inputPassword2"placeholder="Password"></div><buttontype="submit"class="btn btn-primary mb-2">Подтвердить личность</button></form>Ввод диапазона
Установите горизонтальные прокручиваемые входы диапазона с использованием .form-control-range.
<form><divclass="form-group"><labelfor="formControlRange">Пример ввода диапазона</label><inputtype="range"class="form-control-range"id="formControlRange"></div></form>Чекбоксы и радиокнопки
Чекбоксы и радиокнопки, существовавшие по умолчанию, теперь модернизированы единым для обоих классом .form-check, цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а радиокнопки - одного.
Неактивные состояния чекбоксоы и "радио" поддерживаются, но для придания курсору функциональности not-allowed по наведению на родительский <label> вам потребуется добавить в .form-check-input атрибут disabled. Атрибут disabled будет применять более светлый цвет, чтобы указать состояние ввода.
Использование чекбоксов и "радио" имеет целью поддержать HTML-форму валидации и обеспечить понятные, доступные лейблы. Поэтому наши <input> и <label> - имеют одного родителя, в отличие от <input>, расположенного внутри <label>. Это немного более подробно, так как вы должны указывать атрибуты id и for для связи <input> и <label>.
По умолчанию (расположенные по вертикали)
По умолчанию, любое количество идущих один за другим чекбоксов и «радио» кнопок будет располагаться сверху вниз, а класс .form-check правильно отрегулирует пространство между ними.
<divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck1"><labelclass="form-check-label"for="defaultCheck1"> Флажок по умолчанию </label></div><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="defaultCheck2"disabled><labelclass="form-check-label"for="defaultCheck2"> Отключенный флажок </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1"> Радио по умолчанию </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2"><labelclass="form-check-label"for="exampleRadios2"> Второе радио по умолчанию </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled><labelclass="form-check-label"for="exampleRadios3"> Отключенное радио </label></div>В строку
Группируйте чекбоксы или «радио» кнопки по одной горизонтальной линии, добавив класс .form-check-inline в любой элемент класса .form-check.
<divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox1"value="option1"><labelclass="form-check-label"for="inlineCheckbox1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox2"value="option2"><labelclass="form-check-label"for="inlineCheckbox2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="checkbox"id="inlineCheckbox3"value="option3"disabled><labelclass="form-check-label"for="inlineCheckbox3">3 (отключен)</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"><labelclass="form-check-label"for="inlineRadio1">1</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2"><labelclass="form-check-label"for="inlineRadio2">2</label></div><divclass="form-check form-check-inline"><inputclass="form-check-input"type="radio"name="inlineRadioOptions"id="inlineRadio3"value="option3"disabled><labelclass="form-check-label"for="inlineRadio3">3 (отключен)</label></div>Без ярлыков
Добавьте класс .position-static в формы ввода, которые находятся внутри элемента класса .form-check и не имеют какого-либо пояснительного текста. Не забудьте добавить одну из форм «лейбла» для вспомогательных технологий (например, использовав aria-label).
<divclass="form-check"><inputclass="form-check-input position-static"type="checkbox"id="blankCheckbox"value="option1"aria-label="..."></div><divclass="form-check"><inputclass="form-check-input position-static"type="radio"name="blankRadio"id="blankRadio1"value="option1"aria-label="..."></div>Расположение
Т.к. Bootstrap применяет display: block и width: 100% почти ко всем органам контроля форм, формы по умолчанию будут выстраиваться вертикально. Дополнительные классы можно использовать для создания вариаций расположения каждой отдельной формы.
Группы форм
Класс .form-group – самый простой путь придания формам некой структуры. Его единственная цель – создание вокруг надписи margin-bottom и включение контроля. В качестве приятного дополнения: поскольку это обычный класс, его можно использовать с <fieldset>, <div> или практически любым прочим элементом.
<form><divclass="form-group"><labelfor="formGroupExampleInput">Пример метки</label><inputtype="text"class="form-control"id="formGroupExampleInput"placeholder="Пример заполнителя ввода"></div><divclass="form-group"><labelfor="formGroupExampleInput2">Другая метка</label><inputtype="text"class="form-control"id="formGroupExampleInput2"placeholder="Другой заполнитель ввода"></div></form>Сетка форм
Используйте их для расположения форм, которые требуют множественных колонок, различной ширины и других дополнительных параметров выравнивания.
<form><divclass="row"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"></div></div></form>Ряд форм
Вы также можете заменить .row на класс .form-row, который есть разновидность нашего стандартного ряда сетки, который обладает возможностью «перебить» стандартно установленные расстояния между колонками и делает колонки более компактными.
<form><divclass="form-row"><divclass="col"><inputtype="text"class="form-control"placeholder="Имя"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Фамилия"></div></div></form>Более сложную разметку можно также создать системой сеток.
<form><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputEmail4">Эл. адрес</label><inputtype="email"class="form-control"id="inputEmail4"></div><divclass="form-group col-md-6"><labelfor="inputPassword4">Пароль</label><inputtype="password"class="form-control"id="inputPassword4"></div></div><divclass="form-group"><labelfor="inputAddress">Адрес</label><inputtype="text"class="form-control"id="inputAddress"placeholder="проспект, улица"></div><divclass="form-group"><labelfor="inputAddress2">Адрес 2</label><inputtype="text"class="form-control"id="inputAddress2"placeholder="Квартира, студия или этаж"></div><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputГород">Город</label><inputtype="text"class="form-control"id="inputГород"></div><divclass="form-group col-md-4"><labelfor="inputState">Область</label><selectid="inputState"class="form-control"><optionselected>Выбрать...</option><option>...</option></select></div><divclass="form-group col-md-2"><labelfor="inputZip">Индекс</label><inputtype="text"class="form-control"id="inputZip"></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck"><labelclass="form-check-label"for="gridCheck"> Проверить меня </label></div></div><buttontype="submit"class="btn btn-primary">Войти в систему</button></form>Горизонтальные формы
Создайте горизонтальные формы с помощью сеток, добавив класс .row к группам форм и используя классы .col-*-* для задания ширины ваших надписей и элементов контроля. Обязательно добавьте класс .col-form-label также и в ваши <label> для того, чтобы они приобрели вертикальное центрирование относительно связанных с ними элементов контроля форм.
Временами вам может понадобиться классы марджина или паддинга, чтобы создать классное выравнивание. Например, мы удалили padding-top в наших вертикально расположенных лейблах ввода "радио", для лучшего выравнивания текста.
<form><divclass="form-group row"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Эл. адрес</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"></div></div><divclass="form-group row"><labelfor="inputPassword3"class="col-sm-2 col-form-label">Пароль</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"></div></div><fieldsetclass="form-group row"><legendclass="col-form-label col-sm-2 float-sm-left pt-0">Радио</legend><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="option1"checked><labelclass="form-check-label"for="gridRadios1"> Первое радио </label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2"><labelclass="form-check-label"for="gridRadios2"> Второе радио </label></div><divclass="form-check disabled"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="option3"disabled><labelclass="form-check-label"for="gridRadios3"> Третье отключенное радио </label></div></div></fieldset><divclass="form-group row"><divclass="col-sm-10 offset-sm-2"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck1"><labelclass="form-check-label"for="gridCheck1"> Пример чекбокса </label></div></div></div><divclass="form-group row"><divclass="col-sm-10"><buttontype="submit"class="btn btn-primary">Войти</button></div></div></form>Размеры надписей горизонтальных форм
Обязательно используйте классы .col-form-label-sm или .col-form-label-lg в своих <label> для того, чтобы размеры шрифтов названия формы и вспомогательной надписи в пустой форме (т.н. placeholder) ввода совпадали.
<form><divclass="form-group row"><labelfor="colFormLabelSm"class="col-sm-2 col-form-label col-form-label-sm">Эл. адрес</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-sm"id="colFormLabelSm"placeholder="col-form-label-sm"></div></div><divclass="form-group row"><labelfor="colFormLabel"class="col-sm-2 col-form-label">Эл. адрес</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="colFormLabel"placeholder="col-form-label"></div></div><divclass="form-group row"><labelfor="colFormLabelLg"class="col-sm-2 col-form-label col-form-label-lg">Эл. адрес</label><divclass="col-sm-10"><inputtype="email"class="form-control form-control-lg"id="colFormLabelLg"placeholder="col-form-label-lg"></div></div></form>Размеры колонок
Как показано в предыдущих примерах, наша система сеток позволит вам расположить любое количество классов .col внутри рядов класса .row или .form-row. Такая верстка разделит доступную ширину поровну между колонками. Вы также можете создать субнабор колонок, которые займут либо меньше, либо больше места (как необходимо), в то время как колонки класса .col равномерно распределятся по оставшейся ширине, к примеру, как классы .col-7.
<form><divclass="form-row"><divclass="col-7"><inputtype="text"class="form-control"placeholder="Город"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Область"></div><divclass="col"><inputtype="text"class="form-control"placeholder="Индекс"></div></div></form>Авторазмеры
В примере ниже для вертикального центрирования содержимого используются обычные инструменты флексбокса, также в нем использован класс .col вместо .col-auto - что заставляет колонки занять места лишь столько, сколько необходимо.
<form><divclass="form-row align-items-center"><divclass="col-auto"><labelclass="sr-only"for="inlineFormInput">Имя</label><inputtype="text"class="form-control mb-2"id="inlineFormInput"placeholder="Иванова Анна"></div><divclass="col-auto"><labelclass="sr-only"for="inlineFormInputGroup">Имя пользователя</label><divclass="input-group mb-2"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroup"placeholder="Имя пользователя"></div></div><divclass="col-auto"><divclass="form-check mb-2"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck"><labelclass="form-check-label"for="autoSizingCheck"> Запомните меня </label></div></div><divclass="col-auto"><buttontype="submit"class="btn btn-primary mb-2">Отправить</button></div></div></form>Вы можете заменить их опять на классы колонок определенного размера.
<form><divclass="form-row align-items-center"><divclass="col-sm-3 my-1"><labelclass="sr-only"for="inlineFormInputName">Имя</label><inputtype="text"class="form-control"id="inlineFormInputName"placeholder="Иванова Анна"></div><divclass="col-sm-3 my-1"><labelclass=#34;sr-only"for="inlineFormInputGroupUsername">Имя пользователя</label><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername"placeholder="Имя пользователя"></div></div><divclass="col-auto my-1"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="autoSizingCheck2"><labelclass="form-check-label"for="autoSizingCheck2"> Запомните меня </label></div></div><divclass="col-auto my-1"><buttontype="submit"class="btn btn-primary">Отправить</button></div></div></form>И, разумеется – поддерживаются обычные формы контроля.
<form><divclass="form-row align-items-center"><divclass="col-auto my-1"><labelclass="mr-sm-2 sr-only"for="inlineFormCustomSelect">Предпочтение</label><selectclass="custom-select mr-sm-2"id="inlineFormCustomSelect"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">три</option></select></div><divclass="col-auto my-1"><divclass="custom-control custom-checkbox mr-sm-2"><inputtype="checkbox"class="custom-control-input"id="customControlAutosizing"><labelclass="custom-control-label"for="customControlAutosizing">Помните мои предпочтения</label></div></div><divclass="col-auto my-1"><buttontype="submit"class="btn btn-primary">Отправить</button></div></div></form>Вложенные формы
Используйте класс .form-inline для отображения серии лейблов, органов контроля форм и кнопок на одном горизонтальном ряду. Органы контроля форм внутри строчных форм могут слегка отличаться от своего состояния по умолчанию.
- Органы контроля имеют
display: flex, что скрывает пустое пространство в HTML и позволяет вам обеспечить контроль над выравниванием с помощью утилит отступа и флексбокса. - Органы контроля и группы ввода имеют
width: auto, который «перебивает» умолчание Bootstrapwidth: 100%. - На зонах видимости от 576рх органы контроля отображаются как строчные элементы для удобства отображения на узких зонах просмотра.
Вам может понадобиться вручную задать ширину и выравнивание каждого элемента контроля форм, используя утилиты отступов (как показано ниже).Всегда включайте <label> в каждый элемент контроля, даже если вы хотите спрятать его с помощью класса .sr-only от читателей, которые не используют экранные читалки.
<formclass="form-inline"><labelclass="sr-only"for="inlineFormInputName2">Имя</label><inputtype="text"class="form-control mb-2 mr-sm-2"id="inlineFormInputName2"placeholder="Jane Doe"><labelclass="sr-only"for="inlineFormInputGroupUsername2">Имя пользователя</label><divclass="input-group mb-2 mr-sm-2"><divclass="input-group-prepend"><divclass="input-group-text">@</div></div><inputtype="text"class="form-control"id="inlineFormInputGroupUsername2"placeholder="Username"></div><divclass="form-check mb-2 mr-sm-2"><inputclass="form-check-input"type="checkbox"id="inlineFormCheck"><labelclass="form-check-label"for="inlineFormCheck"> Запомните меня </label></div><buttontype="submit"class="btn btn-primary mb-2">Отправить</button></form>Обычные органы контроля и выбора также поддерживаются.
<formclass="form-inline"><labelclass="my-1 mr-2"for="inlineFormCustomSelectPref">Предпочтения</label><selectclass="custom-select my-1 mr-sm-2"id="inlineFormCustomSelectPref"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><divclass="custom-control custom-checkbox my-1 mr-sm-2"><inputtype="checkbox"class="custom-control-input"id="customControlInline"><labelclass="custom-control-label"for="customControlInline">Запомнить мои предпочтения</label></div><buttontype="submit"class="btn btn-primary my-1">Отправить</button></form>Альтернатива скрытым ярлыкам
Вспомогательные технологии, такие как программы чтения с экрана, будут иметь проблемы с вашими формами, если Вы не добавите в форму метку для каждого ввода. При их использовании вы можете скрыть лейблы, используя класс .sr-only. Есть и другие методы обеспечения читабельности лейбла для вспомогательных технологий, - такие как атрибуты aria-label, aria-labelledby или title. Если ни один из них не присутствует, вспомогательные технологии могут прибегать к использованию атрибута placeholder, если он присутствует, но учтите, что использование placeholder в качестве замены для других методов маркировки не рекомендуется.
Вспомогательный текст
Блочный вспомогательный текст в формах можно создать классом .form-text (.help-block в BS3). Линейный текст можно гибко внедрить с помощью любого строчного элемента HTML и классов типа .text-muted.
Связь вспомогательного текста с органами контроля форм
Вспомогательный текст должен быть явно связан с родственными его элементами контроля форм, это делается атрибутом aria-describedby. Это обеспечит вспомогательным технологиям (таким как экранные читалки) возможность прочитать этот текст, когда пользователь обращается к связанному с этим текстом элементу контроля.
Вспомогательный текст, расположенный ниже поля ввода, можно стилизовать классом .form-text, который содержит свойство display: block и добавляет верхний марджин для увеличения отступа от поля ввода выше.
<labelfor="inputPassword5">Пароль</label><inputtype="password"id="inputPassword5"class="form-control"aria-describedby="passwordHelpBlock"><smallid="passwordHelpBlock"class="form-text text-muted"> Ваш пароль должен состоять из 8–20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
</small>Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то <small>, <span> или что-то еще) с не более чем служебным классом.
<formclass="form-inline"><divclass="form-group"><labelfor="inputPassword6">Пароль</label><inputtype="password"id="inputPassword6"class="form-control mx-sm-3"aria-describedby="passwordHelpInline"><smallid="passwordHelpInline"class="text-muted"> Должен быть 8-20 символов. </small></div></form>Деактивированные формы
Добавьте булеан disabled в форму ввода, чтобы сделать ее светлее и предотвратить возможность взаимодействия юзера с данной формой.
<inputclass="form-control"id="disabledInput"type="text"placeholder="Disabled input here..."disabled>Для деактивации элементов контроля внутри <fieldset>, добавьте атрибут disabled.
<form><fieldsetdisabled><legend>Пример отключенного набора полей</legend><divclass="form-group"><labelfor="disabledTextInput">Отключенное поле ввода</label><inputtype="text"id="disabledTextInput"class="form-control"placeholder="Отключенное поле ввода"></div><divclass="form-group"><labelfor="disabledSelect">Отключенное меню выбора</label><selectid="disabledSelect"class="form-control"><option>Отключенное меню выбора</option></select></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="disabledFieldsetCheck"disabled><labelclass="form-check-label"for="disabledFieldsetCheck"> Не могу это проверить </label></div></div><buttontype="submit"class="btn btn-primary">Отправить</button></fieldset></form>Проблемы со ссылками
Браузеры обрабатывают все элементы управления собственными формами (элементы <input>, <select> и <button>) внутри <fieldset disabled> как отключенными, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши.
Однако, если Ваша форма также включает в себя пользовательские элементы, похожие на кнопки, такие как <a ... class="btn btn-*">, им будет присвоен только стиль pointer-events: none. Как отмечено в разделе о отключенном состоянии для кнопок (и особенно в подразделе для элементов привязки), это свойство CSS еще не стандартизированы и не полностью поддерживаются в Internet Explorer 10. Элементы управления на основе привязки также будут доступны для фокусировки и работать с ними с клавиатуры. Вы должны вручную изменить эти элементы управления, добавив tabindex="-1", чтобы они не получали фокус, и aria-disabled="disabled", чтобы сигнализировать о своем состоянии вспомогательным технологиям.
Кроссбраузерность
Хотя Bootstrap применяет эти стили во всех браузерах, Internet Explorer 11 и ниже не полностью поддерживает атрибут disabled в <fieldset>. Используйте собственный JavaScript для дезактивации <fieldset>, чтобы отключить набор полей в этих браузерах.
Валидация
Получите обратную связь и мощные возможности проверки с помощью валидации форм HTML5 – доступной во всех поддерживаемых браузерах. Выбирайте дефолтную обратную связь валидации от браузера или внедрите стандартные сообщения посредством наших встроенных классов и JavaScript.
Как это работает
Вот как валидация форм работает с 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.
Знаю всё это, рассмотрим следующие демонстрации наших пользовательских стилей проверки формы, дополнительных классов на стороне сервера и настроек браузера по умолчанию.
Пользовательские стили
Для стандартных сообщений проверки форм Bootstrap вам потребуется добавить булеан novalidate к <form>. Это деактивирует всплывающие сообщения обратной связи, существующие в браузере по умолчанию, но одновременно сохранит доступ JS к API валидации форм. Попробуйте войти в форму ниже, наш JavaScript выдаст вам сообщение обратной связи. При попытке входа вы увидите, как стили :invalid и :valid применятся к элементам управления формы.
В пользовательских стилях обратной связи применяются пользовательские цвета, границы, стили фокусировки и значки фона для лучшей передавачи обратной связи. Фоновые значки для <select> доступны только с .custom-select, но не с .form-control.
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationCustom01">Имя</label><inputtype="text"class="form-control"id="validationCustom01"value="Иван"required><divclass="valid-feedback"> Выглядит хорошо! </div></div><divclass="col-md-6 mb-3"><labelfor="validationCustom02">Фамилия</label><inputtype="text"class="form-control"id="validationCustom02"value="Петров"required><divclass="valid-feedback"> Выглядит хорошо! </div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationCustom03">Город</label><inputtype="text"class="form-control"id="validationCustom03"required><divclass="invalid-feedback"> Укажите действующий город. </div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom04">Область</label><selectclass="custom-select"id="validationCustom04"required><optionselecteddisabledvalue="">Выбрать...</option><option>...</option></select><divclass="invalid-feedback"> Пожалуйста, выберите допустимую область. </div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom05">Индекс</label><inputtype="text"class="form-control"id="validationCustom05"required><divclass="invalid-feedback"> Пожалуйста, предоставьте действующий почтовый индекс. </div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required><labelclass="form-check-label"for="invalidCheck"> Согласитесь с условиями </label><divclass="invalid-feedback"> Вы должны согласиться перед отправкой. </div></div></div><buttonclass="btn btn-primary"type="submit">Отправить форму</button></form><script>// Пример стартового JavaScript для отключения отправки форм при наличии недопустимых полей
(function(){'use strict';window.addEventListener('load',function(){// Получите все формы, к которым мы хотим применить пользовательские стили проверки Bootstrap
varforms=document.getElementsByClassName('needs-validation');// Зацикливайтесь на них и предотвращайте подчинение
varvalidation=Array.prototype.filter.call(forms,function(form){form.addEventListener('submit',function(event){if(form.checkValidity()===false){event.preventDefault();event.stopPropagation();}form.classList.add('was-validated');},false);});},false);})();</script>Настройки браузера по умолчанию
Не нужны стандартные сообщения обратной связи? Не хотите писать скрипты JavaScript для изменения поведения форм? Используйте умолчания браузера. Попробуйте войти в форму ниже. В зависимости от вашего браузера и ОС вы увидите немного разные стили обратной связи.
Хотя эти сообщения обратной связи нельзя настраивать CSS, их можно настроить с JavaScript.
<form><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationDefault01">Имя</label><inputtype="text"class="form-control"id="validationDefault01"value="Иван"required></div><divclass="col-md-6 mb-3"><labelfor="validationDefault02">Фамилия</label><inputtype="text"class="form-control"id="validationDefault02"value="Петров"required></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationDefault03">Город</label><inputtype="text"class="form-control"id="validationDefault03"required></div><divclass="col-md-3 mb-3"><labelfor="validationDefault04">Область</label><selectclass="custom-select"id="validationDefault04"required><optionselecteddisabledvalue="">Выбрать...</option><option>...</option></select></div><divclass="col-md-3 mb-3"><labelfor="validationDefault05">Индекс</label><inputtype="text"class="form-control"id="validationDefault05"required></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck2"required><labelclass="form-check-label"for="invalidCheck2"> Согласитесь с условиями </label></div></div><buttonclass="btn btn-primary"type="submit">Отправить форму</button></form>На стороне сервера
Мы рекомендуем использовать валидацию со стороны клиента, но если вам понадобится таковая со стороны сервера, вы можете обозначать валидные и невалидные поля форм классами .is-invalid и .is-valid. Заметим, что их можно также использовать с классом .invalid-feedback.
<form><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationServer01">Имя</label><inputtype="text"class="form-control is-valid"id="validationServer01"value="Иван"required><divclass="valid-feedback"> Выглядит хорошо! </div></div><divclass="col-md-6 mb-3"><labelfor="validationServer02">Фамилия</label><inputtype="text"class="form-control is-valid"id="validationServer02"value="Петров"required><divclass="valid-feedback"> Выглядит хорошо! </div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationServer03">Город</label><inputtype="text"class="form-control is-invalid"id="validationServer03"aria-describedby="validationServer03Feedback"required><divid="validationServer03Feedback"class="invalid-feedback"> Укажите действующий город. </div></div><divclass="col-md-3 mb-3"><labelfor="validationServer04">Область</label><selectclass="custom-select is-invalid"id="validationServer04"aria-describedby="validationServer04Feedback"required><optionselecteddisabledvalue="">Выбрать...</option><option>...</option></select><divid="validationServer04Feedback"class="invalid-feedback"> Пожалуйста, выберите допустимую область. </div></div><divclass="col-md-3 mb-3"><labelfor="validationServer05">Индекс</label><inputtype="text"class="form-control is-invalid"id="validationServer05"aria-describedby="validationServer05Feedback"required><divid="validationServer05Feedback"class="invalid-feedback"> Пожалуйста, предоставьте действующий почтовый индекс. </div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input is-invalid"type="checkbox"value=""id="invalidCheck3"aria-describedby="invalidCheck3Feedback"required><labelclass="form-check-label"for="invalidCheck3"> Согласитесь с условиями </label><divid="invalidCheck3Feedback"class="invalid-feedback"> Вы должны согласиться перед отправкой. </div></div></div><buttonclass="btn btn-primary"type="submit">Отправить форму</button></form>Поддерживаемые элементы
Стили проверки доступны для следующих элементов управления формы и компонентов:
<input>и<textarea>с.form-control(включая до одного.form-controlв группах ввода)<select>с.form-selectили.custom-select.form-check.custom-checkboxи.custom-radio.custom-file
<formclass="was-validated"><divclass="mb-3"><labelfor="validationTextarea">Текстовая область</label><textareaclass="form-control is-invalid"id="validationTextarea"placeholder="Пример обязательного текстового поля"required></textarea><divclass="invalid-feedback"> Пожалуйста, введите сообщение в текстовое поле. </div></div><divclass="custom-control custom-checkbox mb-3"><inputtype="checkbox"class="custom-control-input"id="customControlValidation1"required><labelclass="custom-control-label"for="customControlValidation1">Установите этот настраиваемый флажок</label><divclass="invalid-feedback">Пример неверного текста отзыва</div></div><divclass="custom-control custom-radio"><inputtype="radio"class="custom-control-input"id="customControlValidation2"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation2">Переключить это настраиваемое радио</label></div><divclass="custom-control custom-radio mb-3"><inputtype="radio"class="custom-control-input"id="customControlValidation3"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation3">Или переключите это другое настраиваемое радио</label><divclass="invalid-feedback">Еще пример недопустимого текста отзыва</div></div><divclass="mb-3"><selectclass="custom-select"required><optionvalue="">Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><divclass="invalid-feedback">Пример неверного отзыва о пользовательском выборе</div></div><divclass="custom-file mb-3"><inputtype="file"class="custom-file-input"id="validatedCustomFile"required><labelclass="custom-file-label"for="validatedCustomFile">Выбрать файл...</label><divclass="invalid-feedback">Пример неверного отзыва о пользовательском файле</div></div><divclass="mb-3"><divclass="input-group is-invalid"><divclass="input-group-prepend"><spanclass="input-group-text"id="validatedInputGroupPrepend">@</span></div><inputtype="text"class="form-control is-invalid"aria-describedby="validatedInputGroupPrepend"required></div><divclass="invalid-feedback"> Пример неверной обратной связи группы ввода </div></div><divclass="mb-3"><divclass="input-group is-invalid"><divclass="input-group-prepend"><labelclass="input-group-text"for="validatedInputGroupSelect">Параметры</label></div><selectclass="custom-select"id="validatedInputGroupSelect"required><optionvalue="">Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="invalid-feedback"> Пример неверной обратной связи группы ввода </div></div><divclass="input-group is-invalid"><divclass="custom-file"><inputtype="file"class="custom-file-input"id="validatedInputGroupCustomFile"required><labelclass="custom-file-label"for="validatedInputGroupCustomFile">Выбрать файл...</label></div><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div></div><divclass="invalid-feedback"> Пример неверной обратной связи группы ввода </div></form>Всплывающие подсказки
Если разметка ваших форм позволит, вы можете заменить классы .{valid|invalid}-feedback классами .{valid|invalid}-tooltip - для отображения обратной связи валидации, стилизованной под всплывающую подсказку. Для правильного позиционирования всплывающей подсказки удостоверьтесь, что родительский элемент содержит position: relative. В приведенном ниже примере у наших классов столбцов это уже есть, но Вашему проекту может потребоваться альтернативная настройка.
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationTooltip01">Имя</label><inputtype="text"class="form-control"id="validationTooltip01"value="Иван"required><divclass="valid-tooltip"> Выглядит хорошо! </div></div><divclass="col-md-6 mb-3"><labelfor="validationTooltip02">Фамилия</label><inputtype="text"class="form-control"id="validationTooltip02"value="Петров"required><divclass="valid-tooltip"> Выглядит хорошо! </div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationTooltip03">Город</label><inputtype="text"class="form-control"id="validationTooltip03"required><divclass="invalid-tooltip"> Укажите действующий город. </div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip04">Область</label><selectclass="custom-select"id="validationTooltip04"required><optionselecteddisabledvalue="">Выбрать...</option><option>...</option></select><divclass="invalid-tooltip"> Пожалуйста, выберите допустимую область. </div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip05">Индекс</label><inputtype="text"class="form-control"id="validationTooltip05"required><divclass="invalid-tooltip"> Пожалуйста, предоставьте действующий почтовый индекс. </div></div></div><buttonclass="btn btn-primary"type="submit">Отправить форму</button></form>Пользовательская настройка
Состояния проверки могут быть настроены с помощью Sass с помощью карты $form-validation-states. Расположенная в нашем файле _variables.scss, эта карта Sass зацикливается, чтобы создать 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));}Проверка группы ввода
Чтобы определить, какие элементы нуждаются в скругленных углах внутри группы ввода с проверкой, группе ввода требуется дополнительный класс .has-validation.
<divclass="input-group has-validation"><divclass="input-group-prepend"><spanclass="input-group-text">@</span></div><inputtype="text"class="form-control"required><divclass="invalid-feedback"> Пожалуйста, выберите имя пользователя. </div></div>Пользовательские формы
Для более гибкой настройки и кроссбраузерной согласованности используйте наши обычные элементы форм в качестве заменителей таковых, присутствующих в браузерах.
Чекбоксы и кнопки «радио»
Каждый чекбокс и радиокнопка обернут в <div> с помощью sibling <span> для создания настраиваемого элемента управления и <label> для сопроводительного текста. Структурно, это тот же подход, что и наша стандартная .form-check.
Мы используем селектор вложенных элементов (~) для всех состояний <input> - как :checked – для правильной стилизации наших обычных индикаторов форм. При сочетании его с классом .custom-control-description можно стилизовать текст каждого элемента, основанного на состоянии <input>.
Мы спрятали дефолтные <input> с помощью opacity и используем класс .custom-control-indicator для создания нового обычного индикатора формы на его обычном месте. К несчастью мы не можем создать таковой, просто используя <input>, т.к. content в CSS не работает с этим элементом.
В «проверенных» состояниях используются встроенные, созданные по стандарту кодирования двоичных данных при помощи только 64 символов ASCII иконки (SVG) из Open Iconic. Это улучшает контроль стилизации и позиционирования в браузерах и девайсах.
Чекбоксы
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheck1"><labelclass="custom-control-label"for="customCheck1">Установите этот настраиваемый флажок</label></div>Пользовательские флажки также могут использовать псевдокласс :indeterminate при ручной установке с помощью JavaScript (нет доступного атрибута HTML для его указания).
Если Вы используете jQuery, этого должно быть достаточно:
$('.your-checkbox').prop('indeterminate',true)Радиокнопки
<divclass="custom-control custom-radio"><inputtype="radio"id="customRadio1"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio1">Переключить это настраиваемое радио</label></div><divclass="custom-control custom-radio"><inputtype="radio"id="customRadio2"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio2">Или переключите это другое настраиваемое радио</label></div>Горизонтально
<divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline1"name="customRadioInline"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline1">Переключить это настраиваемое радио</label></div><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline2"name="customRadioInline"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline2">Или переключите это другое настраиваемое радио</label></div>Деактивированные
Добавьте булеан disabled в <input> и стандартный индикатор и лейбл-описание автоматически соответственно стилизуются.
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheckDisabled1"disabled><labelclass="custom-control-label"for="customCheckDisabled1">Установите этот настраиваемый флажок</label></div><divclass="custom-control custom-radio"><inputtype="radio"name="radioDisabled"id="customRadioDisabled2"class="custom-control-input"disabled><labelclass="custom-control-label"for="customRadioDisabled2">Переключить это настраиваемое радио</label></div>Выключатели
Выключатель имеет разметку пользовательского флажка, но использует класс .custom-switch для рендеринга тумблера. Выключатели также поддерживают атрибут отключенния disabled.
<divclass="custom-control custom-switch"><inputtype="checkbox"class="custom-control-input"id="customSwitch1"><labelclass="custom-control-label"for="customSwitch1">Переключить этот элемент переключателя</label></div><divclass="custom-control custom-switch"><inputtype="checkbox"class="custom-control-input"disabledid="customSwitch2"><labelclass="custom-control-label"for="customSwitch2">Отключенный переключающий элемент</label></div>Меню выбора
Добавьте в стандартные меню <select> класс .custom-select для придания им стандартных стилей.
<selectclass="custom-select"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Вы также можете выбирать из небольших и больших пользовательских выборок, чтобы соответствовать нашим текстовым вводам аналогичного размера.
<selectclass="custom-select custom-select-lg mb-3"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><selectclass="custom-select custom-select-sm"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Также поддерживается множественный атрибут multiple:
<selectclass="custom-select"multiple><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Как и атрибут размера области выбора size:
<selectclass="custom-select"size="3"><optionselected>Откройте это меню выбора</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select>Диапазон
Создавайте обычные элементы контроля <input type="range"> с помощью класса .custom-range. Ползунок (т.е. его фон и все элементы) и элемент управления («каретка») стилизованы для одинакового вида во всех браузерах. Т.к. лишь IE и Firefox поддерживают «заполнение» «трека» (т.е. дорожки) справа или слева от ползунка, для индикации прогресса проигрывания, сегодня мы не поддерживаем это свойство.
<labelfor="customRange1">Пример диапазона</label><inputtype="range"class="custom-range"id="customRange1">Входные данные диапазона имеют неявные значения для min и max — 0 и 100 соответственно. Вы можете указать новые значения для тех, кто использует атрибуты min и max.
<labelfor="customRange2">Пример диапазона</label><inputtype="range"class="custom-range"min="0"max="5"id="customRange2">По умолчанию входные данные диапазона «привязываются» к целочисленным значениям. Чтобы изменить это, Вы можете указать значение шага step. В приведенном ниже примере мы удваиваем количество шагов, используя step="0.5".
<labelfor="customRange3">Пример диапазона</label><inputtype="range"class="custom-range"min="0"max="5"step="0.5"id="customRange3">Загрузка файлов
Рекомендуемый плагин для анимации ввода пользовательских файлов: bs-custom-file-input, это то, что мы сейчас используем здесь, в наших документах.
Загрузка файлов – самая «прожорливая» функция из всех и требует дополнительного JavaScript для оснащения её функциональностью «Выберите файл» и текста названия выбранного файла.
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFile"><labelclass="custom-file-label"for="customFile">Выбрать файл</label></div>Мы скрываем файл по умолчанию <input> через opacity и вместо этого ставим <label>. Кнопка генерируется и позиционируется с ::after. Наконец, мы объявляем ширину width и высоту height на <input> для правильного интервала для окружающего содержимого.
Перевод или настройка строк с помощью SCSS
Псевдокласс :lang() pseudo-class используется для легкого перевода текста “Browse” и “Choose file…» на другие языки. Просто перепишите или добавьте к переменной SCSS $custom-file-text нужный тэг языка и локализованных строк. Строки на английском можно настроить тем же способом. Например, вот как можно добавить перевод на испанский (тэг es):
$custom-file-text:(en:"Browse",es:"Elegir");Вот lang(ru) в действии над пользовательским вводом файла для русского перевода:
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFileLang"lang="ru"><labelclass="custom-file-label"for="customFileLang">Выберите файл</label></div>Вам нужно будет правильно установить язык Вашего документа (или его поддерева), чтобы отображался правильный текст. Это можно сделать с помощью атрибута lang в элементе <html> или Content-Language HTTP header среди других методов.
Перевод или настройка строк с помощью HTML
Bootstrap также предоставляет способ перевести текст «Обзор» в HTML с помощью атрибута data-browse, который можно добавить к настраиваемой метке ввода (пример на русском языке):
<divclass="custom-file"><inputtype="file"class="custom-file-input"id="customFileLangHTML"><labelclass="custom-file-label"for="customFileLangHTML"data-browse="Выбрать файл">Добавьте свой документ</label></div>