# 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>

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


3. 建立 button type="sumbit"

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


- 當我們 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** 的優化


### 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 時，會發現上面的網址也出現了一樣的文字

---
### 所以 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>

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


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