:::

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,不做對操作或版面均無影響。

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D703

計數器

今天: 370370370
昨天: 3438343834383438
總計: 7390699739069973906997390699739069973906997390699