bootstrap的表单form

 (1)默认表单

      <form>

       <div class="form-group">

         <label class="control-label" for=""></label>

         <input class="form-control">

         <span class="help-block"></span>

       </div>

      </form>

 <h1>默认表单</h1>
    <form action="#">
        <div class="form-group">
            <label for="uname" class="control-label">用户名</label>
            <input type="text" id="uname" class="form-control">
            <span class="help-block">字母下划线3-8位</span>
        </div>
        <div class="form-group">
            <label for="upwd" class="control-label">密码</label>
            <input type="password" id="upwd" class="form-control">
            <span class="help-block">密码为6-8位</span>
        </div>
        <div class="form-group">
            <div class="checkbox">
            <label><input type="checkbox">七天免密登陆</label>
            </div>
        </div>
        <div class="form-group">
            <input type="button" id="login" value="登录" class="btn btn-success">
            <input type="button" id="logout" value="取消" class="btn btn-danger">
        </div>
    </form>

    (2)行内表单

      <form class="form-inline">

       <div class="form-group">

         <label class="sr-only"></label>

         <input class="form-control">

       </div>

      </form>

 <h1>行内表单</h1>
    <h3> Screen Reader Only sr-only</h3>
    <form action="#" class="form-inline">
        <div class="form-group">
            <label for="uname1" class="sr-only"> 用户名</label>
            <input class="form-control" type="text" placeholder="请输入用户名" id="uname1">
        </div>
        <div class="form-group">
            <lable for="upwd1" class="sr-only">密码</lable>
            <input class="form-control" type="password" placeholder="请输入密码" id="upwd1">
        </div>
        <div class="form-group"><input type="button" value="登陆" class="btn btn-success"></div>
    </form>

(3)水平表单

     水平表单=表单+栅格系统(变种)

 <form class=" form-horizontal ">

       <div class="form-group">

         <div class="col-*-*">

           <label class="sr-only"></label>

         </div>

         <div class="col-*-*">

           <input class="form-control">

         </div>

      </div>

    </form>

 <h1>形式3：水平表单</h1>
    <p>水平表单=表单+栅格系统</p>
    <form action="#" class="form-horizontal"> <!--等价于div.container-->
        <div class="form-group"><!--div.row-->
            <div class="col-sm-1"><label for="uname3" class="control-label">用户名</label></div>
            <div class="col-sm-3"> <input type="text" class="form-control" id="uname3"></div>
            <div class="col-sm-5"> <span class="help-block">字母数字，，，，，</span></div>
        </div>
        <div class="form-group"><!--div.row-->
            <div class="col-sm-1"><label for="upwd2" class="control-label">密码</label></div>
            <div class="col-sm-3"> <input type="text" class="form-control" id="upwd2"></div>
            <div class="col-sm-5"> <span class="help-block">密码位数，，，，，</span></div>
        </div>
        <div class="form-group"><!--div.row-->
            <div class="col-sm-1"> <input type="button" class="btn btn-success" value="登陆"></div>
            <div class="col-sm-1"> <input type="button" class="btn btn-danger" value="取消"></div>
        </div>