Input输入框及输入框群组(Input-group)

在文本框的两侧定义文本、按钮或按钮组，轻松扩展表单控件。

基本示例

在input的任何一侧放置一个附加组件或按钮，您也可以在Input输入框的两面各放置一个组件（或按钮），我们不支持单个输入组合中有多个表单控制项，同时<label>必须在输入框组之外。

输入框(Input-group) - 图1

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text" id="basic-addon1">@</span>
  4.   </div>
  5.   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  6. </div>
  8. <div class="input-group mb-3">
  9.   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  10.   <div class="input-group-append">
  11.     <span class="input-group-text" id="basic-addon2">@example.com</span>
  12.   </div>
  13. </div>
  15. <label for="basic-url">Your vanity URL</label>
  16. <div class="input-group mb-3">
  17.   <div class="input-group-prepend">
  18.     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  19.   </div>
  20.   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
  21. </div>
  23. <div class="input-group mb-3">
  24.   <div class="input-group-prepend">
  25.     <span class="input-group-text">$</span>
  26.   </div>
  27.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  28.   <div class="input-group-append">
  29.     <span class="input-group-text">.00</span>
  30.   </div>
  31. </div>
  33. <div class="input-group">
  34.   <div class="input-group-prepend">
  35.     <span class="input-group-text">With textarea</span>
  36.   </div>
  37.   <textarea class="form-control" aria-label="With textarea"></textarea>
  38. </div>

包装

默认情况下，输入组通过flex-wrap: wrap 以便在输入组中容纳自定义表单字段验证.N你可以使用以下命令禁用此功能 .flex-nowrap.

输入框(Input-group) - 图2

  1. <div class="input-group flex-nowrap">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text" id="addon-wrapping">@</span>
  4.   </div>
  5.   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
  6. </div>

规格尺寸定义

将相对表单大小的class样式加到 .input-group中，其内容会自动调整大小，如.input-group-lg、.input-group-sm，不需要在每个元素上重重使用样式控制其大小。

输入框(Input-group) - 图3

  1. <div class="input-group input-group-sm mb-3">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  4.   </div>
  5.   <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  6. </div>
  8. <div class="input-group mb-3">
  9.   <div class="input-group-prepend">
  10.     <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  11.   </div>
  12.   <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
  13. </div>
  15. <div class="input-group input-group-lg">
  16.   <div class="input-group-prepend">
  17.     <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  18.   </div>
  19.   <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
  20. </div>

勾选或单选框组合

在输入组的插件中放置任何复选框或单选七天，而不仅仅文本。

输入框(Input-group) - 图4

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <div class="input-group-text">
  4.       <input type="checkbox" aria-label="Checkbox for following text input">
  5.     </div>
  6.   </div>
  7.   <input type="text" class="form-control" aria-label="Text input with checkbox">
  8. </div>
  10. <div class="input-group">
  11.   <div class="input-group-prepend">
  12.     <div class="input-group-text">
  13.     <input type="radio" aria-label="Radio button for following text input">
  14.     </div>
  15.   </div>
  16.   <input type="text" class="form-control" aria-label="Text input with radio button">
  17. </div>

多个输入

尽管可视化支持多个 <input>但验证样式仅适用于具有单个<input>的输入组。

输入框(Input-group) - 图5

  1. <div class="input-group">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text" id="">First and last name</span>
  4.   </div>
  5.   <input type="text" class="form-control">
  6.   <input type="text" class="form-control">
  7. </div>

多类型控件组合

支持多种控件结合，比如复选框和、文本、input框混合使用。

输入框(Input-group) - 图6

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text">$</span>
  4.     <span class="input-group-text">0.00</span>
  5.   </div>
  6.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  7. </div>
  9. <div class="input-group">
  10.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  11.   <div class="input-group-append">
  12.     <span class="input-group-text">$</span>
  13.     <span class="input-group-text">0.00</span>
  14.   </div>
  15. </div>

按钮组合

输入框(Input-group) - 图7

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <button class="btn btn-outline-secondary" type="button">Button</button>
  4.   </div>
  5.   <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
  6. </div>
  8. <div class="input-group mb-3">
  9.   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  10.   <div class="input-group-append">
  11.     <button class="btn btn-outline-secondary" type="button">Button</button>
  12.   </div>
  13. </div>
  15. <div class="input-group mb-3">
  16.   <div class="input-group-prepend">
  17.     <button class="btn btn-outline-secondary" type="button">Button</button>
  18.     <button class="btn btn-outline-secondary" type="button">Button</button>
  19.   </div>
  20.   <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
  21. </div>
  23. <div class="input-group">
  24.   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  25.   <div class="input-group-append">
  26.     <button class="btn btn-outline-secondary" type="button">Button</button>
  27.     <button class="btn btn-outline-secondary" type="button">Button</button>
  28.   </div>
  29. </div>

带下拉列表的按钮组合

输入框(Input-group) - 图8

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  4.     <div class="dropdown-menu">
  5.       <a class="dropdown-item" href="#">Action</a>
  6.       <a class="dropdown-item" href="#">Another action</a>
  7.       <a class="dropdown-item" href="#">Something else here</a>
  8.       <div role="separator" class="dropdown-divider"></div>
  9.       <a class="dropdown-item" href="#">Separated link</a>
  10.     </div>
  11.   </div>
  12.   <input type="text" class="form-control" aria-label="Text input with dropdown button">
  13. </div>
  15. <div class="input-group">
  16.   <input type="text" class="form-control" aria-label="Text input with dropdown button">
  17.   <div class="input-group-append">
  18.     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
  19.     <div class="dropdown-menu">
  20.       <a class="dropdown-item" href="#">Action</a>
  21.       <a class="dropdown-item" href="#">Another action</a>
  22.       <a class="dropdown-item" href="#">Something else here</a>
  23.       <div role="separator" class="dropdown-divider"></div>
  24.       <a class="dropdown-item" href="#">Separated link</a>
  25.     </div>
  26.   </div>
  27. </div>

分裂式按钮与input组合

输入框(Input-group) - 图9

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <button type="button" class="btn btn-outline-secondary">Action</button>
  4.     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  5.       <span class="sr-only">Toggle Dropdown</span>
  6.     </button>
  7.     <div class="dropdown-menu">
  8.       <a class="dropdown-item" href="#">Action</a>
  9.       <a class="dropdown-item" href="#">Another action</a>
  10.       <a class="dropdown-item" href="#">Something else here</a>
  11.       <div role="separator" class="dropdown-divider"></div>
  12.       <a class="dropdown-item" href="#">Separated link</a>
  13.     </div>
  14.   </div>
  15.   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  16. </div>
  18. <div class="input-group">
  19.   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  20.   <div class="input-group-append">
  21.     <button type="button" class="btn btn-outline-secondary">Action</button>
  22.     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  23.       <span class="sr-only">Toggle Dropdown</span>
  24.     </button>
  25.     <div class="dropdown-menu">
  26.       <a class="dropdown-item" href="#">Action</a>
  27.       <a class="dropdown-item" href="#">Another action</a>
  28.       <a class="dropdown-item" href="#">Something else here</a>
  29.       <div role="separator" class="dropdown-divider"></div>
  30.       <a class="dropdown-item" href="#">Separated link</a>
  31.     </div>
  32.   </div>
  33. </div>

自定义表单

输入组包括对自定义选择和自定义文件输入的支持。 这些浏览器的默认版本不受支持。

自定义选择

输入框(Input-group) - 图10

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <label class="input-group-text" for="inputGroupSelect01">Options</label>
  4.   </div>
  5.   <select class="custom-select" id="inputGroupSelect01">
  6.     <option selected>Choose...</option>
  7.     <option value="1">One</option>
  8.     <option value="2">Two</option>
  9.     <option value="3">Three</option>
  10.   </select>
  11. </div>
  13. <div class="input-group mb-3">
  14.   <select class="custom-select" id="inputGroupSelect02">
  15.     <option selected>Choose...</option>
  16.     <option value="1">One</option>
  17.     <option value="2">Two</option>
  18.     <option value="3">Three</option>
  19.   </select>
  20.   <div class="input-group-append">
  21.     <label class="input-group-text" for="inputGroupSelect02">Options</label>
  22.   </div>
  23. </div>
  25. <div class="input-group mb-3">
  26.   <div class="input-group-prepend">
  27.     <button class="btn btn-outline-secondary" type="button">Button</button>
  28.   </div>
  29.   <select class="custom-select" id="inputGroupSelect03">
  30.     <option selected>Choose...</option>
  31.     <option value="1">One</option>
  32.     <option value="2">Two</option>
  33.     <option value="3">Three</option>
  34.   </select>
  35. </div>
  37. <div class="input-group">
  38.   <select class="custom-select" id="inputGroupSelect04">
  39.     <option selected>Choose...</option>
  40.     <option value="1">One</option>
  41.     <option value="2">Two</option>
  42.     <option value="3">Three</option>
  43.   </select>
  44.   <div class="input-group-append">
  45.     <button class="btn btn-outline-secondary" type="button">Button</button>
  46.   </div>
  47. </div>

自定义文件输入

输入框(Input-group) - 图11

  1. <div class="input-group mb-3">
  2.   <div class="input-group-prepend">
  3.     <span class="input-group-text">Upload</span>
  4.   </div>
  5.   <div class="custom-file">
  6.     <input type="file" class="custom-file-input" id="inputGroupFile01">
  7.     <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  8.   </div>
  9. </div>
  11. <div class="input-group mb-3">
  12.   <div class="custom-file">
  13.     <input type="file" class="custom-file-input" id="inputGroupFile02">
  14.     <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
  15.   </div>
  16.   <div class="input-group-append">
  17.     <span class="input-group-text" id="">Upload</span>
  18.   </div>
  19. </div>
  21. <div class="input-group mb-3">
  22.   <div class="input-group-prepend">
  23.     <button class="btn btn-outline-secondary" type="button">Button</button>
  24.   </div>
  25.   <div class="custom-file">
  26.     <input type="file" class="custom-file-input" id="inputGroupFile03">
  27.     <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  28.   </div>
  29. </div>
  31. <div class="input-group">
  32.   <div class="custom-file">
  33.     <input type="file" class="custom-file-input" id="inputGroupFile04">
  34.     <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  35.   </div>
  36.   <div class="input-group-append">
  37.     <button class="btn btn-outline-secondary" type="button">Button</button>
  38.   </div>
  39. </div>

无障碍浏览提示(易用性)

如果您没有为每个input输入添加<label>，屏幕阅读器将对您的表单有困难。对于这些输入组，请确保向辅助技术传达任何附加的标签或功能。

要使用的确切技术（<label>使用.sr-only类隐藏的元素，或使用 aria-labelledby和aria-describedby属性结合aria-describedby使用）以及需要传达的其他信息将根据您正在实现的界面小部件的具体类型而有所不同。本节中的示例提供了一些建议的具体案例。