Перейти к основному содержанию Перейти к навигации по документам

Примеры и рекомендации по использованию стилей управления формой, параметров макета и пользовательских компонентов для создания широкого спектра форм.

Обзор

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

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

Вот демонстрация стилей форм Bootstrap. Читайте документацию по требуемым классам, расположению форм и т.д.

We'll never share your email with anyone else.
<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.

Связь вспомогательного текста с органами контроля форм

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

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

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<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.

Must be 8-20 characters long.
<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>

Для деактивации элементов контроля внутри <fieldset>, добавьте атрибут disabled.

По умолчанию браузеры будут рассматривать все элементы управления собственными формами (элементы <input>, <select> и <button>) внутри <fieldset disabled> как отключенные, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши. Однако, если в вашей форме есть элементы <a ... class="btn btn-*">, то им будет присвоен только стиль pointer-events: none.

<form>
  <fieldset disabled aria-label="Disabled fieldset example">
    <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>