三、表单状态
为表单元素添加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>
<div class="form-group">
<label for="disabledSelect">被禁用的下拉菜单</label>
<select id="disabledSelect" class="form-control">
<option>被禁用的下拉菜单</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 被禁用的选择框
</label>
</div>
<button type="submit" class="btn btn-primary">被禁用的按钮</button>
</fieldset>
</form>
效果如下:
Bootstrap中也定义好了一些校验状态的样式,例如警告,成功,错误等状态,为表单元素的父标签添加这些状态类即可,示例如下:
<p>校验状态</p>
<form>
<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>
<div class="has-warning form-group">
<input class="form-control" placeholder="警告状态的表单" type="text" />
</div>
</form>
效果如下:
开发者也可以为验证表单的右侧添加一个小图标,前提需要为表单元素的父元素设置has-feedback类,示例如下:
<p>为表单添加右侧icon</p>
<form>
<div class="form-group has-error has-feedback ">
<input class="form-control" placeholder="错误状态的表单" type="text" />
<span class="glyphicon glyphicon-eur form-control-feedback"></span>
</div>
<div class="has-success form-group has-feedback">
<input class="form-control" placeholder="成功状态的表单" type="text" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="has-warning form-group has-feedback">
<input class="form-control" placeholder="警告状态的表单" type="text" />
<span class="glyphicon glyphicon-off form-control-feedback"></span>
</div>
</form>
效果如下:
另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。