Bootstrap предлагает продуманные стили для форм, а также стандартный подход к валидации. При оформлении формы важно не только «красиво» сделать поля, но и обеспечить доступность (доступ) для всех пользователей.

Формы в Bootstrap: Подробный разбор

Общее описание

Bootstrap предлагает готовую систему стилей для создания красивых, адаптивных и удобных форм. С его помощью можно быстро сверстать поля ввода, чекбоксы, переключатели, селекты и прочие элементы, не тратя время на ручное оформление. Главное — использовать правильные CSS-классы.

Вот основные принципы:

• Каждый элемент формы оборачивается в div с отступом, например, .mb-3 (margin-bottom).
• Все поля ввода получают класс .form-control — это добавляет стильную рамку, внутренние отступы и анимацию фокуса.
• Метки (<label>) получают класс .form-label, чтобы соответствовать стилю Bootstrap.
• Для чекбоксов, радиокнопок и ползунков используются специальные классы, такие как .form-check, .form-range, .form-switch и т.д.
• Bootstrap также поддерживает "плавающие" метки (.form-floating) и группы элементов (.input-group), например, поле + кнопка.

Пример: Расширенная форма с разными элементами

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Имя</label>
    <input type="text" class="form-control" id="name" placeholder="Введите имя" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email адрес</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
    <div class="form-text">Мы не передаем ваш email третьим лицам.</div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Пароль</label>
    <input type="password" class="form-control" id="password" required>
  </div>

  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="rememberMe">
    <label class="form-check-label" for="rememberMe">
      Запомнить меня
    </label>
  </div>

  <div class="mb-3">
    <label for="gender" class="form-label">Пол</label>
    <select class="form-select" id="gender">
      <option selected>Выберите...</option>
      <option value="male">Мужской</option>
      <option value="female">Женский</option>
      <option value="other">Другое</option>
    </select>
  </div>

  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingInput" placeholder="Комментарий">
    <label for="floatingInput">Комментарий</label>
  </div>

  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="username">
  </div>

  <div class="mb-3">
    <label for="customRange1" class="form-label">Настроение (0–10)</label>
    <input type="range" class="form-range" min="0" max="10" id="customRange1">
  </div>

  <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Таблица: основные классы и их назначение

Валидация форм в Bootstrap: Подробный разбор

Общее описание

Bootstrap позволяет элегантно оформлять валидацию форм, используя HTML5-механику и собственные стили. Это делается с помощью классов .needs-validation, .was-validated, а также .invalid-feedback и .valid-feedback. Валидация работает на основе встроенных атрибутов (required, type="email", minlength и т.д.) и подсвечивает поля при ошибке или успехе.

Как работает:

• HTML5 валидация использует псевдоклассы :invalid и :valid для <input>, <select>, <textarea>.
• Класс .needs-validation на форме и novalidate отключают стандартные тултипы браузера.
• После отправки формы скрипт добавляет .was-validated, чтобы активировать Bootstrap-стили для ошибок/успехов.
• Классы .invalid-feedback и .valid-feedback показывают текст ошибок/подтверждений, когда поле становится is-invalid или is-valid.

Расширенный пример формы с валидацией

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Имя пользователя</label>
    <input type="text" class="form-control" id="username" required minlength="3">
    <div class="valid-feedback">Выглядит хорошо!</div>
    <div class="invalid-feedback">Введите хотя бы 3 символа.</div>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email адрес</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Укажите корректный email.</div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Пароль</label>
    <input type="password" class="form-control" id="password" required minlength="6">
    <div class="invalid-feedback">Пароль должен содержать минимум 6 символов.</div>
  </div>

  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="terms" required>
    <label class="form-check-label" for="terms">Я принимаю условия</label>
    <div class="invalid-feedback">Вы должны принять условия.</div>
  </div>

  <button class="btn btn-primary" type="submit">Отправить</button>
</form>

// Активация валидации при отправке
const form = document.querySelector(".needs-validation");
form.addEventListener(
  "submit",
  function (event) {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add("was-validated");
  },
  false
);

Таблица: ключевые элементы и классы Bootstrap для валидации