Формы

Обзор

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

Обязательно используйте подходящий атрибут 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);