Bootstrap Формы

Обзор

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

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

Вот быстрый пример, демонстрирующий стили формы Bootstrap.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Мы никогда не передадим ваш адрес электронной почты кому-либо еще.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Пароль</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">Я не робот</label>
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.

Текст формы

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

Текст формы под полями может быть оформлен с помощью .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>

Инлайн текст может использовать любой типичный встроенный 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>

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

Добавьте 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-*"> элементы, им будет присвоен только стиль pointer-events: none.

<form>
  <fieldset disabled aria-label="Disabled fieldset example">
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Отключенный ввод</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Ввод отключен">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Отключено меню выбора</label>
      <select id="disabledSelect" class="form-select">
        <option>Выбор отключен</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">
          Не могу это проверить
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </fieldset>
</form>