Tad 教材網 - 線上書籍

:::

八小時模組開發
=======

### 一、PHP表單語法

```
<pre class="brush:xml;">
<form action="接收程式.php" method="傳送方式">
  各式表單元件
</form>
```

1. action 屬性：用來指定使用者填好的東西，要送去給哪個程式來執行。
2. method 屬性：指定傳送方法，可以是 POST（建議）或 GET（預設）
3. 如果希望表單可以上傳，必須加入 enctype="multipart/form-data"
 
### 二、最基礎的 input 表單元件

```
<pre class="brush:xml;gutter:false;">
<input type="格式" name="名稱" size="大小" value="預設值" placeholder="佔位字元">
```

1. 格式有：text（文字框）、hidden（隱藏框）、password（密碼框）、file（上傳框）、submit（送出鈕）、reset（清除鈕）
2. 其中的 name 最重要！一定要有！因為 name 送出後，會變成 PHP 的變數名稱。
3. 例如表單有個：<input type="text" name="eng">，表單送出後，方法若用 post，那麼會得到 $\_POST\['eng'\] 變數；若是用 get，那就是 $\_GET\['eng'\]
 
### 三、 其他常用的表單元件 HTML 語法及屬性

1. 用<button type=”submit”>按鈕文字</button>也可做出按鈕效果
2. 單選框：<input type="radio" name="名稱" value="值 1">選項文字 1 
  - (1) 單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
  - (2) 若要預設選取，要加上 checked="checked"
  - (3) 可以用<label for="id">選項</label>，以便點選文字就可以勾選該項目。
3. 複選框：<input type="checkbox" name="名稱\[\]" value="值 1">選項文字 1 
  - (1) 複選框通常同時會有好幾個選項，一組選項就要一組<input>
  - (2) name 都要一樣才行！而且因為是複選，所以 name 要加上\[\]，如此會送出陣列。
  - (3) 若要預設選取，要加上 checked="checked"
4. 下拉選單：<select name="名稱" size=1>選項</select> 
  - (1) 選項：<option value="值">選項文字</option> 
      - a. 一組選項，就是一組<option>
      - b. 若要預設選取：要在<option>中加入 selected="selected"
  - (2) 若希望下拉選單可以複選，除了 name 要加上\[\]外，還要加上 multiple 屬性。
5. 大量文字框：<textarea name="名稱" cols="欄寬" rows="列高">預設值</textarea>
 
### 四、套用 BootStrap 2.x 的表單效果

1. 完整表單樣式可以參考：<http://kkbruce.tw/Bootstrap/BaseCSS#forms>
2. 其中非常適合用來做搜尋的：class="input-append"，用法如下： ```
  <pre class="brush:xml;">
  <h1>簡易英漢字典</h1>
  <form action="index.php" method="post">
    <div class="input-append">
      <input type="text" name="eng" autofocus="autofocus" placeholder="請輸入英文">
      <button type="submit" class="btn">查詢</button>
    </div>
  </form>
  ```
3. 在 input 中加入autofocus="autofocus" 可使瀏覽器的預設焦點定在該輸入框上。
4. placeholder 是 HTML5 中的佔位字元，但較舊的IE可能不支援。

:::