4-3 登入表單

一、Bootstrap3 表單

1. 利用 <form> 語法來產生編輯表單

   <form class="form-horizontal" action="送至.php" method="post" role="form">
   表單元件
   </form>
   

2. action是指定表單要送去哪個php檔做處理（接收變數）
3. method 則選擇是要用post或get（預設）方式來傳遞變數
4. BootStrap 的表單請參考：http://v3.bootcss.com/css/#forms
5. 水平表單欄位的每一組 Bootstrap3 架構如下：

   <div class="form-group">
     <label class="col-md-3 control-label">標籤文字</label>
     <div class="col-md-9">
       表單元件（套用 class="form-control"）
     </div>
   </div>
   

6. 其中欄位寬度請視需求調整

二、登入表單設計

1. 在表單中加入「表單欄位」：

   <form class="form-horizontal" action="index.php" method="post" role="form">
     <div class="form-group">
       <label class="col-md-4 control-label" for="name">帳號：</label>
       <div class="col-md-8">
         <input type="text" name="name" id="name" placeholder="請輸入帳號" class="form-control">
       </div>
     </div>
     <div class="form-group">
       <label class="col-md-4 control-label" for="passwd">密碼：</label>
       <div class="col-md-8">
         <input type="password" name="passwd" id="passwd" placeholder="請輸入密碼" class="form-control">
       </div>
     </div>
     <div class="text-center">
       <input type="hidden" name="op" value="login">
       <button type="submit" name="button" class="btn btn-primary">登入</button>
     </div>
   </form>

2. 表單action指定到index.php，method使用post方法。
3. 表單中一共有三個欄位：
   • name="name" 的文字（text）輸入框，送出後 index.php 會收到 $_POST['name'] 變數
   • name="passwd" 的密碼（password）輸入框 ，送出後 index.php 會收到 $_POST ['passwd '] 變數
   • name="op" 的隱藏（hidden）輸入框 ，送出後 index.php 會收到 $_POST ['op '] 變數
4. op用來告訴程式下一個動作該做什麼（並不是規定的用法，只是一種技巧）。
5. placeholder 是佔位字元，會有提示文字出現。
6. 欄位套用 form-control 樣式，會顯得滿版圓潤。
7. 欄位命名id，然後標籤用for來指定對應id，這只是為了符合無障礙2.0，不做對操作或版面均無影響。