Как стилизовать форму с помощью фреймворка Bootstrap 5

В этой статье мы рассмотрим базовые варианты стилизации веб-форм с помощью фреймворка Bootstrap 5. Опишем правила и рекомендации для правильного добавления стилей формам с помощью Bootstrap form. А также приведем примеры стилизации различных элементов, разберем создание макета форм и валидацию полей.

Как создается Bootstrap form

Фреймворк Bootstrap 5 предоставляет готовые стили для создания форм на странице. Bootstrap имеет готовый набор CSS-классов, добавление которых в определенном сочетании формам и их элементам позволяет создавать различные вариации этих форм.

Для создания Bootstrap form существуют некоторые правила и рекомендации:

• Обязательно устанавливайте корректные атрибуты type для элементов формы. Значение атрибута должно соответствовать типу элемента: email — для поля электронного адреса, number — для числового поля и т. д. Это позволит фреймворку добавить некоторые дополнительные полезные опции для соответствующего поля. Например, для email — валидацию электронного адреса, для number — возможность выбора числа в поле и т. д.
• Текстовым элементам, таким как input и textarea, добавляйте класс form-control, который устанавливает стили к этим элементам.
• Группируйте поля и их метки (label) в теге div. Это позволит устанавливать отступы между такими группами, добавляя классы отступов Bootstrap. Например, если нужно задать отступ снизу от группы в размере 1rem, можно добавить группе класс md-3.
• Для стилизации нетекстовых полей используйте соответствующие классы, например, для чекбокса — класс form-check-input, его метке label — класс form-check-label, а группирующему их тегу div — класс form-check.

Пример простой формы Bootstrap:

<form>
    <div class="mb-3">
        <label for="demoInputEmail" class="form-label">Email</label>
        <input type="email" class="form-control" id="demoInputEmail" required>
    </div>

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

    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="demoRememberMe">
        <label class="form-check-label" for="demoRememberMe">Запомнить это устройство</label>
    </div>

    <button type="submit" class="btn btn-primary">Войти</button>
</form>

Email

Пароль

Запомнить это устройство

Войти

Стилизация элементов формы

Рассмотрим стилизацию различных элементов формы с помощью фреймворка Bootstrap 5.

Текстовые поля

Для добавления стилей текстовым полям им устанавливается класс form-control. Сделать поле больше или меньше можно с помощью дополнительных классов form-control-lg и form-control-sm. Меткам (label) поля при этом задается класс form-label. Текстовые поля с добавленными атрибутами readonly и disabled также выделяются соответствующими CSS-стилями. Для поля выбора цвета дополнительно задается класс form-control-color.

<div class="mb-3">
    <label for="demoInputName" class="form-label">ФИО</label>
    <input type="text" class="form-control form-control-lg" id="demoInputName">
</div>

<div class="mb-3">
    <label for="demoInputEmail" class="form-label">Email</label>
    <input type="email" class="form-control form-control-sm" id="demoInputEmail">
</div>

<div class="mb-3">
    <label for="demoInputNumber" class="form-label">Возраст</label>
    <input type="number" class="form-control" id="demoInputNumber">
</div>

<div class="mb-3">
    <label for="demoInputFile" class="form-label">Загрузить</label>
    <input class="form-control" type="file" id="demoInputFile">
</div>

<div class="mb-3">
    <label for="demoInputColor" class="form-label">Выберите цвет</label>
    <input type="color" class="form-control form-control-color" id="demoInputColor" value="#563d7c" title="Выбрать цвет">
</div>

<div class="mb-3">
    <input type="text" class="form-control form-control-sm" readonly value="Только для чтения">
</div>

<div class="mb-3">
    <input type="text" class="form-control form-control-sm" disabled value="Поле деактивировано">
</div>

Элементы select, checkbox, radiobutton и range

Выпадающий список select стилизуют добавлением тегу select класса form-select. Поддерживаются атрибуты multiple, size и disabled. Размер поля можно изменять с помощью классов form-select-lg и form-select-sm.

<div class="mb-3">
    <select class="form-select">
        <option selected>Раскройте список</option>
        <option value="option1">Вариант 1</option>
        <option value="option2"> Вариант 2</option>
        <option value="option3"> Вариант 3</option>
    </select>
</div>

<div class="mb-3">
    <select class="form-select" multiple>
        <option selected>Выберите несколько вариантов</option>
        <option value="option1">Вариант 1</option>
        <option value="option2"> Вариант 2</option>
        <option value="option3"> Вариант 3</option>
        <option value="option4"> Вариант 4</option>
        <option value="option5"> Вариант 5</option>
    </select>
</div>

С помощью Bootstrap 5 можно легко заменить браузерные стили по умолчанию для чекбоксов и радиокнопок. Чекбокс или радиокнопка создается следующим образом:

• полю input с типом checkbox (для чекбокса) или radio (для радиокнопки) добавляется класс form-check-input;
• метка label устанавливается рядом с input и ей задается класс form-check-label;
• оба соседних элемента оборачиваются в div с классом form-check.

Если есть атрибут disabled, цвет поля с меткой будет более светлым, что свидетельствует о неактивном поле.

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="demoCheckbox">
    <label class="form-check-label" for="demoCheckbox">
      Без флажка по умолчанию
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="demoCheckboxChecked" checked>
    <label class="form-check-label" for="demoCheckboxChecked">
      С флажком по умолчанию
    </label>
</div>

Чтобы создать кросс-браузерный элемент диапазона range, необходимо для input с типом range добавить класс form-range. Элемент имеет атрибуты min и max для установки минимального и максимального значения диапазона. Также есть атрибут step, который позволяет добавить шаг изменения диапазона. Стили элемента меняются при добавлении атрибута disabled.

<div class="form-check">
    <label for="demoRange" class="form-label">Диапазон</label>
    <input type="range" class="form-range" min="0" max="10" step="1" id="demoRange">
</div>

Группы полей

Группы полей позволяют создавать комбинации полей между собой и текстовыми элементами. Создаются такие комбинации следующим образом:

• текстовые элементы и поля размещаются рядом друг с другом;
• текстовым элементам задается класс input-group-text, а поля типа radio и checkbox оборачиваются в div с классом input-group-text;
• все элементы оборачиваются в div с классом input-group.

<div class="mb-3">
    <label for="demoGroupEmail" class="form-label">Введите ваш email:</label>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Email">
        <span class="input-group-text" id="demoGroupEmail">@demo.com</span>
    </div>
</div>

<div class="mb-3">
    <div class="input-group">
        <div class="input-group-text">
            <input class="form-check-input mt-0" type="checkbox">
        </div>
        <input type="text" class="form-control">
    </div>
</div>

<div class="mb-3">
    <div class="input-group">
        <input type="file" class="form-control" id="demoUpload">
        <label class="input-group-text" for="demoUpload">Загрузить</label>
    </div>
</div>

Макет формы

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

Отступы между элементами или группами элементов можно задавать с помощью специальных классов для отступов. Например, отступ снизу можно установить такими классами: mb-0, mb-1, mb-2, mb-3, mb-4, mb-5. Первая часть класса mb означает CSS-свойство margin-bottom, число 0 убирает отступ, а при увеличении значения числа от 1 до 5 отступ увеличивается. Например, mb-3 — это margin-bottom: 1rem!important;.

<form>
    <div class="mb-3">
        <label for="demoFieldSizeNickname" class="form-label">Никнейм</label>
        <input type="text" class="form-control" id="demoFieldSizeNickname" placeholder="john_smth184">
    </div>

    <div class="mb-3">
        <label for="demoFieldSizeEmail" class="form-label">Email</label>
        <input type="email" class="form-control" id="demoFieldSizeEmail" placeholder="john_smth184@demo.com">
    </div>

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

Никнейм

Email

Отправить

Более сложные макеты можно создавать с помощью системы сеток Bootstrap. В блок с классом row оборачивается элемент или группа элементов на одной строке. Внутри div с классом row создаются div с классом типа col-*. Вместо символа *, используются числа от 1 до 12. Это число устанавливает, сколько частей ширины занимает конкретный элемент из 12 частей, из которых состоит 100% ширины строки. Например, col-6 будет занимать половину ширины.

<div class="row">
    <div class="col-8">
        <input type="text" class="form-control" placeholder="Страна, город и улица">
    </div>
    <div class="col-2">
        <input type="text" class="form-control" placeholder="Дом">
    </div>
    <div class="col-2">
        <input type="text" class="form-control" placeholder="Квартира">
    </div>
</div>

При использовании сетки для изменения расстояния между полями удобно использовать классы типа gx-* (горизонтальные отступы), gy-* (вертикальные) и g-* (вертикальные и горизонтальные). Символ * — это значение от 0 до 5. Чем больше значение, тем больше и зазор между полями.

<div class="row g-3">
    <div class="col-6">
        <input type="text" class="form-control" placeholder="Имя">
    </div>
    <div class="col-6">
        <input type="text" class="form-control" placeholder="Фамилия">
    </div>
    <div class="col">
        <textarea class="form-control" placeholder="Комментарий"></textarea>
    </div>
</div>

Валидация

С помощью Bootstrap form для форм можно создать кастомную валидацию. Этот процесс состоит из следующих шагов:

• Тегу form добавляется атрибут novalidate, чтобы сбросить стандартную браузерную валидацию.
• Добавляем блоки с сообщениями валидации: класс valid-feedback — при успешной валидации, invalid-feedback — если поле не валидное.
• С помощью JavaScript предотвращаем отправку формы по умолчанию при нажатии на кнопку и добавляем класс was-validated для тега формы. Класс was-validated добавляет стили валидации фреймворка.

<form id="demoFormValidation" novalidate>
    <div class="row g-3">
        <div class="col-6">
            <label for="demoFormValidationName" class="form-label">
                Имя
            </label>
            <input type="text" class="form-control" id="demoFormValidationName" required>
            <div class="valid-feedback">
              Отлично!
            </div>
            <div class="invalid-feedback">
              Введите имя
            </div>
        </div>
        <div class="col-6">
            <label for="demoFormValidationSurname" class="form-label">
                Фамилия
            </label>
            <input type="text" class="form-control" id="demoFormValidationSurname" required>
            <div class="valid-feedback">
              Отлично!
            </div>
            <div class="invalid-feedback">
              Введите фамилию
            </div>
        </div>
        <div class="col-12">
            <label for="demoFormValidationNickname" class="form-label">
                Никнейм
            </label>
            <div class="input-group has-validation">
              <span class="input-group-text">@</span>
              <input type="text" class="form-control" id="demoFormValidationNickname" required>
              <div class="valid-feedback">
                  Отлично!
              </div>
              <div class="invalid-feedback">
                Придумайте никнейм
              </div>
            </div>
        </div>
        <div class="col-12">
            <button class="btn btn-primary" type="submit">Отправить</button>
        </div>
    </div>
</form>

Имя

Отлично!

Введите имя

Фамилия

Отлично!

Введите фамилию

Никнейм

@

Отлично!

Придумайте никнейм

Отправить

Заключение

Таким образом, мы разобрали базовую стилизацию элементов форм с помощью Bootstrap form. Вы узнали, какие классы фреймворка Bootstrap 5 необходимо добавлять элементам, чтобы устанавливать им нужные стили и создавать определенный макет формы. Также, используя JavaScript, мы заменили стандартную браузерную валидацию полей формы на собственную.