XOOPS輕鬆架 - 線上書籍

:::

PHP7 入門研習
=========

### 一、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%2Fmarkdown.php%3Ftbdsn%3D703

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器