# DAY14 - 表單的組成: Form、輸入欄位、Submit

### 表單的寫法:

- fomr emmet 展開後會出現下列格式:

// 1. action 代表你要傳送這份表單資訊至「哪一個檔案」路徑。
   2. 由於目前學習進度只有前端，我們先假設會存到 index.html吧

<form action="index.html">
  
</form>

### 常見的表格內容 - 文字輸入欄位 text:

- 欄位就是這玩意兒:


<input type="text" />

- 輸入文字欄位，也需要給他一個欄位名稱(資料庫用):

// 假設本範例是輸入 email 那就打 email

<input type="text" name="email" />

### 想要將整份表單傳送出去的關鍵 - sumbit 按鈕:

- form 代表了整份的表單內容，那要靠誰來 send 出內容呢?
關鍵在於 **sumbit**


    <form action="index.html">
      <input type="text" name="email" />
      <input type="submit" value="送出內容" />
    </form>

---

- 由樣式不難理解，value 代表這顆按鈕呈現的文字樣式
我們先簡單輸入一個 email 來測試吧:

---

#### 未送出的網址狀態:


#### 按下送出之後的網址狀態:


- 由範例內容可看出，email 文字欄位輸入的資訊
被正確的傳送的命名為: email 的欄位裡頭，透過 **submit**。

### 結語:

1. 要製作表單需要 `form` 標籤

2. 輸入需要的欄位- `input:text`，切記要有 name 欄位來存取

3. 最後加上整份 form 欄位需要傳送的按鈕 - `input:sumbit`

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-table 篇`