今天我們要來介紹HTML的表單
表單在我們網頁非常常見呦~像是登入註冊、報名活動、心理測驗等等...
在網頁中表單扮演了你與使用者溝通的橋樑

▲ IT邦幫忙的登入表單 ▲

表單從Form開始!

• form的格式

< form action="傳送目的地(url)" method="傳送方法(GET/POST)">
表單內容與表單元件
• 說明文字 < label >
• 單行輸入 < input >
• 多行輸入 < textarea > < /textarea >
• 下拉選單 < select >
< /form >

HTML method 主要會用兩種傳送方法:

1. GET(默認)
   會出現在表單數據無敏感訊息
   他會以 query string 的方式傳送，表單數據會附加在網址(url)中，
   以 ？ 做為分隔符；以 & 作為 Key/Vaule 的串接符
2. POST
   表單數據有敏感訊息像登入註冊有個資的，通常就會用POST
   會將表單的資料放在 Request 中的 Form Data 中發送給 Server

一種簡單方便理解的解釋
可以想像GET就像沒信封的明信片，POST就像包了一層信封袋的信

• 說明文字 < label >

• 可以單純作為說明文字工具
  

• 也可以利用label 的 for 屬性，將 for 的 Vaule 設定為 < input > 欄位的 id
  在點擊有< label > 標籤的元件時，會自動與 < input > 的 id 相對應
  !for一定與相對應id相連!
  

• 單行輸入 < input >

會用 type="類型(文字、選擇框、按鈕)" 來指明不同的用法功能
name="資料名稱"會隨表單提交，每個輸入欄位就必須帶有 name 屬性

type的三大類:

1. text 文字類

• email: 信箱，會做基本的驗證
• password: 密碼，輸入值會被遮蓋住
• tel: 電話碼，在手機、平板這類裝置會顯示電話數字鍵盤
• url: 網址，會做驗證

2. 選擇框

同樣的 name 會一組

• checkbox: 複選框
• radio: 單選框

• color: 選擇顏色

• range: 一個範圍的數字
  value: 可預設
  min: 最小值
  max: 最大值
  step: 預設值為 1

• date: 選擇日期

• file: 選擇檔案
  accept: 限制上傳的檔案類型

• number 整數數字
  min: 最小值
  max: 最大值
  step: 預設值為 1

3. 按鈕

• button: 無動作按鈕，要搭配 JavaScript 使用
• submit: 提交按鈕，按下會送出表單(form)裡所有資訊
• reset: 重置按鈕，按下後會將表單內的值還原成空值(defult)

• 多行文字輸入 < textarea > < /textarea >

!注意:需要有 " / " 關閉標籤!

• cols="列數（寬度）" rows="行數（高度）"
• placeholder: 文字框裡附註文字

• 下拉選單 < select > < datalist >

• < optgroup >: 可以把選項內容分組(不能選)
• < option >: 選項

< select >

當選項多時 datalist 能做查找選項的動作
< datalist >

今天就先表單的介紹到這邊~我們明天就來實作表單吧~

(以上程式碼使用 codepen 做直接顯示)