Формы

Обзор

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

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

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

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

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

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

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

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Пароль</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">
      Должно быть 8-20 символов.
    </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", чтобы сигнализировать о своем состоянии вспомогательным технологиям.

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