控件的状态
在表单的使用过程中，每个控件可能都会有很多状态，通过表单控件的状态，可以给用户或访问者提供一些有用的反馈。
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>中包含的所有控件。如：
<form><fieldsetdisabled><divclass="form-group"><labelfor="disabledTextInput">Disabled input</label><inputtype="text"id="disabledTextInput"class="form-control"></div><divclass="form-group"><labelfor="disabledSelect">Disabled select menu</label><selectid="disabledSelect"class="form-control"><option>Disabled select</option></select></div><divclass="checkbox"><label><inputtype="checkbox">Can't check this</label></div><buttontype="submit"class="btn btn-primary">Submit</button></fieldset></form>
效果图 2‑63所示：
图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子元素，都将接受这些校验状态的样式。如：
<divclass="form-group has-success"><labelclass="control-label"for="inputSuccess1">Input with success</label><inputtype="text"class="form-control"id="inputSuccess1"aria-describedby="helpBlock2"><spanid="helpBlock2"class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><divclass="form-group has-warning"><labelclass="control-label"for="inputWarning1">Input with warning</label><inputtype="text"class="form-control"id="inputWarning1"></div><divclass="form-group has-error"><labelclass="control-label"for="inputError1">Input with error</label><inputtype="text"class="form-control"id="inputError1"></div><divclass="has-success"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxSuccess"value="option1">Checkbox with success</label></div></div><divclass="has-warning"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxWarning"value="option1">Checkbox with warning</label></div></div><divclass="has-error"><divclass="checkbox"><label><inputtype="checkbox"id="checkboxError"value="option1">Checkbox with error</label></div></div>
效果如图 2‑65所示：
图2-65 校验状态
说明：
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户，如屏幕阅读器、或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。如，你可以在表单控件的 <label> 标签上以文本的形式显示提示信息；或者包含一个 Glyphicon 字体图标 （还有赋予 .sr-only 类的文本信息）；或者提供一个额外的辅助信息块。另外，对于使用辅助设备的用户，还可以为无效的表单控件赋予一个 aria-invalid="true" 属性。
有时候，我们需要针对校验状态，为输入框提供状态所对应的小图标，以便能够直观地显示。此时，你需要为 .form-group 容器设置 .has-feedback 类，还要通过 <span> 元素添加状态所对应的图标，并为 <span> 元素设置 .form-control-feedback 类，以便图标等正确对齐。如：
<divclass="form-group has-success has-feedback"><labelclass="control-label"for="inputSuccess2">Input with success</label><inputtype="text"class="form-control"id="inputSuccess2"aria-describedby="inputSuccess2Status"><spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span><spanid="inputSuccess2Status"class="sr-only">(success)</span></div><divclass="form-group has-warning has-feedback"><labelclass="control-label"for="inputWarning2">Input with warning</label><inputtype="text"class="form-control"id="inputWarning2"aria-describedby="inputWarning2Status"><spanclass="glyphicon glyphicon-warning-sign form-control-feedback"aria-hidden="true"></span><spanid="inputWarning2Status"class="sr-only">(warning)</span></div><divclass="form-group has-error has-feedback"><labelclass="control-label"for="inputError2">Input with error</label><inputtype="text"class="form-control"id="inputError2"aria-describedby="inputError2Status"><spanclass="glyphicon glyphicon-remove form-control-feedback"aria-hidden="true"></span><spanid="inputError2Status"class="sr-only">(error)</span></div><divclass="form-group has-success has-feedback"><labelclass="control-label"for="inputGroupSuccess1">Input group with success</label><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"id="inputGroupSuccess1"aria-describedby="inputGroupSuccess1Status"></div><spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span><spanid="inputGroupSuccess1Status"class="sr-only">(success)</span></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 会自动调整图标的位置。如：
<divclass="form-group has-success has-feedback"><labelclass="control-label sr-only"for="inputSuccess5">Hidden label</label><inputtype="text"class="form-control"id="inputSuccess5"aria-describedby="inputSuccess5Status"><spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span><spanid="inputSuccess5Status"class="sr-only">(success)</span></div><divclass="form-group has-success has-feedback"><labelclass="control-label sr-only"for="inputGroupSuccess4">Input group with success</label><divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"id="inputGroupSuccess4"aria-describedby="inputGroupSuccess4Status"></div><spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span><spanid="inputGroupSuccess4Status"class="sr-only">(success)</span></div>
效果如图 2‑67所示：
图2-67 校验状态添加图标
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
