Формы Bootstrap 5

Слоеная форма

Все элементы <input> и <textarea> с классом .form-control получают правильный стиль формы:

Пример

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">электронная почта：</label>
    <input type="email" class="form-control" id="email" placeholder="введите адрес электронной почты" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Пароль：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> запомнить меня
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Попробуйте сами

Кроме того, обратите внимание, что мы добавили для каждого элемента label .form-label класс для обеспечения правильного заполнения.

флажки имеют различные маркеры. Они установлены .form-check .container element. Label установлены .form-check-label класс, а флажки и радиокнопки окружены контейнерными элементами класса .form-check-input。

Textarea

Пример

<label for="comment">Комментарий：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Попробуйте сами

строка формы / сетка (внутренняя форма)

Если вы хотите, чтобы элементы формы отображались lado a lado, используйте .row и .col:

Пример

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Введите адрес электронной почты" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Введите пароль" name="pswd">
    </div>
  </div>
</form>

Попробуйте сами

Вы будете в Bootstrap сетка Узнайте больше о столбцах и строках в этой главе.

Размеры форм

Вы можете .form-control-lg или .form-control-sm Изменить .form-control Размер ввода:

Пример

<input type="text" class="form-control form-control-lg" placeholder="Большой ввод">
<input type="text" class="form-control" placeholder="Обычный ввод">
<input type="text" class="form-control form-control-sm" placeholder="Маленький ввод">

Попробуйте сами

Отключено и только для чтения

Используйте атрибуты disabled и/или readonly для отключения ввода:

Пример

<input type="text" class="form-control" placeholder="Обычный ввод">
<input type="text" class="form-control" placeholder="Отключенный ввод" disabled>
<input type="text" class="form-control" placeholder="Чтение ввода" readonly>

Попробуйте сами

Текстовый ввод

Используйте .form-control-plaintext Используйте класс для установки стиля ввода без рамки, но с подходящими внешними и внутренними отступами:

Пример

<input type="text" class="form-control-plaintext" placeholder="Текстовый ввод">
<input type="text" class="form-control" placeholder="Обычный ввод">

Попробуйте сами

Выбор цвета

Для правильной настройки стиля ввода type="color" используйте .form-control-color Класс:

Пример

<input type="color" class="form-control form-control-color" value="#CCCCCC">

Попробуйте сами