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>

 1  <h1>默認表單</h1>
 2     <form action="#">
 3         <div class="form-group">
 4             <label for="uname" class="control-label">用戶名</label>
 5             <input type="text" id="uname" class="form-control">
 6             <span class="help-block">字母下劃線3-8位</span>
 7         </div>
 8         <div class="form-group">
 9             <label for="upwd" class="control-label">密碼</label>
10             <input type="password" id="upwd" class="form-control">
11             <span class="help-block">密碼爲6-8位</span>
12         </div>
13         <div class="form-group">
14             <div class="checkbox">
15             <label><input type="checkbox">七天免密登錄</label>
16             </div>
17         </div>
18         <div class="form-group">
19             <input type="button" id="login" value="登陸" class="btn btn-success">
20             <input type="button" id="logout" value="取消" class="btn btn-danger">
21         </div>
22     </form>

 

 

    (2)行內表單

      <form class="form-inline">

       <div class="form-group">

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

         <input class="form-control">

       </div>

      </form>

 1  <h1>行內表單</h1>
 2     <h3> Screen Reader Only sr-only</h3>
 3     <form action="#" class="form-inline">
 4         <div class="form-group">
 5             <label for="uname1" class="sr-only"> 用戶名</label>
 6             <input class="form-control" type="text" placeholder="請輸入用戶名" id="uname1">
 7         </div>
 8         <div class="form-group">
 9             <lable for="upwd1" class="sr-only">密碼</lable>
10             <input class="form-control" type="password" placeholder="請輸入密碼" id="upwd1">
11         </div>
12         <div class="form-group"><input type="button" value="登錄" class="btn btn-success"></div>
13     </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>

 1  <h1>形式3：水平表單</h1>
 2     <p>水平表單=表單+柵格系統</p>
 3     <form action="#" class="form-horizontal"> <!--等價於div.container-->
 4         <div class="form-group"><!--div.row-->
 5             <div class="col-sm-1"><label for="uname3" class="control-label">用戶名</label></div>
 6             <div class="col-sm-3"> <input type="text" class="form-control" id="uname3"></div>
 7             <div class="col-sm-5"> <span class="help-block">字母數字，，，，，</span></div>
 8         </div>
 9         <div class="form-group"><!--div.row-->
10             <div class="col-sm-1"><label for="upwd2" class="control-label">密碼</label></div>
11             <div class="col-sm-3"> <input type="text" class="form-control" id="upwd2"></div>
12             <div class="col-sm-5"> <span class="help-block">密碼位數，，，，，</span></div>
13         </div>
14         <div class="form-group"><!--div.row-->
15             <div class="col-sm-1"> <input type="button" class="btn btn-success" value="登錄"></div>
16             <div class="col-sm-1"> <input type="button" class="btn btn-danger" value="取消"></div>
17         </div>

View Code