Формы

Обзор

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

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

Вот быстрый пример, демонстрирующий стили формы Bootstrap. Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Адрес электронной почты</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Мы никогда никому не передадим вашу электронную почту.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Пароль</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">Проверить меня</label>
  </div>
  <button type="submit" class="btn btn-primary">Отправить</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>

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

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

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

Доступность

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

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

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

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

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

Sass

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

Переменные

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

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