Группа ввода

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

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

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

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

<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">Your vanity 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="Amount (to the nearest dollar)"><divclass="input-group-append"><spanclass="input-group-text">.00</span></div></div><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text">With textarea</span></div><textareaclass="form-control"aria-label="With textarea"></textarea></div>

Размеры

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

Small

Default

Large

<divclass="input-group input-group-sm mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small</span></div><inputtype="text"class="form-control"aria-label="Small"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-default">Default</span></div><inputtype="text"class="form-control"aria-label="Default"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large</span></div><inputtype="text"class="form-control"aria-label="Large"aria-describedby="inputGroup-sizing-sm"></div>

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

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

<divclass="input-group mb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"aria-label="Checkbox for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with checkbox"></div><divclass="input-group"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"aria-label="Radio button for following text input"></div></div><inputtype="text"class="form-control"aria-label="Text input with radio button"></div>

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

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

Имя и фамилия

<divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="">Имя и фамилия</span></div><inputtype="text"class="form-control"><inputtype="text"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="Amount (to the nearest dollar)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)"><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="Example text with button addon"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"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="Example text with two button addons"aria-describedby="button-addon3"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username with two button addons"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">Dropdown</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div><inputtype="text"class="form-control"aria-label="Text input with dropdown button"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Text input with dropdown button"><divclass="input-group-append"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div></div>

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

<divclass="input-group mb-3"><divclass="input-group-prepend"><buttontype="button"class="btn btn-outline-secondary">Action</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">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"><divclass="input-group-append"><buttontype="button"class="btn btn-outline-secondary">Action</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">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divrole="separator"class="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div></div>

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

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

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

Options

<divclass="input-group mb-3"><divclass="input-group-prepend"><labelclass="input-group-text"for="inputGroupSelect01">Options</label></div><selectclass="custom-select"id="inputGroupSelect01"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group mb-3"><selectclass="custom-select"id="inputGroupSelect02"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="input-group-append"><labelclass="input-group-text"for="inputGroupSelect02">Options</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"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group"><selectclass="custom-select"id="inputGroupSelect04"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div></div>

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

Upload

Choose file

Upload

Choose file

<divclass="input-group mb-3"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupFileAddon01">Upload</span></div><divclass="custom-file"><inputtype="file"class="custom-file-input"id="inputGroupFile01"aria-describedby="inputGroupFileAddon01"><labelclass="custom-file-label"for="inputGroupFile01">Choose file</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">Choose file</label></div><divclass="input-group-append"><spanclass="input-group-text"id="inputGroupFileAddon02">Upload</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">Choose file</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">Choose file</label></div><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon04">Кнопка</button></div></div>

Доступность

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

Точный метод (будет ли это скрытие элементов <label> классом .sr-only, или использование атрибутов aria-label и aria-labelledby, может быть в сочетании с aria-describedby) и то, какая дополнительная информация должна быть «доведена» до вспомогательных технологий – будет зависеть от точного типа виджета, который вы внедряете. Примеры в этой секции построены на нескольких специфических для каждого случая подходах.