输入组

输入组-Bootstrap 5和Material Design 2.0表格

通过在文本框的任意一侧添加文本，按钮或按钮组，轻松扩展表单控件 文本输入，自定义选择和自定义文件输入。

基本例子

在输入的两侧放置一个附加组件或按钮。您也可以在 输入。切记放置 <label>s在输入组之外。

@
@example.com
https://example.com/users/
$ .00
@
With textarea 

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input
              type="text"
              class="form-control"
              placeholder="Username"
              aria-label="Username"
              aria-describedby="basic-addon1"
            />
          </div>

          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control"
              placeholder="Recipient's username"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
            />
            <span class="input-group-text" id="basic-addon2">@example.com</span>
          </div>

          <label for="basic-url" class="form-label">Your vanity URL</label>
          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            <input
              type="text"
              class="form-control"
              id="basic-url"
              aria-describedby="basic-addon3"
            />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" />
            <span class="input-group-text">.00</span>
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" />
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="Server" aria-label="Server" />
          </div>

          <div class="input-group">
            <span class="input-group-text">With textarea</span>
            <textarea class="form-control" aria-label="With textarea"></textarea>
          </div>

包装纸

输入组默认通过 flex-wrap：wrap 进行换行，以适应自定义 输入组中的表单字段验证。您可以使用 .flex-nowrap 。

@ 

          <div class="input-group flex-nowrap">
            <span class="input-group-text" id="addon-wrapping">@</span>
            <input
              type="text"
              class="form-control"
              placeholder="Username"
              aria-label="Username"
              aria-describedby="addon-wrapping"
            />
          </div>

浆纱

将相对的表单大小调整类添加到 .input-group 本身和内容 内将自动调整大小-无需在每个表单上重复表格控件大小类 元件。

不支持调整各个输入组元素的大小。
Small
Default
Large 

          <div class="input-group input-group-sm mb-3">
            <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
            <input
              type="text"
              class="form-control"
              aria-label="Sizing example input"
              aria-describedby="inputGroup-sizing-sm"
            />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
            <input
              type="text"
              class="form-control"
              aria-label="Sizing example input"
              aria-describedby="inputGroup-sizing-default"
            />
          </div>

          <div class="input-group input-group-lg">
            <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
            <input
              type="text"
              class="form-control"
              aria-label="Sizing example input"
              aria-describedby="inputGroup-sizing-lg"
            />
          </div>

无边界

将 .border-0 类添加到 .input-group-text 中以删除边框。

@
@example.com
https://example.com/users/
$ .00
With textarea 

          <div class="input-group mb-3">
            <span class="input-group-text border-0" id="search-addon"
              ><i class="fas fa-search"></i
            ></span>
            <input
              type="search"
              class="form-control rounded"
              placeholder="Search"
              aria-label="Search"
              aria-describedby="search-addon"
            />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text border-0" id="basic-addon1">@</span>
            <input
              type="text"
              class="form-control rounded"
              placeholder="Username"
              aria-label="Username"
              aria-describedby="basic-addon1"
            />
          </div>

          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control rounded"
              placeholder="Recipient's username"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
            />
            <span class="input-group-text border-0" id="basic-addon2">@example.com</span>
          </div>

          <label for="basic-url" class="form-label">Your vanity URL</label>
          <div class="input-group mb-3">
            <span class="input-group-text border-0" id="basic-addon3"
              >https://example.com/users/</span
            >
            <input
              type="text"
              class="form-control rounded"
              id="basic-url"
              aria-describedby="basic-addon3"
            />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text border-0">$</span>
            <input
              type="text"
              class="form-control rounded"
              aria-label="Amount (to the nearest dollar)"
            />
            <span class="input-group-text border-0">.00</span>
          </div>

          <div class="input-group">
            <span class="input-group-text border-0">With textarea</span>
            <textarea class="form-control rounded" aria-label="With textarea"></textarea>
          </div>

复选框和收音机

将任何复选框或单选选项放在输入组插件中，而不是文本中。


          <div class="input-group mb-3">
            <div class="input-group-text">
              <input
                class="form-check-input"
                type="checkbox"
                value=""
                aria-label="Checkbox for following text input"
              />
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox" />
          </div>

          <div class="input-group">
            <div class="input-group-text">
              <input
                class="form-check-input"
                type="radio"
                value=""
                aria-label="Radio button for following text input"
              />
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio button" />
          </div>

多个输入

虽然多个 <input>视觉上支持，仅验证样式 可用于一个输入组<input>.

First and last name 

          <div class="input-group">
            <span class="input-group-text">First and last name</span>
            <input type="text" aria-label="First name" class="form-control" />
            <input type="text" aria-label="Last name" class="form-control" />
          </div>

多个插件

支持多个加载项，并且可以与复选框和广播输入版本混合使用。

$ 0.00
$ 0.00 

          <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
          </div>

          <div class="input-group">
            <input
              type="text"
              class="form-control"
              aria-label="Dollar amount (with dot and two decimal places)"
            />
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
          </div>

按钮插件


          <div class="input-group mb-3">
            <button
              class="btn btn-outline-primary"
              type="button"
              id="button-addon1"
              data-mdb-ripple-color="dark"
            >
              Button
            </button>
            <input
              type="text"
              class="form-control"
              placeholder=""
              aria-label="Example text with button addon"
              aria-describedby="button-addon1"
            />
          </div>

          <div class="input-group mb-3">
            <input
              type="text"
              class="form-control"
              placeholder="Recipient's username"
              aria-label="Recipient's username"
              aria-describedby="button-addon2"
            />
            <button
              class="btn btn-outline-primary"
              type="button"
              id="button-addon2"
              data-mdb-ripple-color="dark"
            >
              Button
            </button>
          </div>

          <div class="input-group mb-3">
            <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark">
              Button
            </button>
            <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark">
              Button
            </button>
            <input
              type="text"
              class="form-control"
              placeholder=""
              aria-label="Example text with two button addons"
            />
          </div>

          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="Recipient's username"
              aria-label="Recipient's username with two button addons"
            />
            <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark">
              Button
            </button>
            <button class="btn btn-outline-primary" type="button" data-mdb-ripple-color="dark">
              Button
            </button>
          </div>

带有下拉菜单的按钮


          <div class="input-group mb-3">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
            <input type="text" class="form-control" aria-label="Text input with dropdown button" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" aria-label="Text input with dropdown button" />
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <div class="input-group">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action before</a></li>
              <li><a class="dropdown-item" href="#">Another action before</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
            <input
              type="text"
              class="form-control"
              aria-label="Text input with 2 dropdown buttons"
            />
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

分段按钮


          <div class="input-group mb-3">
            <button type="button" class="btn btn-outline-primary">Action</button>
            <button
              type="button"
              class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
            <input
              type="text"
              class="form-control"
              aria-label="Text input with segmented dropdown button"
            />
          </div>

          <div class="input-group">
            <input
              type="text"
              class="form-control"
              aria-label="Text input with segmented dropdown button"
            />
            <button type="button" class="btn btn-outline-primary">Action</button>
            <button
              type="button"
              class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

档案输入


          <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupFile01">Upload</label>
            <input type="file" class="form-control" id="inputGroupFile01" />
          </div>

          <div class="input-group mb-3">
            <input type="file" class="form-control" id="inputGroupFile02" />
            <label class="input-group-text" for="inputGroupFile02">Upload</label>
          </div>

          <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">
              Button
            </button>
            <input
              type="file"
              class="form-control"
              id="inputGroupFile03"
              aria-describedby="inputGroupFileAddon03"
              aria-label="Upload"
            />
          </div>

          <div class="input-group">
            <input
              type="file"
              class="form-control"
              id="inputGroupFile04"
              aria-describedby="inputGroupFileAddon04"
              aria-label="Upload"
            />
            <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">
              Button
            </button>
          </div>

辅助功能

如果您没有为每个输入都添加标签，则屏幕阅读器将无法处理您的表单。 对于这些输入组，请确保将任何其他标签或功能传达给 辅助技术。

使用的确切技术(<label> 使用隐藏的元素 .visually-hidden类，或使用 aria-label 和 aria-labelledby 属性，可能与 aria-describedby) 以及需要传达哪些其他信息 根据您要实现的界面小部件的确切类型而有所不同。本例 本节提供了一些建议的，针对特定案例的方法。