Cмотреть на GitHub

Формы

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

Обзор

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

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

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

Мы никогда никому не передадим Вашу электронную почту. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Адрес электронной почты</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">Мы никогда никому не передадим Вашу электронную почту.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Проверить меня</label>
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

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

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

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

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Адрес электронной почты</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Пример меню выбора</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Пример множественного выбора</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Пример текстового поля</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

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

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Пример ввода файла</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Размерность

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

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Ввод по умолчанию">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Большое меню выбора</option>
</select>
<select class="form-control">
  <option>Меню выбора по умолчанию</option>
</select>
<select class="form-control form-control-sm">
  <option>Маленькое меню выбора</option>
</select>

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

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

<input class="form-control" type="text" placeholder="Здесь поле ввода только для чтения..." readonly>

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

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

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Эл. адрес</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Пароль</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Подтвердить личность</button>
</form>

Ввод диапазона

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

<form>
  <div class="form-group">
    <label for="formControlRange">Пример ввода диапазона</label>
    <input type="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 правильно отрегулирует пространство между ними.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Флажок по умолчанию
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Отключенный флажок
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Радио по умолчанию
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Второе радио по умолчанию
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Отключенное радио
  </label>
</div>

В строку

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

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (отключен)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (отключен)</label>
</div>

Без ярлыков

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

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="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>
  <div class="form-group">
    <label for="formGroupExampleInput">Пример метки</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Пример заполнителя ввода">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Другая метка</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Другой заполнитель ввода">
  </div>
</form>

Сетка форм

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

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Имя">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Фамилия">
    </div>
  </div>
</form>

Ряд форм

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

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Имя">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Фамилия">
    </div>
  </div>
</form>

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

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Эл. адрес</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Пароль</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Адрес</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="проспект, улица">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Адрес 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Квартира, студия или этаж">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputГород">Город</label>
      <input type="text" class="form-control" id="inputГород">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">Область</label>
      <select id="inputState" class="form-control">
        <option selected>Выбрать...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Индекс</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Проверить меня
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Войти в систему</button>
</form>

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

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

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

Радио 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Радио</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          Первое радио
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Второе радио
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Третье отключенное радио
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Пример чекбокса
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Войти</button>
    </div>
  </div>
</form>
Размеры надписей горизонтальных форм

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

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Эл. адрес</label>
    <div class="col-sm-10">
      <input type="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>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="Город">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Область">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Индекс">
    </div>
  </div>
</form>

Авторазмеры

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

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Имя</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Иванова Анна">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Имя пользователя</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Имя пользователя">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Запомните меня
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Отправить</button>
    </div>
  </div>
</form>

Вы можете заменить их опять на классы колонок определенного размера.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Имя</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Иванова Анна">
    </div>
    <div class="col-sm-3 my-1">
      <label class=#34;sr-only" for="inlineFormInputGroupUsername">Имя пользователя</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Имя пользователя">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Запомните меня
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </div>
</form>

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

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Предпочтение</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Выбрать...</option>
        <option value="1">Один</option>
        <option value="2">Два</option>
        <option value="3">три</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Помните мои предпочтения</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </div>
</form>

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

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

  • Органы контроля имеют display: flex, что скрывает пустое пространство в HTML и позволяет вам обеспечить контроль над выравниванием с помощью утилит отступа и флексбокса.
  • Органы контроля и группы ввода имеют width: auto, который «перебивает» умолчание Bootstrap width: 100%.
  • На зонах видимости от 576рх органы контроля отображаются как строчные элементы для удобства отображения на узких зонах просмотра.

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

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Имя</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Имя пользователя</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Запомните меня
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Отправить</button>
</form>

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

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Предпочтения</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Выбрать...</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Запомнить мои предпочтения</label>
  </div>

  <button type="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 и добавляет верхний марджин для увеличения отступа от поля ввода выше.

Ваш пароль должен состоять из 8–20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи. 
<label for="inputPassword5">Пароль</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Ваш пароль должен состоять из 8–20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
</small>

Встроенный текст может использовать любой типичный встроенный элемент HTML (будь то <small>, <span> или что-то еще) с не более чем служебным классом.

Должен быть 8-20 символов. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Пароль</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Должен быть 8-20 символов.
    </small>
  </div>
</form>

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

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

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Для деактивации элементов контроля внутри <fieldset>, добавьте атрибут disabled.

Пример отключенного набора полей 
<form>
  <fieldset disabled>
    <legend>Пример отключенного набора полей</legend>
    <div class="form-group">
      <label for="disabledTextInput">Отключенное поле ввода</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Отключенное поле ввода">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Отключенное меню выбора</label>
      <select id="disabledSelect" class="form-control">
        <option>Отключенное меню выбора</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Не могу это проверить
        </label>
      </div>
    </div>
    <button type="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.

Выглядит хорошо!
Выглядит хорошо!
Укажите действующий город.
Пожалуйста, выберите допустимую область.
Пожалуйста, предоставьте действующий почтовый индекс.
Вы должны согласиться перед отправкой. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">Имя</label>
      <input type="text" class="form-control" id="validationCustom01" value="Иван" required>
      <div class="valid-feedback">
        Выглядит хорошо!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Фамилия</label>
      <input type="text" class="form-control" id="validationCustom02" value="Петров" required>
      <div class="valid-feedback">
        Выглядит хорошо!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">Город</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Укажите действующий город.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">Область</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Выбрать...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Пожалуйста, выберите допустимую область.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Индекс</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Пожалуйста, предоставьте действующий почтовый индекс.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Согласитесь с условиями
      </label>
      <div class="invalid-feedback">
        Вы должны согласиться перед отправкой.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Отправить форму</button>
</form>

<script>
// Пример стартового JavaScript для отключения отправки форм при наличии недопустимых полей
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Получите все формы, к которым мы хотим применить пользовательские стили проверки Bootstrap
    var forms = document.getElementsByClassName('needs-validation');
    // Зацикливайтесь на них и предотвращайте подчинение
    var validation = 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>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">Имя</label>
      <input type="text" class="form-control" id="validationDefault01" value="Иван" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Фамилия</label>
      <input type="text" class="form-control" id="validationDefault02" value="Петров" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">Город</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">Область</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Выбрать...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Индекс</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Согласитесь с условиями
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Отправить форму</button>
</form>

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

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

Выглядит хорошо!
Выглядит хорошо!
Укажите действующий город.
Пожалуйста, выберите допустимую область.
Пожалуйста, предоставьте действующий почтовый индекс.
Вы должны согласиться перед отправкой. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">Имя</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Иван" required>
      <div class="valid-feedback">
        Выглядит хорошо!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Фамилия</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Петров" required>
      <div class="valid-feedback">
        Выглядит хорошо!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">Город</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Укажите действующий город.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">Область</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Выбрать...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Пожалуйста, выберите допустимую область.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Индекс</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Пожалуйста, предоставьте действующий почтовый индекс.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Согласитесь с условиями
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        Вы должны согласиться перед отправкой.
      </div>
    </div>
  </div>
  <button class="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
Пожалуйста, введите сообщение в текстовое поле.
Пример неверного текста отзыва
Еще пример недопустимого текста отзыва
Пример неверного отзыва о пользовательском выборе
Пример неверного отзыва о пользовательском файле
@
Пример неверной обратной связи группы ввода
Пример неверной обратной связи группы ввода
Пример неверной обратной связи группы ввода 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Текстовая область</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Пример обязательного текстового поля" required></textarea>
    <div class="invalid-feedback">
      Пожалуйста, введите сообщение в текстовое поле.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Установите этот настраиваемый флажок</label>
    <div class="invalid-feedback">Пример неверного текста отзыва</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Переключить это настраиваемое радио</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Или переключите это другое настраиваемое радио</label>
    <div class="invalid-feedback">Еще пример недопустимого текста отзыва</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Выбрать...</option>
      <option value="1">Один</option>
      <option value="2">Два</option>
      <option value="3">Три</option>
    </select>
    <div class="invalid-feedback">Пример неверного отзыва о пользовательском выборе</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Выбрать файл...</label>
    <div class="invalid-feedback">Пример неверного отзыва о пользовательском файле</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Пример неверной обратной связи группы ввода
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Параметры</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Выбрать...</option>
        <option value="1">Один</option>
        <option value="2">Два</option>
        <option value="3">Три</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Пример неверной обратной связи группы ввода
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Выбрать файл...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Кнопка</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Пример неверной обратной связи группы ввода
  </div>
</form>

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

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

Выглядит хорошо!
Выглядит хорошо!
Укажите действующий город.
Пожалуйста, выберите допустимую область.
Пожалуйста, предоставьте действующий почтовый индекс. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">Имя</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Иван" required>
      <div class="valid-tooltip">
        Выглядит хорошо!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Фамилия</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Петров" required>
      <div class="valid-tooltip">
        Выглядит хорошо!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">Город</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Укажите действующий город.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">Область</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Выбрать...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Пожалуйста, выберите допустимую область.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Индекс</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Пожалуйста, предоставьте действующий почтовый индекс.
      </div>
    </div>
  </div>
  <button class="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, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Проверка группы ввода

Чтобы определить, какие элементы нуждаются в скругленных углах внутри группы ввода с проверкой, группе ввода требуется дополнительный класс .has-validation.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="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. Это улучшает контроль стилизации и позиционирования в браузерах и девайсах.

Чекбоксы

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Установите этот настраиваемый флажок</label>
</div>

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

Если Вы используете jQuery, этого должно быть достаточно:

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

Радиокнопки

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Переключить это настраиваемое радио</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Или переключите это другое настраиваемое радио</label>
</div>

Горизонтально

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Переключить это настраиваемое радио</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Или переключите это другое настраиваемое радио</label>
</div>

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

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

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Установите этот настраиваемый флажок</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Переключить это настраиваемое радио</label>
</div>

Выключатели

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

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Переключить этот элемент переключателя</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Отключенный переключающий элемент</label>
</div>

Меню выбора

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

<select class="custom-select">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

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

<select class="custom-select custom-select-lg mb-3">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

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

<select class="custom-select" multiple>
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Как и атрибут размера области выбора size:

<select class="custom-select" size="3">
  <option selected>Откройте это меню выбора</option>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <option value="3">Три</option>
</select>

Диапазон

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

<label for="customRange1">Пример диапазона</label>
<input type="range" class="custom-range" id="customRange1">

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

<label for="customRange2">Пример диапазона</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

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

<label for="customRange3">Пример диапазона</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

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

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

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

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="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) в действии над пользовательским вводом файла для русского перевода:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="ru">
  <label class="custom-file-label" for="customFileLang">Выберите файл</label>
</div>

Вам нужно будет правильно установить язык Вашего документа (или его поддерева), чтобы отображался правильный текст. Это можно сделать с помощью атрибута lang в элементе <html> или Content-Language HTTP header среди других методов.

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

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

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Выбрать файл">Добавьте свой документ</label>
</div>