Bootstrap 5 предлагает стиль по умолчанию, который применяется к большинству элементов форм. Он также предлагает классы для специфических целей.
Базовая форма
Вот пример базовой формы в Bootstrap 5. Вы можете использовать класс .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы задать width: 100% по умолчанию.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<form action="/html/tags/html_form_tag_action.cfm">
<div class="mb-3">
<label for="email_addr" class="form-label">Адрес электронной почты</label>
<input type="email" class="form-control" id="email_addr">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Пароль</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember_me">
<label class="form-check-label" for="remember_me">Запомнить меня</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
Строчная форма
Используйте классы .row-cols-* для создания адаптивных горизонтальных макетов. Использование .col-12 помогает размещать элементы форм для узких областей просмотра.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<form class="row row-cols-lg-auto g-3 align-items-center" action="/html/tags/html_form_tag_action.cfm">
<div class="col-12">
<label for="first_name">Имя</label>
</div>
<div class="col-12">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
<div class="col-12">
<label for="last_name">Фамилия</label>
</div>
<div class="col-12">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Отправить</button>
</div>
</form>
Если приведённая выше форма не отображается в одну строку, откройте просмотр в новом окне. Если форма по-прежнему не отображается в одну строку, возможно, вам придётся посмотреть пример на большом экране.
Справочный текст
Bootstrap 5 предлагает класс .form-text, который можно использовать для указания справочного текста. Вы можете комбинировать этот класс со вспомогательными классами, такими как .text-muted.
Также следует использовать атрибут aria-describedby, чтобы связать справочный текст с элементом формы. Это гарантирует, что экранные читалки смогут озвучить текст, когда пользователь сфокусируется на форме.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<label for="accountId">Идентификатор</label>
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
<span id="helpAccountId" class="form-text text-muted">Идентификатор учётной записи указан в верхней части счёта.</span>
Статичный элемент управления
Вы можете использовать .form-control-plaintext в элементе <input>, чтобы поставить обычный текст рядом с меткой (например, вместо поля ввода).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<form>
<div class="mb-3 row">
<label for="username" class="col-sm-2 col-form-label">Имя пользователя</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="username" value="HomerJay">
</div>
</div>
<div class="mb-3 row">
<label for="pwd" class="col-sm-2 col-form-label">Пароль</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd">
</div>
</div>
</form>
Флажки и переключатели
Bootstrap 5 предлагает такие классы, как .form-check, .form-check-label, .form-check-input и .form-check-inline для отображения флажков и переключателей.
Чтобы отобразить сгруппированные флажки или переключатели, вложите каждый из них в <div> с классом .form-check.
Кроме того, добавьте .form-check-label к тегу <label> и .form-check-input к тегу <input>.
В Bootstrap 5 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к окружающему <div>. Сохраните .form-check-input в теге <input>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<!-- Флажки -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1">
<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3">
<label class="form-check-label">3</label>
</div>
<!-- Переключатели -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1">
<label class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
<label class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label">3</label>
</div>