2018-10-12 20:00:59 +00:00
---
title: Form Inputs
localeTitle: Входы формы
---
## Входы формы
Bootstrap поддерживает следующие элементы управления формой:
2018-10-28 17:18:10 +00:00
1. поле ввода данных
2. текстовое поле
2018-10-12 20:00:59 +00:00
3. флажок
4. радио
5. Выбрать
## Примеры фрагментов кода
#### 1\. Вход
2018-10-28 17:18:10 +00:00
Bootstrap поддерживает все типы ввода данных HTML5: текст, пароль, дату и время, дату-время, дату, месяц, время, неделю, число, адрес электронной почты, URL-адрес, поиск, телефон и цвет.
2018-10-12 20:00:59 +00:00
2018-10-28 17:18:10 +00:00
**Примечание. Поля ввода данных Н Е будут полностью оформлены, если их тип будет объявлен неправильно!**
2018-10-12 20:00:59 +00:00
2018-10-28 17:18:10 +00:00
Следующий пример содержит два элемента ввода данных: один - для текста и один для пароля:
2018-10-12 20:00:59 +00:00
```html
< 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 >
```
2018-10-28 17:18:10 +00:00
#### 2\. Текстовое поле
2018-10-12 20:00:59 +00:00
Следующий пример содержит текстовое поле:
```html
< div class = "form-group" >
< label for = "comment" > Comment:< / label >
< textarea class = "form-control" rows = "5" id = "comment" > < / textarea >
< / div >
```
#### 3\. Флажки
2018-10-28 17:18:10 +00:00
Флажки используются, если вы хотите, чтобы пользователь выбирал любое количество опций из предустановленного списка.
2018-10-12 20:00:59 +00:00
Следующий пример содержит три флажка. Последняя опция отключена:
```html
< 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,** если вы хотите, чтобы флажки отображались в одной строке:
```html
< 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 >
```
2018-10-28 17:18:10 +00:00
#### 4\. Радиокнопки
2018-10-12 20:00:59 +00:00
2018-10-28 17:18:10 +00:00
Радиокнопки используются, если вы хотите ограничить пользователя одним выбором из предустановленного списка.
2018-10-12 20:00:59 +00:00
2018-10-28 17:18:10 +00:00
Следующий пример содержит три переключателя. Последний отключен:
2018-10-12 20:00:59 +00:00
```html
< 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 >
```
2018-10-28 17:18:10 +00:00
Используйте ** класс .radio-inline,** если вы хотите, чтобы радиокнопки отображались в одной строке:
2018-10-12 20:00:59 +00:00
```html
< 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 >
```
2018-10-28 17:18:10 +00:00
#### 5\. Выбор (Список)
2018-10-12 20:00:59 +00:00
Списки выбора используются, если вы хотите разрешить пользователю выбирать из нескольких вариантов.
2018-10-28 17:18:10 +00:00
Следующий пример содержит раскрывающийся список (Список выбора):
2018-10-12 20:00:59 +00:00
```html
< 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 >
```
## Как сделать доступными загрузочные входы
2018-10-28 17:18:10 +00:00
У полей ввода данных должны быть метки или какой-либо другой идентификатор, например теги WAI-ARIA, чтобы соответствовать Руководству по обеспечению доступности Web-контент или [WCAG] (https://www.w3.org/WAI/tutorials/forms/) для краткости. Для того, чтобы экранные считывающие устройства точно сообщали пользователю, какие метки связаны с какими полями ввода, каждая метка должна ссылаться на соответствующее поля ввода.
2018-10-12 20:00:59 +00:00
Это можно сделать, используя параметр `for` в HTML:
```html
< label for = "email-input" > Enter Email< / label >
< input type = "email" class = "form-control" id = "email-input" placeholder = "Enter Email" >
```
2018-10-28 17:18:10 +00:00
Этикетка `for` атрибута ** всегда** ссылается на поле ввода по е г о **ID.** Это говорит экранному считывающему устройству, что этот ярлык определенно подходит для этого поля ввода, что минимизирует путаницу для всех пользователей, которые используют такие программы для посещения веб-сайтов.
2018-10-12 20:00:59 +00:00
### Дополнительная информация:
2018-10-28 17:18:10 +00:00
Примеры кода из [W3Schools - Input Bootstrap Form ](https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp ) .