Bootstrap Формы
Обзор
Элементы управления формой Bootstrap расширяют стили перезагруженных форм с классами. Используйте эти классы, чтобы выбрать их индивидуальные дисплеи для более согласованного рендеринга в браузерах и на разных устройствах.
Обязательно используйте соответствующий type
атрибут для всех входов (например, email
для адреса электронной почты или number
числовой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т.д.
Вот быстрый пример, демонстрирующий стили формы Bootstrap.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Мы никогда не передадим ваш адрес электронной почты кому-либо еще.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Пароль</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Я не робот</label>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
Продолжайте читать, чтобы узнать о необходимых классах, макете формы и многом другом.
Текст формы
Текст формы на уровне блока или на уровне строки может быть создан с помощью .form-text
.
Связывание текста формы с элементами управления формой
Текст формы должен быть явно связан с элементом управления формы, к которому он относится с помощью aria-describedby
атрибута. Это гарантирует, что вспомогательные технологии, такие как программы чтения с экрана, будут объявлять этот текст формы, когда пользователь фокусируется или вводит элемент управления.
Текст формы под полями может быть оформлен с помощью .form-text
. Если будет использоваться элемент уровня блока, добавляется верхнее поле для упрощения расстояния от входных данных выше.
<label for="inputPassword5" class="form-label">Пароль</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Ваш пароль должен состоять из 8-20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или эмодзи.
</div>
Инлайн текст может использовать любой типичный встроенный HTML - элемент (будь то <span>
, <small>
или что - то еще) ничего более , чем .form-text
класс.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Пароль</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Должно быть 8-20 символов.
</span>
</div>
</div>
Отключенные формы
Добавьте disabled
логический атрибут для ввода, чтобы предотвратить взаимодействие с пользователем и сделать его более светлым.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Добавьте атрибут disabled
в <fieldset>
, чтобы отключить все элементы управления внутри.
По умолчанию браузеры будут рассматривать все элементы управления встроенной формы ( <input>
, <select>
и <button>
элементы) внутри <fieldset disabled>
как отключенные, предотвращая взаимодействие с ними как с клавиатуры, так и с помощью мыши. Однако, если ваша форма также включает <a ... class="btn btn-*">
элементы, им будет присвоен только стиль pointer-events: none
.
<form>
<fieldset disabled aria-label="Disabled fieldset example">
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Отключенный ввод</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Ввод отключен">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Отключено меню выбора</label>
<select id="disabledSelect" class="form-select">
<option>Выбор отключен</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Не могу это проверить
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</fieldset>
</form>
На этой странице