Поля формы
Браузер рисует поля форм по-своему, и в разных браузерах они выглядят по-разному. Bootstrap даёт полям единый вид: полная ширина, одинаковая высота, скругление и синяя подсветка при фокусе. Нужно лишь добавить нужный класс каждому полю и подписи.
Текстовое поле
Подпись получает класс form-label, поле — form-control, подсказка под полем — form-text. Атрибуты for и id связывают подпись с полем, как в учебнике:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="anna@example.com">
<div class="form-text">Мы не передаём адрес третьим лицам.</div>
</div>Поле растянуто на всю ширину, над ним подпись, под ним серая подсказка. Щёлкните по полю — появится голубая обводка. Обёртка mb-3 отделяет поле от следующего.
Другие поля
| Класс | Для чего |
|---|---|
form-control | input любого текстового типа и textarea |
form-select | Выпадающий список select |
form-check + form-check-input + form-check-label | Флажок или радиокнопка |
form-switch | Флажок в виде переключателя |
form-range | Ползунок |
form-control-lg, form-control-sm | Большое и маленькое поле |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="mb-3">
<label for="plan" class="form-label">Тариф</label>
<select class="form-select" id="plan">
<option>Бесплатный</option>
<option selected>Командный — $9</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="news">
<label class="form-check-label" for="news">Получать новости</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="dark" checked>
<label class="form-check-label" for="dark">Тёмная тема</label>
</div>Выпадающий список, обычный флажок и переключатель. Флажок и переключатель кликабельны вместе с подписью.
Поле с приставкой
input-group склеивает поле с текстом или кнопкой. Текст оборачивают в input-group-text:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="number" class="form-control" aria-label="Сумма" value="49">
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<input type="search" class="form-control" placeholder="Найти задачу" aria-label="Найти задачу">
<button class="btn btn-outline-secondary" type="button">Найти</button>
</div>Первая строка — поле суммы со знаком доллара слева, вторая — поиск с кнопкой справа. Такой поиск ставят над таблицей в админ-панели.
Частая ошибка
Убрать подпись и оставить только placeholder. Подсказка исчезает, как только человек начинает печатать, и он забывает, что это было за поле, а программы чтения с экрана озвучивают её не всегда. У каждого поля должен быть <label>. Если подпись не нужна визуально, спрячьте её классом visually-hidden или задайте полю aria-label.