其他分享
首页 > 其他分享> > 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