Bootstrap Form control (Элементы управления формами)

Обновите элементы управления текстовой формой, такие как <input> и <textarea>, с помощью настраиваемых стилей, размеров, состояний фокуса и т.д.

Пример

Элементы управления формами оформлены с использованием сочетания переменных Sass и CSS, что позволяет им адаптироваться к цветовым режимам и поддерживать любой метод настройки.

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Эл. адрес</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Пример текстового поля</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
Результат:

Определение размера

Устанавливайте высоты с помощью таких классов, как .form-control-lg и .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
Результат:

Текст формы

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

Текст формы должен быть явно связан с элементом управления формой, к которому он относится, с использованием aria-describedby атрибута. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст формы, когда пользователь фокусируется или вводит элемент управления.

Текст формы под входными данными может быть оформлен с помощью .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>
Результат:
Ваш пароль должен состоять из 8-20 символов, букв и цифр и не должен содержать пробелов, специальных символов или эмодзи.

Встроенный текст может использовать любой типичный встроенный 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>
Результат:
Должен содержать 8-20 символов.

Отключено

Добавьте во входные данные атрибут disabled boolean, чтобы придать им серый вид, удалить события указателя и предотвратить фокусировку.

<input class="form-control" type="text" placeholder="Отключенный ввод" aria-label="Пример отключенного ввода" disabled>
<input class="form-control" type="text" value="Отключен ввод только для чтения" aria-label="Пример отключенного ввода" disabled readonly>
Результат:

Только для чтения

Добавьте readonly атрибут boolean для входных данных, чтобы предотвратить изменение входного значения. readonly входные данные по-прежнему можно фокусировать и выбирать, в то время как disabled входные данные - нет.

<input class="form-control" type="text" value="Здесь ввод только для чтения..." aria-label="пример ввода только для чтения" readonly>
Результат:

Обычный текст только для чтения

Если вы хотите, чтобы <input readonly> элементы вашей формы были оформлены в виде обычного текста, замените .form-control на .form-control-plaintext, чтобы удалить стиль полей формы по умолчанию и сохранить правильный margin и padding.

  <div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Электронная почта</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Пароль</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
Результат:
<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Электронная почта</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Пароль</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Подтверждение личности</button>
  </div>
</form>
Результат:

Ввод файла

<div class="mb-3">
  <label for="formFile" class="form-label">Пример ввода файла по умолчанию</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Пример ввода нескольких файлов</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Отключен пример ввода файла</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Пример ввода небольшого файла</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Пример ввода большого файла</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
Результат:

Цвет

Установите type="color" и добавьте .form-control-color в <input>. Мы используем класс-модификатор, чтобы установить фиксированные height значения и переопределить некоторые несоответствия между браузерами.

<label for="exampleColorInput" class="form-label">Color picker (Средство выбора цвета)</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Выберите свой цвет">
Результат:

Datalists

Списки данных позволяют создавать группы, к <option>которым можно получить доступ (и автоматически заполнить) из <input>. Они похожи на <select> элементы, но имеют больше ограничений и отличий в стиле меню. Хотя большинство браузеров и операционных систем включают некоторую поддержку элементов <datalist>, их стиль в лучшем случае непоследователен.

Узнайте больше о поддержке элементов datalist.

<label for="exampleDataList" class="form-label">Пример Datalist</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Введите для поиска...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>
Результат:

CSS

Переменные Sass

$input-* используются совместно для большинства наших элементов управления формами (а не для кнопок).

scss/_variables.scss

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              var(--#{$prefix}body-bg);
$input-disabled-color:                  null;
$input-disabled-bg:                     var(--#{$prefix}secondary-bg);
$input-disabled-border-color:           null;

$input-color:                           var(--#{$prefix}body-color);
$input-border-color:                    var(--#{$prefix}border-color);
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      var(--#{$prefix}box-shadow-inset);

$input-border-radius:                   var(--#{$prefix}border-radius);
$input-border-radius-sm:                var(--#{$prefix}border-radius-sm);
$input-border-radius-lg:                var(--#{$prefix}border-radius-lg);

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               var(--#{$prefix}secondary-color);
$input-plaintext-color:                 var(--#{$prefix}body-color);

$input-height-border:                   calc(#{$input-border-width} * 2); // stylelint-disable-line function-disallowed-list

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

$form-label-* и $form-text-* предназначены для компонентов <label> и .form-text.

scss/_variables.scss

$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;

scss/_variables.scss

$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       var(--#{$prefix}secondary-color);

$form-file-* предназначены для ввода в файл.

scss/_variables.scss

$form-file-button-color:          $input-color;
$form-file-button-bg:             var(--#{$prefix}tertiary-bg);
$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg);

На этой странице

  1. Пример
  2. Определение размера
  3. Текст формы
  4. Отключено
  5. Только для чтения
  6. Обычный текст только для чтения
  7. Ввод файла
  8. Цвет
  9. Datalists
  10. CSS
    1. Переменные Sass