Bootstrap CSS布局之表单

1. 表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)

表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend

1.1.基础表单

<!--基础表单：1.向父 <form> 元素添加 role="form"。2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--><form role="form"> <fieldset>  <legend>用户登录</legend>  <div class="form-group">   <label for="name">姓名</label>   <input type="text" class="form-control" id="name" placeholder="请输入名称">  </div>  <div class="form-group">   <label for="psd">密码</label>   <input type="text" class="form-control" id="psd" placeholder="请输入密码">  </div>  <div class="checkbox">   <label><input type="checkbox">记住密码</label>  </div>  <button type="submit" class="btn btn-default">登录</button> </fieldset></form>

1.2.内联表单

<!-- 内联表单：  如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline --> <form role="form" class="form-inline">  <fieldset>   <legend>用户登录</legend>   <div class="form-group">    <label for="name">姓名</label>    <input type="text" class="form-control" id="name" placeholder="请输入名称">   </div>   <div class="form-group">    <label for="psd">密码</label>    <input type="text" class="form-control" id="psd" placeholder="请输入密码">   </div>   <div class="checkbox">    <label><input type="checkbox">记住密码</label>   </div>   <button type="submit" class="btn btn-default">登录</button>  </fieldset> </form>

1.3.横向表单

<!-- 横向表单：  1.向父 <form> 元素添加 class .form-horizontal。  2.把标签和控件放在一个带有 class .form-group 的 <div> 中。  3.向标签添加 class .control-label。  4.要实现横向表单，还要用栅格类--> <form role="form" class="form-horizontal">  <fieldset>   <legend>用户登录</legend>   <div class="form-group">    <label class="control-label col-lg-1" for="name">姓名</label>    <div class="col-lg-10">     <input type="text" class="form-control" id="name" placeholder="请输入名称">    </div>   </div>   <div class="form-group">    <label class="control-label col-lg-1" for="psd">密码</label>    <div class="col-lg-10">     <input type="text" class="form-control" id="psd" placeholder="请输入密码">    </div>   </div>  </fieldset> </form>