Формы

Обзор

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

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

Вот быстрый пример, демонстрирующий стили форм 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>

Отключенные формы

Добавьте 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 содержимое, которое исчезает после заполнения поля ввода) будет полезно для пользователей вспомогательных технологий, отсутствие видимого текста метки может по-прежнему быть проблемой для некоторых пользователей. Лучший подход — наличие какой-либо видимой метки, как для обеспечения доступности, так и для удобства использования.

CSS

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

Переменные Sass

$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:         $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color:         $focus-ring-color;
$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow;

$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:      var(--#{$prefix}border-width);