在写表单的时候经常会用到"<form>"但是却很少有人关注边框的问题.<fieldset>
范例:定义边框
<form>
<fieldset>
<legend>信息显示表单</legend>
<ul>
<li>百度一下</li>
<li>搜购一下</li>
<li>谷歌一下</li>
</ul>
</fieldset>
</form> 效果
范例:定义表单
<body>
<div class="container">
<form action="" method="post">
<fieldset id="">
<legend>用户登录</legend>
<div class="form-group">
<label>用户名:</label>
<input type="text" placeholder="请输入注册用户名" class="form-control"/>
</div>
<div class="form-group">
<label>密 码:</label>
<input type="password" placeholder="请输入注册密码" class="form-control"/>
</div>
<button type="submit">登录</button>
<button type="reset">重置</button>
</fieldset>
</form>
</div>
</body><body>
<div class="container">
<form action="" method="post" class="form-horizontal">
<fieldset id="">
<legend>用户登录</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uid">用户名:</label>
<div class="col-md-5">
<input type="text" placeholder="请输入注册用户名" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="pwd">密 码:</label>
<div class="col-md-5">
<input type="password" id="pwd" placeholder="请输入注册密码" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-danger">登录</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</div>
</fieldset>
</form>
</div>
</body>效果图
表单里面一定有许多的表单控件,所以在Bootstrap里面也针对于表单控件进行各种样式的支持
<body>
<div class="container">
<form action="" method="post" class="form-horizontal">
<fieldset id="">
<legend>新闻评论</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uid">标题:</label>
<div class="col-md-5">
<input type="text" placeholder="请输入注册用户名" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="pwd">内容:</label>
<div class="col-md-5">
<textarea class="form-control" cols="30" rows="3" style="resize:none"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-danger">留言</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</div>
</fieldset>
</form>
</div>
</body> 
范例:实现下拉列表
<div class="container">
<form action="" method="post" class="form-horizontal">
<fieldset id="">
<legend>用户地址</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="province">省份:</label>
<div class="col-md-3">
<select name="province" id="province" class="form-control">
<option value="001">河南省</option>
<option value="003">北京</option>
<option value="002">广州</option>
</select>
</div>
<label class="col-lg-2 control-label" for="crity">城市</label>
<div class="col-md-3">
<select name="crity" id="crity" class="form-control">
<option value="001">洛阳</option>
<option value="003">北京</option>
<option value="002">广州</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-2">
<button type="submit" class="btn btn-danger">留言</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</div>
</fieldset>
</form>
</div>
单选框和复选框在定义的时候必须在组建上外加一个层元素,在这个层元素里面设置使用的样式.