# 2.28 表單

提供許多欄位，讓使用者填入後，送出資料。

## 基本結構

```markup
<form action="#" method="#">
  ...
</form>
```

**action**：值是一個網址，代表要將使用者填入的資料，送至此網址。

**method**：送資料至 action 所指定的網址，傳送的方式基本上有 **get** 或 **post** 兩種方式。若是 get 的話，表示資料會呈現於網址當中，post 則不會出現在網址當中，相對較安全。

如果表單有要傳送檔案，需增加 enctype 屬性及其值：

```markup
<form action="#" method="#" enctype="multipart/form-data">
  ...
</form>
```

註：以上的屬性，會跟後端程式比較有關，目前可先初步認識即可。

## 表單相關欄位

### 文字框：一般文字

* input 標籤不需要結束標籤。

```markup
<input type="text" value="這是預設內容" placeholder="這是提示文字">
```

另可以使用 `<label for="指定id"></label>` 標籤，對應到欄位的 `id`進行點擊的優化：

{% embed url="<https://codepen.io/carlos411/pen/ymoKJj>" %}

### 文字框：密碼

```markup
<input type="password" placeholder="請輸入密碼">
```

{% embed url="<https://codepen.io/carlos411/pen/pMrLeV>" %}

### 文字框：隱藏

```markup
<input type="hidden" value="123">
```

實際上還是存在，只是使用者看不到，而且該元素也不會佔位。

{% embed url="<https://codepen.io/carlos411/pen/mNMxBr>" %}

### 多行文字框

```markup
<textarea placeholder="提示文字">這裡是文字</textarea>
```

{% embed url="<https://codepen.io/carlos411/pen/XvaEVG>" %}

### 單選

基本結構，通常會搭配 `<label></label>` 標籤一起使用。`checked` 是表示預設要選取。例：

```markup
<input type="radio" value="1" checked>
<label>選項一</label>
```

{% embed url="<https://codepen.io/carlos411/pen/rNBwpMJ>" %}

多個選項時，若要創造單選的介面，則 **name** 要設定成一樣，才會被視為單選．例：

```markup
<input type="radio" name="custom_name" value="1" checked> 是
<input type="radio" name="custom_name" value="2"> 否
```

註：若有加上 `<label>...</label>` 標籤，有助於使用者的操作方便。

方式一：for 的值，對應到 id 的值。

```markup
<input type="radio" name="food_type_2" id="option1" checked>
<label for="option1">選項一</label>
```

方式二：`<input>` 放在 `<label>…</label>` 裡面。

```markup
<label>
  <input type="radio" name="food_type_3" checked>
  選項一
</label>
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/pMraOw>" %}

### 勾選(核取方塊)

基本結構，通常會搭配 `<label></label>` 標籤一起使用。`checked` 是表示預設要選取。例：

```markup
<input type="checkbox" value="1" checked>
<label>興趣1</label>
```

{% embed url="<https://codepen.io/carlos411/pen/rNBwENV>" %}

註：同 單選(radio)相同，若有加上 `<label>...</label>` 標籤，有助於使用者的操作方便。

方式一：for 的值，對應到 id 的值。

```markup
<input type="checkbox" name="food_type_2" id="option1" checked>
<label for="option1">選項一</label>
```

方式二：`<input>` 放在 `<label>…</label>` 裡面。

```markup
<label>
  <input type="checkbox" name="food_type_3" checked>
  選項一
</label>
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/gVxeeW>" %}

### 下拉選單

基本選單：

```markup
<select name="country">
  <option value="1" selected>選項1</option>
  <option value="2">選項2</option>
  <option value="3">選項3</option>
</select>
```

`selected`：表示預設為這項。

分群選單，使用 `<optgroup>...</optgroup>` 包起來：

```markup
<select name="food">
  <optgroup label="第一組">
    <option value="1">選項一</option>
    <option value="2">選項二</option>
  </optgroup>
  <optgroup label="第二組">
    <option value="3">選項三</option>
    <option value="4">選項四</option>
  </optgroup>
</select>
```

在 `<select>` 標籤上使用 **multiple** 屬性可以變成多選

{% embed url="<https://codepen.io/carlos411/pen/voJRzy>" %}

### 一般按鈕

使用 button 標籤，type 屬性設定為 "button"，例：

```markup
<button type="button">這是一般按鈕</button>
```

這種按鈕使用者按了並不會有任何動作，需要再撰寫 JS 去開發相關需求。

{% embed url="<https://codepen.io/carlos411/pen/dybRBYz>" %}

### 資料送出按鈕

type 設定為 "submit"：

```markup
<button type="submit">這是資料送出按鈕</button>
```

例：

{% embed url="<https://codepen.io/carlos411/pen/WNeOqrW>" %}
資料送出按鈕 submit
{% endembed %}

使用者將這個按鈕按下去之後，會將所在的 form 表單裡的所有欄位資料，送到 form 標籤的 action 網址。

### reset 按鈕

button 標籤，type 設定為 reset：

```html
<button type="reset">這是 reset 按鈕</button>
```

{% embed url="<https://codepen.io/carlos411/pen/LYXaKLE>" %}

使用者將這個 reset 按鈕按下去之後，會將所在的 form 表單裡的所有欄位資料，都清空回到預設。

### file 傳遞檔案

* form 標籤的 method 屬性一定要用 post 方式。
* form 標籤，記得加上 `enctype="multipart/form-data"`屬性。

單選語法：

```markup
<input type="file">
```

多選語法：

```markup
<input type="file" multiple>
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/QWJoXMm>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html-and-css/2.-html/2.32-biao-chan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
