---
# System prepended metadata

title: HTML 7. 進階表格製作 - Form 表單的製作(1)
tags: [2022 網頁開發全攻略教程]

---

# HTML 7. 進階表格製作 - Form 表單的製作(1)

### form 表單稍微複雜了些，它還需要跟後端(database)連結

- database / 中文又稱:**數據庫**

### 前端介面與數據庫互動的範例：

- 情境: 使用者填完訂單之後，sumbit form，此時數據庫接收到及回傳：
  訂單成立 or 訂單不成立
  
### form 表單及標籤(tags)們:

- `action` - 即資料的目的地
- 資料進去 `action` 的方式有兩種: 
1. `get `
2. `post`



---

### 開始撰寫一個表單:

1. 建立 form: 
   屬性要有 action & method

```
<form action="" method=""></form>
```

2. 建立一個 label & input:

```
    <form action="" method="">
      <label for="">姓名:</label>
      <input type="text" name="" />
    </form>
```

- 顯示如下，會產生一個姓名及輸入欄位:

![](https://i.imgur.com/euYnlsH.png)

3. 建立 button type="sumbit"

```
    <form action="" method="">
      <label for="">姓名:</label>
      <input type="text" name="" />
      <button type="submit">提交表單</button>
    </form>
```

![](https://i.imgur.com/xaVJ9pK.png)

- 當我們 sumbit 按下去之後，就會將上述的 form 資料給傳送出去。
  而初次製作時，會發現說: 好像啥事都沒發生欸？
  
- 沒錯，那是因為我們的 action 是空的，所以什麼事情都不會發生!

- 由於 action 是跟後端做連結，目前我們就是暫時不管。

### method 的預設值: 

```
    //預設為 get，而我們也可以改成: post
    <form action="" method="get">

    </form>
```

### label for 屬性，可對應 input id 做優化搭配:

// label for ="myname"
// input id ="myname"
```
    <form action="" method="post">        
      <label for="myname">姓名:</label>
      <input id="myname" type="text" name="" />
      <button type="submit">提交表單</button>
    </form>
```

- 當我們點擊 label - 姓名時，會發現輸入匡自動反藍了:

  這就是，**label for** + **input id** 的優化

![](https://i.imgur.com/aWZUWWo.png)


### input 按鈕裡面最重要的屬性: name=""

```
    <form action="" method="get">
      <label for="myname">姓名:</label>
      <input id="myname" type="text" name="inputName" />
      <button type="submit">提交表單</button>
    </form>
```

- 沒有輸入此屬性，表單按下 sumbit 也不會將資料傳送出去
- 這邊要注意，使用此測試之前，請將 `post` 改回預設: `get`

- 當我們輸入: yutsai chen 時，會發現上面的網址也出現了一樣的文字
![](https://i.imgur.com/k0lQNgR.png)


---
### 所以 input 屬性的 name 很重要 很重要 很重要

### 因為很重要: 所以說3次 懂？

- 再新增一組 label + input 來製作電話輸入的表格:

```
    <form action="" method="get">
      <label for="myname">姓名:</label>
      <input id="myname" type="text" name="inputName" />
      <label for="tele">電話:</label>
      <input id="tele" type="text" name="telephone" />
      <button type="submit">提交表單</button>
    </form>
```

- 一樣，可以透過自己來輸入看看，來確認最後顯示的結果:

![](https://i.imgur.com/MihL4Dz.png)

###### tags: `2022 網頁開發全攻略教程`