其他分享
首页 > 其他分享> > Bootstrap3 表单控件的状态

Bootstrap3 表单控件的状态

作者：互联网

控件的状态

在表单的使用过程中，每个控件可能都会有很多状态，通过表单控件的状态，可以给用户或访问者提供一些有用的反馈。

Bootstrap为表单控件提供了 4 种状态，分别是获得焦点状态、禁用状态、只读状态、校验状态，并为每种状态定义了相应的样式。

1、获得焦点状态

当用户单击了输入框，或按 Tab 键切换到输入框时，输入控件获得焦点。当输入控件获得焦点时，Bootstrap会移除输入框的默认轮廓样式，并使用 box-shadow 属性为 :focus状态添加一个浅蓝色光晕作为边框。效果如图 2‑61所示：

获得焦点状态

图2-61 获得焦点状态

2、禁用状态

为 <input> 设置 disabled 属性，就可以禁止它与用户有任何交互（焦点、输入等）。Bootstrap为被禁用的元素提供灰色背景，并且还添加了not-allowed的鼠标状态。效果如图 2‑62所示：

禁用文本框

图2-62 禁用文本框

为<fieldset>设置disabled属性，可以禁用<fieldset>中包含的所有控件。如：


 
  1. <form>
  2.   <fieldset disabled>
  3.     <div class="form-group">
  4.       <label for="disabledTextInput">Disabled input</label>
  5.       <input type="text" id="disabledTextInput" class="form-control">
  6.     </div>
  7.     <div class="form-group">
  8.       <label for="disabledSelect">Disabled select menu</label>
  9.       <select id="disabledSelect" class="form-control">
  10.         <option>Disabled select</option>
  11.       </select>
  12.     </div>
  13.     <div class="checkbox">
  14.       <label>
  15.         <input type="checkbox"> Can't check this
  16.       </label>
  17.     </div>
  18.     <button type="submit" class="btn btn-primary">Submit</button>
  19.   </fieldset>
  20. </form>

效果图 2‑63所示：

禁用 fieldset

图2-63 禁用 fieldset

默认情况下，浏览器会将<fieldset disabled>内所有的原生的表单控件（<input>、<select>和<button>元素）设置为禁用状态，防止键盘和鼠标与他们交互。然而，如果表单中还包含<a ... class="btn btn-*">元素，这些元素将只被赋予pointer-events: none属性。但是，该 CSS 属性尚不规范，并且在 Opera 18 及更低版本的浏览器或 Internet Explorer 11 中没有得到全面支持，并且不会阻止键盘用户能够获取焦点或激活这些链接。所以，为了安全起见，建议使用自定义 JavaScript 来禁用这些链接。

另外，虽然 Bootstrap 会将这些样式应用到所有浏览器上，Internet Explorer 11 及以下浏览器中的<fieldset>元素并不完全支持disabled属性。因此，建议在这些浏览器上通过 JavaScript 代码来禁用<fieldset>。

3、只读状态

为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。如：

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

效果如图 2‑64所示：

只读状态

图2-64 只读状态

4、校验状态

Bootstrap 为表单控件提供了 3 个校验状态，分别是 error（错误）、warning（警告）、success（成功），并为它们分别提供了 .has-warning、.has-error、.has-success 类，每个类定义了不同的边框颜色和文本颜色，通过这些颜色来指示不同的状态。

使用时，只需为这些控件的父元素添加相应的类，包含其中的任何 .control-label、.form-control、.help-block子元素，都将接受这些校验状态的样式。如：


 
  1. <div class="form-group has-success">
  2.   <label class="control-label" for="inputSuccess1">Input with success</label>
  3.   <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  4.   <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
  5. </div>
  6. <div class="form-group has-warning">
  7.   <label class="control-label" for="inputWarning1">Input with warning</label>
  8.   <input type="text" class="form-control" id="inputWarning1">
  9. </div>
  10. <div class="form-group has-error">
  11.   <label class="control-label" for="inputError1">Input with error</label>
  12.   <input type="text" class="form-control" id="inputError1">
  13. </div>
  14. <div class="has-success">
  15.   <div class="checkbox">
  16.     <label>
  17.       <input type="checkbox" id="checkboxSuccess" value="option1">
  18.       Checkbox with success
  19.     </label>
  20.   </div>
  21. </div>
  22. <div class="has-warning">
  23.   <div class="checkbox">
  24.     <label>
  25.       <input type="checkbox" id="checkboxWarning" value="option1">
  26.       Checkbox with warning
  27.     </label>
  28.   </div>
  29. </div>
  30. <div class="has-error">
  31.   <div class="checkbox">
  32.     <label>
  33.       <input type="checkbox" id="checkboxError" value="option1">
  34.       Checkbox with error
  35.     </label>
  36.   </div>
  37. </div>

效果如图 2‑65所示：

校验状态

图2-65 校验状态

说明：

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户，如屏幕阅读器、或者色盲用户。

为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。如，你可以在表单控件的 <label> 标签上以文本的形式显示提示信息；或者包含一个 Glyphicon 字体图标 （还有赋予 .sr-only 类的文本信息）；或者提供一个额外的辅助信息块。另外，对于使用辅助设备的用户，还可以为无效的表单控件赋予一个 aria-invalid="true" 属性。

有时候，我们需要针对校验状态，为输入框提供状态所对应的小图标，以便能够直观地显示。此时，你需要为 .form-group 容器设置 .has-feedback 类，还要通过 <span> 元素添加状态所对应的图标，并为 <span> 元素设置 .form-control-feedback 类，以便图标等正确对齐。如：


 
  1. <div class="form-group has-success has-feedback">
  2.   <label class="control-label" for="inputSuccess2">Input with success</label>
  3.   <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  4.   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  5.   <span id="inputSuccess2Status" class="sr-only">(success)</span>
  6. </div>
  7. <div class="form-group has-warning has-feedback">
  8.   <label class="control-label" for="inputWarning2">Input with warning</label>
  9.   <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  10.   <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  11.   <span id="inputWarning2Status" class="sr-only">(warning)</span>
  12. </div>
  13. <div class="form-group has-error has-feedback">
  14.   <label class="control-label" for="inputError2">Input with error</label>
  15.   <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  16.   <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  17.   <span id="inputError2Status" class="sr-only">(error)</span>
  18. </div>
  19. <div class="form-group has-success has-feedback">
  20.   <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  21.   <div class="input-group">
  22.     <span class="input-group-addon">@</span>
  23.     <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  24.   </div>
  25.   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  26.   <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
  27. </div>

效果如图 2‑66所示：

校验状态添加图标

图2-66 校验状态添加图标

说明：

反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。

对于不带有label标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加label标签。如果你不希望将label标签展示出来，可以通过添加.sr-only类来实现。如果的确不能添加label标签，请调整图标的top值。对于输入框组，请根据你的实际情况调整right值。

为了确保为辅助技术正确传达一个图标的含义，额外的隐藏的文本应包含在.sr-only类中，并明确关联使用了aria-describedby的表单控件。或者，以某些其他形式（如，文本输入字段有一个特定的警告信息）传达含义，如改变与表单控件实际相关联的<label>的文本。

如果你使用.sr-only类来隐藏表单控件的<label>（而不是使用其它标签选项，如aria-label属性）， 一旦它被添加，Bootstrap 会自动调整图标的位置。如：


 
  1. <div class="form-group has-success has-feedback">
  2.   <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  3.   <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  4.   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  5.   <span id="inputSuccess5Status" class="sr-only">(success)</span>
  6. </div>
  7. <div class="form-group has-success has-feedback">
  8.   <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  9.   <div class="input-group">
  10.     <span class="input-group-addon">@</span>
  11.     <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  12.   </div>
  13.   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  14.   <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
  15. </div>

效果如图 2‑67所示：

校验状态添加图标

图2-67 校验状态添加图标

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

标签：控件,success,状态,表单,输入框,图标,Bootstrap3
来源： https://blog.csdn.net/ixygj197875/article/details/89924208