學習目標：認識表單標籤的用法及實作一個表單。
延續 [第七週] HTML — Tag 基本標籤 此篇要來認識「表單標籤」。
表單在網頁來說是非常常見的組塊，client 端可以透過填寫表單送出 request 到 server 端。
<form> 開始
所有的 HTML 表單都是從 <form> 開始，屬性值有以下：
action="url"
- 表單傳送到哪個網址即會跳轉過去，若未指定則為發送到與原頁面
- 舉例：
<form action="https://google.com">method="POST"
- 使用哪種 HTTP method 傳送資料，有以下兩種：
第一種：GET（默認值）
- 使用情境：表單數據無敏感訊息，例如：搜尋引擎查詢
- 以「 query string」 的方式傳送，表單數據會附加在 Url 中，並以
？做為分隔符；以&作為 key 的串接符 - 參考資料：[JS] 使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）
query string 舉例：action_page.html?firstname=Mickey&lastname=Mouse- 因為瀏覽器會設定容量限制所以適合少量數據提交。
舉例：<form action="https://google.com" method="GET">第二種：POST
- 使用情境：表單數據有敏感訊息，例如：登入註冊表單
- 會將表單資料放在 Request 中的 Form Data 中發送給 Server
- 舉例：github
<label> 說明文字
- 會與
<input>的id相對應，使在點擊<label>文字時會自動<active>到相對應的<input>欄位
<input> 單行輸入
是表單中重要的元素，通常會搭配 <label> 一起使用
- 常用屬性 — — —
1.name="value"：以名字/值 一對的形式隨表單提交，「因此每個輸入欄位都必須帶有 name 屬性」。
2.type="value"：賦予 input 不同的輸入類型，大致上可以分成 文字、選擇框、按鈕 三大類，以下分別介紹並放上 codepen 範例
文字輸入類
text純文字email信箱格式，會做基本的驗證password密碼，值會被遮蓋住tel輸入電話號碼，在擁有動態鍵盤的設備上會顯示電話數字鍵盤url類似text但有驗證參數
選擇框
checkbox複選框 &radio單選框
常用屬性 — — —
1. 同樣的 name 為一組，並且設定 value。
2. checked ：可以將其設定為預設選項。color選擇顏色range一個範圍的數字
常用屬性 — — —
1. 建議要設定 value
2. min：最小值
3. max：最大值
4. step：預設值為 1date選擇日期file選擇檔案
常用屬性 — — —
1. accept 限制上傳的檔案類型，例如：image/png, image/jpegnumber整數數字
常用屬性
1. min：最小值
2. max：最大值
3. step：預設值為 1
按鈕
- button 無動作按鈕，按下去不會發生事情，但當要使用 JavaScript 來操作時非常好用。
- submit 提交按鈕，按下會送出 form 裡所有資訊。
- reset 重置按鈕，按下後會將表單內的值還原成 defult。 #不建議使用
以上為 input type 的種類。
多行輸入 <textarea>
<textarea name="message" cols="30" rows="10"></textarea>- 多行純文字輸入
- 有關閉標籤
常用屬性 — — —
1. cols 列數（寬度）
2. rows 行數（高度）
下拉選單<select>
內元素
<option>選項
seleced 將其設定為預設選項
<optgroup>分組選項內容，但本身不可選
label 必要屬性
其他表單欄位標籤常見屬性（詳可參考：HTML5 标签列表）
value預設內容
[補充說明] input 沒有關閉標籤，所以內容是寫在 value 的屬性值上disabled表示禁用required表示必填plceholder表單內的提示文字，當使用開始輸入文字就消失
實作表單
以上有任何錯誤的地方歡迎指正，感謝。
