Группа ввода

Легко расширяйте элементы управления формой, добавляя текст, кнопки или группы кнопок, настраиваемых меню выбора и пользовательской закгруки файлов.

myset.ru

Кроссовки из натуральной кожи-505465. 7 900 ₽

Базовые примеры

Разместите одно «дополнение» или кнопку слева или справа от формы ввода. Вы можете также разместить их с обеих сторон. Не забудьте разместить теги <label> вне группы ввода.

@example.com

Ваш тщеславный URL

https://example.com/users/

.00

С текстовым полем

<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon1">@</span></div><inputtype="text"class="form-control"placeholder="Имя пользователя"aria-label="Имя пользователя"aria-describedby="basic-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя"aria-describedby="basic-addon2"><divclass="input-group-append"><spanclass="input-group-text"id="basic-addon2">@example.com</span></div></div><labelfor="basic-url">Ваш тщеславный URL</label><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="basic-addon3">https://example.com/users/</span></div><inputtype="text"class="form-control"id="basic-url"aria-describedby="basic-addon3"></div><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text">$</span></div><inputtype="text"class="form-control"aria-label="Сумма (с точностью до доллара)"><divclass="input-group-append"><spanclass="input-group-text">.00</span></div></div><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">С текстовым полем</span></div><textareaclass="form-control"aria-label="С текстовым полем"></textarea></div>

Обертка

Обтекание групп ввода по умолчанию с помощью flex-wrap: wrap, чтобы обеспечить возможность проверки пользовательских полей формы в группе ввода. Вы можете отключить это с помощью .flex-nowrap.

<divclass="input-group flex-nowrap"><divclass="input-group-prepend"><spanclass="input-group-text"id="addon-wrapping">@</span></div><inputtype="text"class="form-control"placeholder="Имя пользователя"aria-label="Имя пользователя"aria-describedby="addon-wrapping"></div>

Размеры

Добавьте в саму группу .input-group классы относительных размеров форм и содержимое группы будет автоматически изменять размер – т.е. не будет необходимости повторять классы размера органов контроля формы в каждом элементе.

Определение размера отдельных элементов входной группы не поддерживается.

Маленький

По умолчанию

Большой

<divclass="input-group input-group-sm mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-sm">Маленький</span></div><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-default">По умолчанию</span></div><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-lg">Большой</span></div><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"aria-describedby="inputGroup-sizing-lg"></div>

«Дополнения» чекбоксов и радиокнопок

Разместите какой-либо чекбокс или радиокнопоку внутри дополнения группы ввода вместо текста.

<divclass="input-group mb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"aria-label="Флажок для следующего ввода текста"></div></div><inputtype="text"class="form-control"aria-label="Ввод текста с флажком"></div><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"aria-label="Радиокнопка для следующего ввода текста"></div></div><inputtype="text"class="form-control"aria-label="Ввод текста с переключателем"></div>

Множественный ввод

Хотя несколько <input> поддерживаются визуально, стили проверки доступны только для групп ввода с одним <input>.

Имя и фамилия

<divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">Имя и фамилия</span></div><inputtype="text"aria-label="Имя"class="form-control"><inputtype="text"aria-label="Фамилия"class="form-control"></div>

Множественные «дополнения»

Поддерживаются множественные «дополнения», которые можно миксовать с версиями ввода в виде чекбоксов и «радио».

$0.00

<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div><inputtype="text"class="form-control"aria-label="Сумма в долларах (с точкой и двумя десятичными знаками)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Сумма в долларах (с точкой и двумя десятичными знаками)"><divclass="input-group-append"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div></div>

«Дополнения» кнопок

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon1">Кнопка</button></div><inputtype="text"class="form-control"placeholder=""aria-label="Пример текста с надстройкой кнопки"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя"aria-describedby="button-addon2"><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon2">Кнопка</button></div></div><divclass="input-group mb-3"><divclass="input-group-prepend"id="button-addon3"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div><inputtype="text"class="form-control"placeholder=""aria-label="Пример текста с двумя кнопками"aria-describedby="button-addon3"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя с двумя кнопками дополнения"aria-describedby="button-addon4"><divclass="input-group-append"id="button-addon4"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div></div>

Кнопки с выпадающими элементами

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Выпадающий список</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Отделенная ссылка</a></div></div><inputtype="text"class="form-control"aria-label="Ввод текста с помощью раскрывающейся кнопки"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Ввод текста с помощью раскрывающейся кнопки"><divclass="input-group-append"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Выпадающий список</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Отделенная ссылка</a></div></div></div>

Сегментированные кнопки

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttontype="button"class="btn btn-outline-secondary">Действие</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Переключатель раскрывающегося списка</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Отделенная ссылка</a></div></div><inputtype="text"class="form-control"aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка"><divclass="input-group-append"><buttontype="button"class="btn btn-outline-secondary">Действие</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Переключатель раскрывающегося списка</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Отделенная ссылка</a></div></div></div>

Пользовательские формы

Группы ввода включают поддержку пользовательских выборок и пользовательских загрузок файлов. Стандартные версии браузера для них не поддерживаются.

Пользовательский выбор

Параметры

<divclass="input-group mb-3"><divclass="input-group-prepend"><labelclass="input-group-text"for="inputGroupSelect01">Параметры</label></div><selectclass="custom-select"id="inputGroupSelect01"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="input-group mb-3"><selectclass="custom-select"id="inputGroupSelect02"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><divclass="input-group-append"><labelclass="input-group-text"for="inputGroupSelect02">Параметры</label></div></div><divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div><selectclass="custom-select"id="inputGroupSelect03"aria-label="Пример выбора с помощью надстройки кнопки"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="input-group"><selectclass="custom-select"id="inputGroupSelect04"aria-label="Пример выбора с помощью надстройки кнопки"><optionselected>Выбрать...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div></div>

Пользовательская загрузка файла

Загрузка

Выбрать файл

Загрузка

Выбрать файл

<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupFileAddon01">Загрузка</span></div><divclass="custom-file"><inputtype="file"class="custom-file-input"id="inputGroupFile01"aria-describedby="inputGroupFileAddon01"><labelclass="custom-file-label"for="inputGroupFile01">Выбрать файл</label></div></div><divclass="input-group mb-3"><divclass="custom-file"><inputtype="file"class="custom-file-input"id="inputGroupFile02"><labelclass="custom-file-label"for="inputGroupFile02"aria-describedby="inputGroupFileAddon02">Выбрать файл</label></div><divclass="input-group-append"><spanclass="input-group-text"id="inputGroupFileAddon02">Загрузка</span></div></div><divclass="input-group mb-3"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon03">Кнопка</button></div><divclass="custom-file"><inputtype="file"class="custom-file-input"id="inputGroupFile03"aria-describedby="inputGroupFileAddon03"><labelclass="custom-file-label"for="inputGroupFile03">Выбрать файл</label></div></div><divclass="input-group"><divclass="custom-file"><inputtype="file"class="custom-file-input"id="inputGroupFile04"aria-describedby="inputGroupFileAddon04"><labelclass="custom-file-label"for="inputGroupFile04">Выбрать файл</label></div><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon04">Кнопка</button></div></div>

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие доступные имена, чтобы их назначение можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого - использовать элемент <label> или - в случае кнопок - включить достаточно описательный текст как часть содержимого <button>...</button>.

В ситуациях, когда невозможно включить видимую метку <label> или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

Элементы <label> скрыты с использованием класса .sr-only
Указание на существующий элемент, который может действовать как метка, используя aria-labelledby
Предоставление атрибута title
Явная установка доступного имени для элемента с помощью aria-label

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута placeholder в качестве запасного варианта для доступного имени в элементах <input> и <textarea>. Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Хотя использование визуально скрытого содержимого (.sr-only, aria-label и даже содержимого placeholder, которое исчезает, когда в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки может по-прежнему проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.