Bootstrap响应式前端框架笔记四——表单（二）

三、表单状态

   为表单元素添加disabled属性来将表单设置为禁用状态，示例如下：

 <p>禁用表单</p>

 <input class="form-control" placeholder="被禁用的输入框" type="text" disabled/>

 <div  class="checkbox">

 <label>

  <input type="checkbox" disabled/>被禁用的复选框

 </label>

 </div>

效果如下：

   如果在开发中需要使一组的表单元素全部处于禁用状态，可以使用fieldset标签进行包裹，并为fieldset标签添加disabled属性。示例如下：

 <p>进行一组表单元素的禁用</p>

 <form>

  <fieldset disabled>

   <div class="form-group">

    <label for="disabledTextInput">被禁用的输入框</label>

    <input type="text" id="disabledTextInput" class="form-control" placeholder="被禁用的输入框">

   </div>

    <label for="disabledSelect">被禁用的下拉菜单</label>

    <select id="disabledSelect" class="form-control">

     <option>被禁用的下拉菜单</option>

    </select>

   <div class="checkbox">

    <label>

       <input type="checkbox"> 被禁用的选择框

     </label>

   <button type="submit" class="btn btn-primary">被禁用的按钮</button>

  </fieldset>

 </form>

Bootstrap中也定义好了一些校验状态的样式，例如警告，成功，错误等状态，为表单元素的父标签添加这些状态类即可，示例如下：

 <p>校验状态</p>

  <div class="has-error form-group">

   <input class="form-control" placeholder="错误状态的表单" type="text" />

  </div>

  <div class="has-success form-group">

   <input class="form-control" placeholder="成功状态的表单" type="text" />

  <div class="has-warning form-group">

   <input class="form-control" placeholder="警告状态的表单" type="text" />

开发者也可以为验证表单的右侧添加一个小图标，前提需要为表单元素的父元素设置has-feedback类，示例如下：

 <p>为表单添加右侧icon</p>

  <div class="form-group has-error has-feedback ">

   <span class="glyphicon glyphicon-eur form-control-feedback"></span>

  <div class="has-success form-group has-feedback">

   <span class="glyphicon glyphicon-ok form-control-feedback"></span>

  <div class="has-warning form-group has-feedback">

   <span class="glyphicon glyphicon-off form-control-feedback"></span>

  另外，本篇博客中所有的实例代码及显示效果，在如下地址中，需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/form.html

。