表单(Forms)

Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件，以下是示例和使用指南。

概览

Bootstrap的表单控件使用了 CSS样式重置，使用这些Class类来自定义显示，以便跨越浏览器和设备获得一致的呈现。

确保在输入框上使用正确的 type 属性（如email 用于电子邮件地址或 number 用于数字录入) 从而利用较新的录入控制，包括诸如电子邮件验证、号码选择等。

以下是演示Bootstrap表单样式的一个经典示例展示，并推荐继续向下阅读有关class类、表单布局等文档。

表单(Form) - 图1

  1. <form>
  2.   <div class="form-group">
  3.     <label for="exampleInputEmail1">Email address</label>
  4.     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  5.     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  6.   </div>
  7.   <div class="form-group">
  8.     <label for="exampleInputPassword1">Password</label>
  9.     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  10.   </div>
  11.   <div class="form-check">
  12.     <input type="checkbox" class="form-check-input" id="exampleCheck1">
  13.     <label class="form-check-label" for="exampleCheck1">Check me out</label>
  14.   </div>
  15.   <button type="submit" class="btn btn-primary">Submit</button>
  16. </form>

表单控件

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

推荐浏览 自定义表单 以进一步了解 <select>控件的风格设计。

表单(Form) - 图2

  1. <form>
  2.   <div class="form-group">
  3.     <label for="exampleFormControlInput1">Email address</label>
  4.     <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  5.   </div>
  6.   <div class="form-group">
  7.     <label for="exampleFormControlSelect1">Example select</label>
  8.     <select class="form-control" id="exampleFormControlSelect1">
  9.       <option>1</option>
  10.       <option>2</option>
  11.       <option>3</option>
  12.       <option>4</option>
  13.       <option>5</option>
  14.     </select>
  15.   </div>
  16.   <div class="form-group">
  17.     <label for="exampleFormControlSelect2">Example multiple select</label>
  18.     <select multiple class="form-control" id="exampleFormControlSelect2">
  19.       <option>1</option>
  20.       <option>2</option>
  21.       <option>3</option>
  22.       <option>4</option>
  23.       <option>5</option>
  24.     </select>
  25.   </div>
  26.   <div class="form-group">
  27.     <label for="exampleFormControlTextarea1">Example textarea</label>
  28.     <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  29.   </div>
  30. </form>

对于input文件选择控件，Bootstrap v4采用.form-control-file 取代了.form-control 。

表单(Form) - 图3

  1. <form>
  2.   <div class="form-group">
  3.     <label for="exampleFormControlFile1">Example file input</label>
  4.     <input type="file" class="form-control-file" id="exampleFormControlFile1">
  5.   </div>
  6. </form>

大小规格

使用 .form-control-lg 和 .form-control-sm属性定控件大小高度。

表单(Form) - 图4

  1. <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  2. <input class="form-control" type="text" placeholder="Default input">
  3. <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

表单(Form) - 图5

  1. <select class="form-control form-control-lg">
  2.   <option>Large select</option>
  3. </select>
  4. <select class="form-control">
  5.   <option>Default select</option>
  6. </select>
  7. <select class="form-control form-control-sm">
  8.   <option>Small select</option>
  9. </select>

只读属性

在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

表单(Form) - 图6

  1. <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

只读纯文本

如果你希望将 <input readonly>属性进一步处理，显示为纯文本（没有控件框），你只要引用 .form-control-plaintext class样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

表单(Form) - 图7

  1. <form>
  2.   <div class="form-group row">
  3.     <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  4.     <div class="col-sm-10">
  5.       <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  6.     </div>
  7.   </div>
  8.   <div class="form-group row">
  9.     <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
  10.     <div class="col-sm-10">
  11.       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  12.     </div>
  13.   </div>
  14. </form>

表单(Form) - 图8

  1. <form class="form-inline mb-2">
  2.   <div class="form-group">
  3.     <label for="staticEmail2" class="sr-only">Email</label>
  4.     <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  5.   </div>
  6.   <div class="form-group mx-sm-3 mb-2">
  7.     <label for="inputPassword2" class="sr-only">Password</label>
  8.     <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  9.   </div>
  10.   <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
  11. </form>

输入范围

使用设置水平滚动范围输入.form-control-range。

表单(Form) - 图9

  1. <form>
  2.   <div class="form-group">
  3.     <label for="formControlRange">Example Range input</label>
  4.     <input type="range" class="form-control-range" id="formControlRange">
  5.   </div>
  6. </form>

复选框与单选框

使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，<label>需要将该.disabled 类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

默认堆叠

默认情况下，同级任意数量的复选框与单选框按钮垂直堆叠，并与.form-check有间隙隔离。

表单(Form) - 图10

  1. <div class="form-check">
  2.   <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  3.   <label class="form-check-label" for="defaultCheck1">
  4.     Option one is this and that—be sure to include why it's great
  5.   </label>
  6. </div>
  7. <div class="form-check">
  8.   <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  9.   <label class="form-check-label" for="defaultCheck2">
  10.      Option two is disabled
  11.   </label>
  12. </div>

表单(Form) - 图11

  1. <div class="form-check">
  2.   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  3.   <label class="form-check-label" for="exampleRadios1">
  4.    Option one is this and that—be sure to include why it's great 
  5.   </label>
  6. </div>
  7. <div class="form-check">
  8.   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  9.   <label class="form-check-label" for="exampleRadios2">
  10.     Option two can be something else and selecting it will deselect option one
  11.   </label>
  12. </div>
  13. <div class="form-check disabled">
  14.   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  15.   <label class="form-check-label" for="exampleRadios3">
  16.     Option three is disabled 
  17.   </label>
  18. </div>

水平排列

通过添加 .form-check-inline到任何一个组，会使 加到任何.form-check中的选取框平行排列。

表单(Form) - 图12

  1. <div class="form-check form-check-inline">
  2.   <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  3.   <label class="form-check-label" for="inlineCheckbox1">1</label>
  4. </div>
  5. <div class="form-check form-check-inline">
  6.   <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  7.   <label class="form-check-label" for="inlineCheckbox2">2</label>
  8. </div>
  9. <div class="form-check form-check-inline">
  10.   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  11.   <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
  12. </div>

表单(Form) - 图13

  1. <div class="form-check form-check-inline">
  2.   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  3.   <label class="form-check-label" for="inlineRadio1">1</label>
  4. </div>
  5. <div class="form-check form-check-inline">
  6.   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  7.   <label class="form-check-label" for="inlineRadio2">2</label>
  8. </div>
  9. <div class="form-check form-check-inline">
  10.   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  11.   <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
  12. </div>

没有标签

添加 .position-static 到 .form-check 选择器上，可以实现没有文本的输入，记住：仍然要为辅助浏览（友好访问）提供相应标签，如使用 aria-label定义。

表单(Form) - 图14

  1. <div class="form-check">
  2.   <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  3. </div>
  4. <div class="form-check">
  5.   <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  6. </div>

布局

自从 Bootstrap 使用display: block 和 width: 100% 在全部的 input 控件上后，表单默认都是基于垂直堆叠排列的，可以使用其它Class类来改变表单的布局。

表单组

.form-group 群组可以向为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom 属性，由于它是一个class选择器，你可以在<fieldset>、 <div>或任何其它元素中使用它。

表单(Form) - 图15

  1. <form>
  2.   <div class="form-group">
  3.     <label for="formGroupExampleInput">Example label</label>
  4.     <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  5.   </div>
  6.   <div class="form-group">
  7.     <label for="formGroupExampleInput2">Another label</label>
  8.     <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  9.   </div>
  10. </form>

表单栅格排列

可使用我们的栅格系统构建更复杂的表单，包括建立多列、多种宽度和其它对齐选项的布局。

表单(Form) - 图16

  1. <form>
  2.   <div class="row">
  3.     <div class="col">
  4.       <input type="text" class="form-control" placeholder="First name">
  5.     </div>
  6.     <div class="col">
  7.       <input type="text" class="form-control" placeholder="Last name">
  8.     </div>
  9.   </div>
  10. </form>

表格式排列

你也可以使用 .form-row来取代.row（它们二者很多时候可以互换使用），因为.form-row提供更小的沟槽缝隙。

表单(Form) - 图17

  1. <form>
  2.   <div class="form-row">
  3.     <div class="col">
  4.       <input type="text" class="form-control" placeholder="First name">
  5.     </div>
  6.     <div class="col">
  7.       <input type="text" class="form-control" placeholder="Last name">
  8.     </div>
  9.   </div>
  10. </form>

还可以使用栅格系统建立更复杂的布局。

表单(Form) - 图18

  1. <form>
  2.   <div class="form-row">
  3.     <div class="form-group col-md-6">
  4.       <label for="inputEmail4">Email</label>
  5.       <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
  6.     </div>
  7.     <div class="form-group col-md-6">
  8.       <label for="inputPassword4">Password</label>
  9.       <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
  10.     </div>
  11.   </div>
  12.   <div class="form-group">
  13.     <label for="inputAddress">Address</label>
  14.     <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  15.   </div>
  16.   <div class="form-group">
  17.     <label for="inputAddress2">Address 2</label>
  18.     <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  19.   </div>
  20.   <div class="form-row">
  21.     <div class="form-group col-md-6">
  22.       <label for="inputCity">City</label>
  23.       <input type="text" class="form-control" id="inputCity">
  24.     </div>
  25.     <div class="form-group col-md-4">
  26.       <label for="inputState">State</label>
  27.       <select id="inputState" class="form-control">
  28.         <option selected>Choose...</option>
  29.         <option>...</option>
  30.       </select>
  31.     </div>
  32.     <div class="form-group col-md-2">
  33.       <label for="inputZip">Zip</label>
  34.       <input type="text" class="form-control" id="inputZip">
  35.     </div>
  36.   </div>
  37.   <div class="form-group">
  38.     <div class="form-check">
  39.       <input class="form-check-input" type="checkbox" id="gridCheck">
  40.       <label class="form-check-label" for="gridCheck">
  41.         Check me out
  42.       </label>
  43.     </div>
  44.   </div>
  45.   <button type="submit" class="btn btn-primary">Sign in</button>
  46. </form>

垂直排列表单

通过添加 .row class类，并使用 .col-- 等栅格组件来指定标签和宽度，可以建立起水平表单。

确保添加.col-form-label 到您<label>上，以便他们垂直居中与他们相关的表单控件。<legend>元素，可以.col-form-legend样式定义，与普通<label>元素相似。.

表单(Form) - 图19

  1. <form>
  2.   <div class="form-group row">
  3.     <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
  4.     <div class="col-sm-10">
  5.       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  6.     </div>
  7.   </div>
  8.   <div class="form-group row">
  9.     <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
  10.     <div class="col-sm-10">
  11.       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  12.     </div>
  13.   </div>
  14.   <fieldset class="form-group">
  15.     <div class="row">
  16.       <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
  17.       <div class="col-sm-10">
  18.         <div class="form-check">
  19.           <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
  20.           <label class="form-check-label" for="gridRadios1">
  21.             First radio
  22.           </label>
  23.         </div>
  24.         <div class="form-check">
  25.           <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
  26.           <label class="form-check-label" for="gridRadios2">
  27.             Second radio
  28.           </label>
  29.         </div>
  30.         <div class="form-check disabled">
  31.           <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
  32.           <label class="form-check-label" for="gridRadios3">
  33.             Third disabled radio
  34.           </label>
  35.         </div>
  36.       </div>
  37.     </div>
  38.   </fieldset>
  39.   <div class="form-group row">
  40.     <div class="col-sm-2">Checkbox</div>
  41.     <div class="col-sm-10">
  42.       <div class="form-check">
  43.         <input class="form-check-input" type="checkbox" id="gridCheck1">
  44.         <label class="form-check-label" for="gridCheck1">
  45.           Example checkbox
  46.         </label>
  47.       </div>
  48.     </div>
  49.   </div>
  50.   <div class="form-group row">
  51.     <div class="col-sm-10">
  52.       <button type="submit" class="btn btn-primary">Sign in</button>
  53.     </div>
  54.   </div>
  55. </form>
垂直排列表单尺寸规格定义

使用.col-form-label-sm 、 .col-form-label-lg 到 <label>上，可以定义控件大小，还有 .form-control-lg 、 .form-control-sm样式也起相应作用。

表单(Form) - 图20

  1. <form>
  2.   <div class="form-group row">
  3.     <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  4.     <div class="col-sm-10">
  5.       <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  6.     </div>
  7.   </div>
  8.   <div class="form-group row">
  9.     <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  10.     <div class="col-sm-10">
  11.       <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  12.     </div>
  13.   </div>
  14.   <div class="form-group row">
  15.     <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  16.     <div class="col-sm-10">
  17.       <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  18.     </div>
  19.   </div>
  20. </form>

栅格式列尺寸定义

如前面的示例所示，我們的栅格系統允許您将任意数量的的 code class="highlighter-rouge">.col放置在 code class="highlighter-rouge">.row 或 code class="highlighter-rouge">.form-row中,它们会在自动进行宽度分割（根据你的栅格定义），从而定义某列更窄或某列更宽（其余列享受流式布局宽度定义）。

表单(Form) - 图21

  1. <form>
  2.   <div class="form-row">
  3.     <div class="col-7">
  4.       <input type="text" class="form-control" placeholder="City">
  5.     </div>
  6.     <div class="col">
  7.       <input type="text" class="form-control" placeholder="State">
  8.     </div>
  9.     <div class="col">
  10.       <input type="text" class="form-control" placeholder="Zip">
  11.     </div>
  12.   </div>
  13. </form>

自动调整大小

下面的示例使用一个flexbox弹性布局垂直居中的内容，我们将.col改为.col-auto，这样的列只占用本身内容所需要的宽度，换句话说列的大小就是内容的大小（宽度）

表单(Form) - 图22

  1. <form>
  2.   <div class="form-row align-items-center">
  3.     <div class="col-auto">
  4.       <label class="sr-only" for="inlineFormInput">Name</label>
  5.       <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
  6.     </div>
  7.     <div class="col-auto">
  8.       <label class="sr-only" for="inlineFormInputGroup">Username</label>
  9.       <div class="input-group mb-2">
  10.         <div class="input-group-prepend">
  11.           <div class="input-group-text">@</div>
  12.         </div>
  13.         <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
  14.       </div>
  15.     </div>
  16.     <div class="col-auto">
  17.       <div class="form-check mb-2">
  18.         <input class="form-check-input" type="checkbox" id="autoSizingCheck">
  19.         <label class="form-check-label" for="autoSizingCheck">
  20.           Remember me
  21.         </label>
  22.       </div>
  23.     </div>
  24.     <div class="col-auto">
  25.       <button type="submit" class="btn btn-primary mb-2">Submit</button>
  26.     </div>
  27.   </div>
  28. </form>

然后，你可以重新混合不同大小的class样式。

表单(Form) - 图23

  1. <form>
  2.   <div class="form-row align-items-center">
  3.     <div class="col-sm-3 my-1">
  4.       <label class="sr-only" for="inlineFormInputName">Name</label>
  5.       <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
  6.     </div>
  7.     <div class="col-sm-3 my-1">
  8.       <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
  9.       <div class="input-group">
  10.         <div class="input-group-prepend">
  11.           <div class="input-group-text">@</div>
  12.         </div>
  13.         <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
  14.       </div>
  15.     </div>
  16.     <div class="col-auto my-1">
  17.       <div class="form-check">
  18.         <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
  19.         <label class="form-check-label" for="autoSizingCheck2">
  20.           Remember me
  21.         </label>
  22.       </div>
  23.     </div>
  24.     <div class="col-auto my-1">
  25.       <button type="submit" class="btn btn-primary">Submit</button>
  26.     </div>
  27.   </div>
  28. </form>

也支持 自定义表单 控件。.

表单(Form) - 图24

  1. <form>
  2.   <div class="form-row align-items-center">
  3.     <div class="col-auto my-1">
  4.       <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
  5.       <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
  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>
  12.     <div class="col-auto my-1">
  13.       <div class="custom-control custom-checkbox mr-sm-2">
  14.         <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
  15.         <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
  16.       </div>
  17.     </div>
  18.     <div class="col-auto my-1">
  19.       <button type="submit" class="btn btn-primary">Submit</button>
  20.     </div>
  21.   </div>
  22. </form>

内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。内联表单中的表单控件与默认状态略有不同：

  • 基于display: flex控件组件，并允许您使用 间隙隔离 和 flexbox 弹性布局样式。
  • 控制组件和input接受 width: auto 以覆盖预设的 width: 100%。
  • 控制组件只会在viewport 576px宽度 时才会显示在行内，以便在移动设备上完整呈现。你需要手机添加宽度或对齐在单个的控制元件上，通过 间隙隔离定义 (如下所示)，最后一定要将 <label>包含在每个表单控制元件内，即使你需要使用 .sr-only从非正常屏幕访问它或隐藏它。表单(Form) - 图25
  1. <form class="form-inline">
  2.   <label class="sr-only" for="inlineFormInputName2">Name</label>
  3.   <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
  5.   <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  6.   <div class="input-group mb-2 mr-sm-2">
  7.     <div class="input-group-prepend">
  8.       <div class="input-group-text">@</div>
  9.     </div>
  10.     <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  11.   </div>
  13.   <div class="form-check mb-2 mr-sm-2">
  14.     <input class="form-check-input" type="checkbox" id="inlineFormCheck">
  15.     <label class="form-check-label" for="inlineFormCheck">
  16.       Remember me
  17.     </label>
  18.   </div>
  20.   <button type="submit" class="btn btn-primary mb-2">Submit</button>
  21. </form>

自定义表单和select选择控件也是支持的。表单(Form) - 图26

  1. <form class="form-inline">
  2.   <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  3.   <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
  4.     <option selected>Choose...</option>
  5.     <option value="1">One</option>
  6.     <option value="2">Two</option>
  7.     <option value="3">Three</option>
  8.   </select>
  10.   <div class="custom-control custom-checkbox my-1 mr-sm-2">
  11.     <input type="checkbox" class="custom-control-input" id="customControlInline">
  12.     <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  13.   </div>
  15.   <button type="submit" class="btn btn-primary my-1">Submit</button>
  16. </form>

隐藏的标签替代

如果您没有为每个input添加标签，屏幕阅读器等辅助技术将对您的表单有困难。对于这些内联表单，您可以使用.sr-only类隐藏标签。同时我们还提供了辅助技术标签以外的解决方法，例如： aria-label、aria-labelledby 或 title 属性，如果这些都不存在，辅助技术可以使用 placeholder 的属性（如果它存在）, 但注意：不推荐使用 placeholder替代其它标签方法。

表单下方帮助提示文本

可以使用..form-text t（以前称为.help-block 在v3中）创建表单中的块级帮助文本。可以使用任何内联HTML元素和通用样式（如.text-muted）灵活的展示帮助提示文本。