一绞蹦、html表單
1、什么是表單
能夠去輸入用戶信息的一個(gè)單子榜旦。和我們平時(shí)填寫的紙質(zhì)表單一樣幽七，在HTML頁(yè)面上，也有表單是用于搜集不同類型的用戶信息輸入
2溅呢、作用
用于收集已收集的信息澡屡，提交你網(wǎng)站的后臺(tái)（或者服務(wù)器）。
HTML表單是一個(gè)包含表單元素的區(qū)域咐旧，表單元素是允許用戶在表單中（表單元素包含如：文本域驶鹉、下拉列表、單選框铣墨、復(fù)選框等）輸入信息的元素
二室埋、寫表單
1、表單提交原理
一般表單有登錄名、密碼姚淆，<form></form>孕蝉、<input>，表單所有信息用<form></form>包裹肉盹。用<form>包裹所有<input>輸入框昔驱，當(dāng)點(diǎn)擊提交后，將會(huì)把<form>所包裹得所有<input>輸入框的信息提交給后臺(tái)的一個(gè)地址上上忍。
2骤肛、寫表單
（1）表單內(nèi)的主要標(biāo)簽屬性：
A、
<form></form>
B窍蓝、
<form action="/a123" method="get">
action : 把數(shù)據(jù)提交到后臺(tái)的地址腋颠，如action="/a123"，即提交到當(dāng)前域名下的/a123
method：提交數(shù)據(jù)的方式
（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>
（3）html文件用瀏覽器打開(kāi)頁(yè)面
當(dāng)寫出登錄名吓笙、密碼淑玫、提交代碼后（之后加上性別），
以get形式點(diǎn)擊提交面睛，頁(yè)面url顯示input輸入的相應(yīng)的內(nèi)容：
注：點(diǎn)擊提交代表向服務(wù)器發(fā)送了一個(gè)請(qǐng)求絮蒿，這個(gè)文件是通過(guò)get方式進(jìn)行表單收集
image
假如，將以下代碼放置在<form></form>標(biāo)簽之外叁鉴，
<div>
<div class="sex">
<input type="text" name="sex1">
</div>
<form>
.....
</form>
</div>
以get形式提交的頁(yè)面url也不會(huì)顯示相應(yīng)的內(nèi)容：
3土涝、終端上操作
即本地終端開(kāi)啟服務(wù)器，以服務(wù)端的方式打開(kāi)頁(yè)面
（1）命令行開(kāi)啟靜態(tài)服務(wù)器幌墓，并打開(kāi)頁(yè)面：
因?yàn)橹拔乙呀?jīng)安裝nodejs但壮，用npm安裝了http-server這個(gè)服務(wù)器，所以可以執(zhí)行以下代碼直接打開(kāi)這個(gè)靜態(tài)服務(wù)器：
$ http-server
代碼執(zhí)行之后常侣，輸入相應(yīng)的url出現(xiàn)的頁(yè)面蜡饵，兩步驟之后的示意圖：
注：以下情況給沒(méi)有安裝nodejs 的人看的（安裝了就可以不看）
假如有人之前沒(méi)安裝nodejs，就不能用npm命令去開(kāi)啟一個(gè)靜態(tài)服務(wù)器胳施，所以可以先看看我這篇：
?淺談命令行（二）：安裝靜態(tài)服務(wù)器（涉及nodejs和npm的使用）
看完之后可以下載nodejs溯祸，在終端執(zhí)行以下代碼：
$ sudo npm install -g http-server
$ http-server
這樣之后就開(kāi)啟了一個(gè)靜態(tài)服務(wù)器，就可以用里面的url打開(kāi)相應(yīng)的html文件
（2）輸入相應(yīng)信息之后舞肆，出現(xiàn)：
（3）頁(yè)面右鍵——檢查您没，重新輸入表單信息，點(diǎn)擊提交
出現(xiàn)頁(yè)面相對(duì)應(yīng)的html文件——form.html的請(qǐng)求胆绊，先貼上我操作后出現(xiàn)的頁(yè)面：
- 請(qǐng)求的地址：
Request URL: http://127.0.0.1:8080/a123?username1=wxq393&password1=12345
- 請(qǐng)求的類型：
Request Method: GET
- 請(qǐng)求的參數(shù)：
username1: wxq393
password1: 12345
（4）兩種請(qǐng)求類型：get和post
A、get請(qǐng)求
即當(dāng)form.html中method="get"時(shí)欧募，頁(yè)面上點(diǎn)擊“提交”時(shí)压状，就會(huì)將form.html展現(xiàn)的信息進(jìn)行組裝，以view的形式去組合成這個(gè)url地址：```http://127.0.0.1:8080/a123?username1=wxq393&password1=12345，向這個(gè)地址發(fā)送請(qǐng)求种冬。
get請(qǐng)求镣丑，本質(zhì)上就是url的拼接，把你的參數(shù)拼接在一起組成一個(gè)新的url:
注：username所得的參數(shù)是屬于input標(biāo)簽中的name屬性
B娱两、post請(qǐng)求
關(guān)于post類型發(fā)送請(qǐng)求：由于我的服務(wù)器http-server莺匠，是個(gè)靜態(tài)文件服務(wù)器，不支持post請(qǐng)求十兢。
可以看老司機(jī)的演示：
post的請(qǐng)求類型得到的url地址更干凈趣竣，更安全。
三旱物、post和get的區(qū)別
1遥缕、method提供兩種提交方式：
一種是get方式向后臺(tái)發(fā)送請(qǐng)求，提交數(shù)據(jù)宵呛；另一種是post方式向后臺(tái)發(fā)送請(qǐng)求单匣，提交數(shù)據(jù)
2、區(qū)別
（1）從安全性上宝穗，二者表象不同户秤，get把提交的數(shù)據(jù)url可以看到，會(huì)展現(xiàn)在瀏覽器歷史記錄中逮矛，安全性不好鸡号；但是post看不到，安全性好橱鹏。
（2）從提交數(shù)據(jù)量上膜蠢，get最多提交1k數(shù)據(jù)，瀏覽器上的url地址框有字符長(zhǎng)度限制莉兰；post理論上無(wú)限制挑围，受服務(wù)器限制。
（3）從原理上糖荒，get 是拼接 url杉辙， post 是放入http 請(qǐng)求體中。
3捶朵、應(yīng)用場(chǎng)景（怎么合理兩種方式傳遞數(shù)據(jù)蜘矢？）
注：在實(shí)際應(yīng)用上，get 重在 "得到", post 重在"傳遞"
即假如向后臺(tái)查詢一篇論文综看，請(qǐng)求數(shù)據(jù)品腹，請(qǐng)求為“得到”，用get方式請(qǐng)求數(shù)據(jù)红碑；向后臺(tái)“傳遞”數(shù)據(jù)舞吭，寫了文章之后傳遞至后臺(tái)泡垃，通常是“傳遞完成”的狀態(tài)進(jìn)行提示，用post方式請(qǐng)求數(shù)據(jù)羡鸥。
四蔑穴、表單元素
吶，早說(shuō)了惧浴，w3c是個(gè)好東西??存和，輕戳：
HTML 表單元素
