Формы

Обзор

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

Обязательно используйте соответствующий 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>

Текст формы

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

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

<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классом.

<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атрибут в a, <fieldset>чтобы отключить все элементы управления внутри. Браузеры рассматривают все собственные элементы управления формы ( <input>, <select>и <button>элементы) внутри a <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содержимого, которое исчезает, как только в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки все еще может быть проблемой для некоторых пользователей. Некоторая форма видимой метки, как правило, является лучшим подходом как для доступности, так и для удобства использования.

Сасс

Многие переменные формы задаются на общем уровне для повторного использования и расширения отдельными компонентами формы. Вы будете видеть их чаще всего как $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;