Входные данные начальной формы
Поддерживаемые элементы управления формой
Bootstrap поддерживает следующие элементы управления формой:
- Вход
- текстовая область
- флажок
- радио
- Выбрать
Начальный ввод
Bootstrap поддерживает все типы ввода HTML5: текст, пароль, дата и время, дата и время, дата, месяц, время, неделя, число, электронная почта, URL, поиск, телефон и цвет.
Примечание. Входные данные НЕ будут полностью оформлены, если их тип не объявлен должным образом!
Следующий пример содержит два элемента ввода; один типа текста и один типа пароля:
Пример
<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="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Используйте .checkbox-inlineкласс, если вы хотите, чтобы флажки отображались в одной строке:
Пример
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Радиокнопки Bootstrap
Переключатели используются, если вы хотите ограничить пользователя только одним выбором из списка предустановленных параметров.
Следующий пример содержит три переключателя. Первая опция отмечена по умолчанию, а последняя опция отключена:
Пример
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Используйте .radio-inlineкласс, если вы хотите, чтобы переключатели отображались в одной строке:
Пример
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Список выбора 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>