Bootstrap 4 ввода формы
Поддерживаемые элементы управления формой
Bootstrap поддерживает следующие элементы управления формой:
- Вход
- текстовая область
- флажок
- радио
- Выбрать
Начальный ввод
Bootstrap поддерживает все типы ввода HTML5: текст, пароль, дата и время, дата и время, дата, месяц, время, неделя, число, электронная почта, URL, поиск, телефон и цвет.
Примечание. Входные данные НЕ будут полностью оформлены, если их тип не объявлен должным образом!
Следующий пример содержит два элемента ввода; один из type="text"и один из
type="password". Как мы упоминали в главе «Формы», мы используем .form-controlкласс для стилизации входных данных с полной шириной и правильным отступом и т. д.:
Пример
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Текстовое поле Bootstrap
Следующий пример содержит текстовое поле:
Пример
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Флажки начальной загрузки
Флажки используются, если вы хотите, чтобы пользователь выбрал любое количество параметров из списка предустановленных параметров.
Следующий пример содержит три флажка. Последняя опция отключена:
Пример
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Объяснение примера
Используйте элемент-оболочку с class="form-check", чтобы обеспечить правильные поля для меток и флажков.
Добавьте .form-check-labelкласс для маркировки элементов и .form-check-inputправильного стиля флажков внутри .form-checkконтейнера.
Встроенные флажки
Используйте .form-check-inlineкласс, если вы хотите, чтобы флажки отображались в одной строке:
Пример
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Радиокнопки Bootstrap
Переключатели используются, если вы хотите ограничить пользователя только одним выбором из списка предустановленных параметров.
Следующий пример содержит три переключателя. Последняя опция отключена:
Пример
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Как и в случае с флажками, используйте .form-check-inlineкласс, если вы хотите, чтобы переключатели отображались в одной строке:
Пример
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Список выбора Bootstrap
Списки выбора используются, если вы хотите, чтобы пользователь мог выбирать из нескольких вариантов.
Следующий пример содержит раскрывающийся список (список выбора):
Пример
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Размер контроля формы
Измените размер элемента управления формы с помощью .form-control-smили .form-control-lg:
Пример
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Управление формой с простым текстом
Используйте, .form-control-plaintextесли вы хотите оформить поле ввода как обычный текст:
Пример
<input type="text" class="form-control-plaintext">
Файл управления формой и диапазон
Добавьте .form-control-rangeкласс к input type"range"или .form-control-fileк, input type"file"чтобы стилизовать элемент управления диапазоном или поле файла с полной шириной:
Пример
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">