Bootstrap Входные данные формы
Поддерживаемые элементы управления формы
Bootstrap поддерживает следующие элементы управления формы:
- Вход
- Textarea
- Флажок
- Радио
- Выберите
Загрузочный вход
Bootstrap поддерживает все типы входных данных HTML5: текст, пароль, DateTime, DateTime-Local, дату, месяц, время, неделю, номер, адрес электронной почты, 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>
Загрузочное текстовое
В следующем примере содержится текстовое произносится:
Пример
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Флажки Bootstrap
Флажки используются, если требуется, чтобы пользователь мог выбрать любое количество параметров из списка предустановленных параметров.
В следующем примере содержатся три флажка. Последний параметр отключен:
Пример
<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>
Загрузочные переключатели
Переключатели используются, если вы хотите ограничить пользователя только одним выбором из списка предустановленных параметров.
Следующий пример содержит три переключателя. Последний параметр отключен:
Пример
<div class="radio">
<label><input type="radio" name="optradio">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">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>
