---
tags: 前端開發
---

# 表單設計
## <i class="fa fa-list" aria-hidden="true"></i> 目錄
[TOC]

---
## <i class="fa fa-bookmark" aria-hidden="true"></i> HTML Form 語法

<form action="資料傳送目的地" method="資料傳遞方式">
表單內容與表單元素
</form>

>標準的 HTML 表單是由 `<form>` 標籤開始，結尾使用 `</form>` 標籤。
>兩個標籤之間就是放置表單元素的地方，form 會將填完的資料，傳送至 action 所設定的資料傳送目的地，例如傳給一個 PHP 頁面，進行資料的接收，method 是資料傳遞的方式，有 get 與 post 兩種方式。

### <i class="fa fa-tag" aria-hidden="true"></i>`<form>` 標籤

可以在 `<form>` 標籤中設定以下的屬性(筆記僅列出幾項)：

| 屬性 | 描述 |
|:------ |:----------- |
| name | string 指定表單的名稱。客戶端程式（如 JavaScript）或伺服端程式（如 ASP 或 PHP）可以<font color="#d80505">用這個名稱來存取表單的內容</font>，因此，<font color="#d80505">應該用這一個屬性替每一個表單取名，以便利撰寫處理表單的程式</font>。 |
| action | url 指定表單處理程式的 url。若不指定，則表單不會被處理。 |
| method | get，post 指定何種送出表單資料的 HTTP 方式。可能值為 get（預設值）或 post。（參見底下的說明） |
| target | 用來指定瀏覽器要在何處顯示表單送出後伺服器回應的結果。值可以[參考](https://www.w3school.com.cn/tags/att_form_target.asp) |

>Post 和 Get 傳送方式：
>表單資料可以用 `<form>` 元件的 method 屬性來指定 post 或 get 傳回方式。
>* Post：把資料用符合 HTTP 通訊協定的格式，以封包的形式傳回 WWW 伺服器。這種方式適合傳送資料量比較大的表單（譬如超過 1K bytes）。
>* Get：則是把表單資料附加在 action 屬性指定的 URL 後面，傳回 WWW 伺服器。
>由於 URL 的字元長度有限（通常不得超過 1K bytes），所以 Get 方式適合資料量少的表單。除了資料量的差異外，<font color="#d80505">用在安全性方面，Post 方式比 Get 方式來得好用</font>。
---

## <i class="fa fa-bookmark" aria-hidden="true"></i> HTML Form 表單範例

<form action="get.php" method="get">
    <label for="Name">姓名：</label>
    <input id="Name" type="text">
    <input type="submit" value="送出表單">
</form>

* 在`<form> </form>` 標籤之中可以包含表單元素，上面使用了三個
* 標籤（<label for=""></label>）
* 文字輸入欄位（<input type='text'>）
* 送出表單的按鈕（submit）

* `<label>` 和 `<input>` 的搭配共有兩種寫法：

* 寫法一：

    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">

* 寫法二：

    <label for="name">
      姓名: <input type="text" id="name" name="name">
    </label>

:::warning
:bulb: 使用者體驗優化：
<input> 設定id，並且在 <label> 標籤設定 for 指向 id
點擊姓名的時候會自動聚焦在<input>欄位
:::

---
## <i class="fa fa-bookmark" aria-hidden="true"></i> 常見表單元素

### <i class="fa fa-tag" aria-hidden="true"></i>`<input>`元素：輸入欄位
| 類型 | 語法 |
|:----------- |:----------- |
| 文字： type="text" | <input type="text" name="" value=""> |
| 電話： type="tel" | <input type="tel" name="" value=""> |
| email： type="email" | <input type="email" name="" value=""> |
| 密碼： type="password" | <input type="password" name="" value=""> |
| 選項按鈕： type="radio" | <input type="radio" name="" value=""> |
| 核取方塊： type="checkbox" | <input type="checkbox " name="" value=""> |
| 送出表單按鈕： type="submit" | <input type="submit" name="" value="送出表單"> |
| 顯示表單按鈕： type="button" | <input type="button" name=""> |
| 隱藏欄位： type="hidden" | <input type="hidden" name="" value=""> |

><input> 的大部分 type 都可以再搭配上 value 屬性，指定一個預設值。
像是 type="text" 搭配 value= 指定輸入框中的預填文字；
type="submit" 搭配 value= 指定按鈕文字。

### <i class="fa fa-tag" aria-hidden="true"></i>`<select>`, `<option>`元素：下拉式選單
| 類型 | 語法 |
|:----------- |:----------- |
| select, option | <select name=""><option value=""></option></select> |

> `<select>` 是用來宣告一個下拉式選單，而 `<select>` 標籤裡面還會有 `<option>` 標籤用來宣告有哪些選項。
> `<select>` 預設會把裡面 `<option>` 的value值帶過去

### <i class="fa fa-tag" aria-hidden="true"></i>`<textarea>`元素：多行段落文字輸入欄位
| 類型 | 語法 |
|:----------- |:----------- |
| textarea | <textarea name=""></textarea> |
>用來宣告一個可以輸入多行文字的輸入框

<textarea rows="指定輸入框的高度/列數，一個整數"
          cols="指定輸入框的寬度/行數，一個整數">
  輸入欄位中的預設文字內容
</textarea>

:::warning
:bulb: 原生 input 因為在 mobile 的侷限所以改不動 select、checkbox、radio的樣式
如果自己有遇到，可以建議設計師不要改動原生的樣式。

PS：公司前輩使用的解決辦法就是校長說的利用假的div表單，把真的表單隱藏。(當然，設計師不知道這件事XD)
:::

:::info
更多元素可以參考：
* [w3schools](https://www.w3schools.com/html/html_forms.asp)
* [讓人驚艷的表單設計 Google](https://developers.google.com/web/fundamentals/design-and-ux/input/forms)
:::

---
## <i class="fa fa-bookmark" aria-hidden="true"></i> 常見的 HTML 表單元素屬性 (attributes)

### <i class="fa fa-tag" aria-hidden="true"></i> name - 聲明欄位名稱
表單元素都有一個 name 屬性，用來指定送出去的該筆資料要用什麼名稱，目的是讓遠端伺服器才能透過明確定義好的名稱去取出對應的欄位值。用法：

<input type="text" name="foo">

### <i class="fa fa-tag" aria-hidden="true"></i> value - 設定表單元素的初始值
value 用來指定表單元素的初始值 (default value)。用法：

<input type="text" value="我的預設值">

### <i class="fa fa-tag" aria-hidden="true"></i> placeholder - 輸入字段的提示
幫助用戶填寫輸入字段的提示，輸入欄位後會消失。用法：

<input type="tel" name="tel" placeholder="請輸入電話">

### <i class="fa fa-tag" aria-hidden="true"></i> disabled - 禁用該元素
disabled 是一個布林 (boolean) 屬性，用來禁用該表單元素。用法：

<input type="button" value="按鈕" disabled>

### <i class="fa fa-tag" aria-hidden="true"></i> readonly - 將元件設為唯獨
不可更改內容的狀態，但是可以focus、拷貝內容行為

<input type="text" name="country" value="" readonly="readonly">

:::info
更多屬性可以參考：
* [w3schools](https://www.w3schools.com/html/html_form_attributes.asp)
* [w3school(簡中) ](https://www.w3school.com.cn/tags/tag_input.asp)
:::

---
## <i class="fa fa-bookmark" aria-hidden="true"></i> 補充

`<input type="submit">` 和 `<input type="button">`的差別?
* `<input type="submit">` 預設網頁事件會把整個表單送出
* `<input type="button">` 要自己另外寫 click 事件

---
## <i class="fa fa-bookmark" aria-hidden="true"></i> 參考資料來源
> 1. https://www.w3schools.com/html/html_forms.asp
> 2. https://www.webtech.tw/info.php?tid=89
> 3. https://www.fooish.com/html/form.html