Перейти к основному содержанию Перейти к навигации по документам

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

Обзор

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

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

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

We'll never share your email with anyone else.
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Вспомогательный текст

Текст формы на уровне блока или на уровне строки может быть создан с помощью .form-text.

Связь вспомогательного текста с органами контроля форм

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

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

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

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

Must be 8-20 characters long.
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

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

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

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

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

Однако, если ваша форма также включает пользовательские элементы, похожие на кнопки, такие как <a class="btn btn-*">...</a>, то им будет присвоен только стиль событий-указателей pointer-events: none, что означает, что они по-прежнему фокусируется и управляется с клавиатуры. В этом случае вы должны вручную изменить эти элементы управления, добавив tabindex="-1", чтобы они не получали фокус и aria-disabled="disabled", чтобы сигнализировать о своем состоянии вспомогательным технологиям.

Disabled fieldset example
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие логичные имена, чтобы их наименования можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого - использовать элемент <label> или, в случае кнопок, включить достаточно описательный текст как часть содержимого <button>...</button>.

В ситуациях, когда невозможно включить видимый <label> или соответствующее текстовое содержание, есть альтернативные способы предоставления доступного имени, например:

  • Элементы <label> скрытые с помощью класса .visually-hidden
  • Указание на существующий элемент, который может действовать как метка, используя класс aria-labelledby
  • Предоставление атрибута title
  • Для элемента явно задать доступное имя с помощью aria-label

Также можно использовать атрибут placeholder в качестве запасного варианта для доступного имени в элементах <input> и <textarea>. В этом разделе представлены несколько подходов для разных случаев.

Хотя использование визуально скрытого содержимого (.visually-hidden, aria-label и даже placeholder которое скрыто если после формы идет содержимое) будет полезно пользователям вспомогательных технологий, но отсутствие видимого текста ярлыка все еще может быть проблемой для некоторых пользователей. Как правило, лучше всего подходят видимые метки, как с точки зрения доступности, так и удобства использования.

Sass

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

Переменные

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

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;