淺談HTML表單（一）：表單提交原理
來自專欄 Miyas 技術學習小記
一、html表單
1、什麼是表單
能夠去輸入用戶信息的一個單子。和我們平時填寫的紙質表單一樣，在HTML頁面上，也有表單是用於搜集不同類型的用戶信息輸入
2、作用
用於收集已收集的信息，提交你網站的後台（或者伺服器）。
HTML表單是一個包含表單元素的區域，表單元素是允許用戶在表單中（表單元素包含如：文本域、下拉列表、單選框、複選框等）輸入信息的元素
二、寫表單
1、表單提交原理
一般表單有登錄名、密碼，<form></form>、<input>，表單所有信息用<form></form>包裹。用<form>包裹所有<input>輸入框，當點擊提交後，將會把<form>所包裹得所有<input>輸入框的信息提交給後台的一個地址上。
2、寫表單
（1）表單內的主要標籤屬性：
A、
<form></form>
B、
<form action="/a123" method="get">
action:把數據提交到後台的地址，如action="/a123"，即提交到當前域名下的/a123
method：提交數據的方式
（2）demo：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="login"> <form action="/a123" method="get"> <div class="sex"> <input type="text" name="sex1"> </div> <div class="username"> <input type="text" name="username1"> </div> <div class="password"> <input type="password" name="password1"> </div> <div class="submit"> <button>提交</button> </div> </form> </div></body></html>
（2）html文件用瀏覽器打開頁面
當寫出登錄名、密碼、提交代碼後（之後加上性別），
以get形式點擊提交，頁面url顯示input輸入的相應的內容：
註：點擊提交代表向伺服器發送了一個請求，這個文件是通過get方式進行表單收集
假如，將以下代碼放置在<form></form>標籤之外，
<div> <div class="sex"> <input type="text" name="sex1"> </div> <form>..... </form> </div>
以get形式提交的頁面url也不會顯示相應的內容：
3、終端上操作
即本地終端開啟伺服器，以服務端的方式打開頁面
（1）命令行開啟靜態伺服器，並打開頁面：
因為之前我已經安裝nodejs，用npm安裝了http-server這個伺服器，所以可以執行以下代碼直接打開這個靜態伺服器：
$ http-server
代碼執行之後，輸入相應的url出現的頁面，兩步驟之後的示意圖：
註：以下情況給沒有安裝nodejs 的人看的（安裝了就可以不看）
假如有人之前沒安裝nodejs，就不能用npm命令去開啟一個靜態伺服器，所以可以先看看我這篇：
miya Wang：淺談命令行（二）：安裝靜態伺服器（涉及nodejs和npm的使用）
看完之後可以下載nodejs，在終端執行以下代碼：
$ sudo npm install -g http-server$ http-server
這樣之後就開啟了一個靜態伺服器，就可以用裡面的url打開相應的html文件
（2）輸入相應信息之後，出現：
（3）頁面右鍵——檢查，重新輸入表單信息，點擊提交
出現頁面相對應的html文件——form.html的請求，先貼上我操作後出現的頁面：
- 請求的地址：
Request URL: http://127.0.0.1:8080/a123?username1=wxq393&password1=12345
- 請求的類型：
Request Method: GET
- 請求的參數：
username1: wxq393
password1: 12345
（4）兩種請求類型：get和post
A、get請求
即當form.html中method="get"時，頁面上點擊「提交」時，就會將form.html展現的信息進行組裝，以view的形式去組合成這個url地址：http://127.0.0.1:8080/a123?username1=wxq393&password1=12345，向這個地址發送請求。
get請求，本質上就是url的拼接，把你的參數拼接在一起組成一個新的url
註：username所得的參數是屬於input標籤中的name屬性
B、post請求
關於post類型發送請求：由於我的伺服器http-server，是個靜態文件伺服器，不支持post請求。
可以看老司機的演示：
post的請求類型得到的url地址更乾淨，更安全。
三、post和get的區別
1、method提供兩種提交方式：
一種是get方式向後台發送請求，提交數據；另一種是post方式向後台發送請求，提交數據
2、區別
（1）從安全性上，二者表象不同，get把提交的數據url可以看到，會展現在瀏覽器歷史記錄中，安全性不好；但是post看不到，安全性好。
（2）從提交數據量上，get最多提交1k數據，瀏覽器上的url地址框有字元長度限制；post理論上無限制，受伺服器限制。
（3）從原理上，get 是拼接 url， post 是放入http 請求體中。
3、應用場景（怎麼合理兩種方式傳遞數據？）
註：在實際應用上，get 重在 "得到", post 重在"傳遞"
即假如向後台查詢一篇論文，請求數據，請求為「得到」，用get方式請求數據；向後台「傳遞」數據，寫了文章之後傳遞至後台，通常是「傳遞完成」的狀態進行提示，用post方式請求數據。
四、表單元素
吶，早說了，w3c是個好東西????
HTML 表單元素
推薦閱讀：
※設計對用戶友好表單的8個要點
※哪一刻，你意識到平窮限制了你的想像
※淺談HTML表單（二）：表單元素
※魔方網表標準模塊，1小時做出業務應用