學(xué)form表單的時(shí)候捞魁，聽(tīng)老師講的暈暈乎乎的至会，最多做到講了什么內(nèi)容，但是還是暈暈乎乎的谱俭，因?yàn)檎f(shuō)真的奉件，他講課有他自己的邏輯宵蛀，自己的概念儲(chǔ)備，自己的邏輯性的县貌。而我一聽(tīng)术陶，只能任其所為，無(wú)法舉一反三煤痕，只能憋屈地記筆記梧宫，其實(shí)心里是不爽的，不能知其所以然也摆碉。后來(lái)塘匣，練多了，對(duì)其中的一些概念有了自己的理解兆解，才算度過(guò)了這種明明感覺(jué)學(xué)過(guò)了的東西馆铁，但是卻好像沒(méi)有用的感覺(jué)了。重點(diǎn)是什么锅睛？是對(duì)概念的引入埠巨！
簡(jiǎn)單談?wù)刦orm心得
具體的form的簡(jiǎn)介，屬性之類的现拒，我不會(huì)多說(shuō)辣垒，這是最基本的概念，大家都不難查到的印蔬。這是個(gè)重點(diǎn)勋桶，概念的引入可以讓你知道什么是什么，用在哪里侥猬，格式是怎樣的例驹，修飾它的屬性又是如何作用的？其實(shí)退唠，我感覺(jué)學(xué)HTML從開(kāi)始就應(yīng)該清晰自己的思路鹃锈，因?yàn)槿际橇闼榈狞c(diǎn)，而且單單只是html的話瞧预，沒(méi)有太多功能和花樣可以玩屎债，也讓你沒(méi)有什么任務(wù)可以練習(xí)，如果單單敲代碼垢油，打出個(gè)沒(méi)有渲染的網(wǎng)頁(yè)盆驹，你又會(huì)覺(jué)得好無(wú)趣。所以滩愁，缺乏練習(xí)的情況下躯喇，更需要理清思路，分清因果硝枉，然后才會(huì)學(xué)到家的廉丽。
比如標(biāo)簽秸讹，每個(gè)標(biāo)簽都有定義，應(yīng)用范圍雅倒，為了讓標(biāo)簽更生動(dòng)，應(yīng)用面更廣弧可，會(huì)有各個(gè)屬性延伸蔑匣，更精確到某一特定場(chǎng)景的。然后就是為了讓瀏覽器能知道你寫(xiě)了什么棕诵，你寫(xiě)的必須要規(guī)范裁良，要符合瀏覽器可以解析出來(lái)的格式。好比校套，我們?cè)趯W(xué)數(shù)學(xué)時(shí)价脾，會(huì)有變量，有函數(shù)笛匙，公式侨把，概念，條件妹孙，題目場(chǎng)景秋柄，基本上會(huì)是一個(gè)套路的。首先蠢正，我們要做的是骇笔，規(guī)范自己，知道html的語(yǔ)法和格式嚣崭，這是個(gè)應(yīng)式模板笨触，也藏著一些邏輯在里面，可以推敲的雹舀。具體芦劣，我會(huì)在練法中，分析事例的葱跋。
練習(xí)
form表單大致有單選類持寄，多選類，下拉類娱俺，文本類稍味，創(chuàng)建按鈕等等吧，先把常見(jiàn)的練習(xí)下荠卷。
輸名字輸密碼之類的文本框
代碼如圖
這是一個(gè)簡(jiǎn)易的登錄窗口模庐，有輸入帳戶名，密碼油宜，提交的功能吧掂碱，具體效果如圖：
注意：這里的字體顏色和背景是我在全局設(shè)置的怜姿，跟這些代碼沒(méi)關(guān)系，不要糾結(jié)疼燥。
我啥都沒(méi)輸入沧卢，用戶名怎么默認(rèn)yong了？看代碼里醉者，這是value的賦值功能但狭，你還可以刪除它，然后會(huì)顯示“你的名字”這幾個(gè)字撬即，跟下面“你的密碼”一樣了立磁，這是input里的placeholder這個(gè)占位符的功勞了，作為提醒用戶輸入什么內(nèi)容剥槐，提交時(shí)只是提交用戶寫(xiě)進(jìn)去的東西唱歧。
label這個(gè)標(biāo)簽是給目標(biāo)，比如用戶名粒竖，密碼這些目標(biāo)加功能的颅崩，用在選項(xiàng)類里面，能發(fā)揮點(diǎn)選項(xiàng)也能選中選項(xiàng)框的功能温圆，下面也會(huì)練到挨摸。這里的for是引出作用對(duì)象，這個(gè)標(biāo)簽的作用對(duì)象是誰(shuí)岁歉，就for誰(shuí)得运，跟action一個(gè)語(yǔ)境，所以在學(xué)數(shù)學(xué)時(shí)我們經(jīng)常假設(shè)個(gè)值锅移，好完成邏輯熔掺，這里給作用對(duì)象input這個(gè)框加個(gè)標(biāo)簽，就完成了互相間的聯(lián)系非剃。這種做法經(jīng)常會(huì)用到置逻，就是為了完成邏輯的。
target這個(gè)就不陌生了备绽，描述完input之后券坞，點(diǎn)submit這個(gè)按鈕，會(huì)打開(kāi)新網(wǎng)頁(yè)肺素，而不是在當(dāng)前文件頁(yè)面恨锚。action是讓form表單提交的內(nèi)容送到哪個(gè)url或者文件路徑那里，這里是隨便輸?shù)谋睹摇ethod的值這里是get,給的意思猴伶，還要講一種值是post，是要的意思。
button僅僅是為了比較跟input做出的按鈕的感官如何的他挎。實(shí)際上覺(jué)得筝尾，功能差不多。不過(guò)可以單獨(dú)修飾按鈕這個(gè)事了办桨。大家可以練一下筹淫，找感覺(jué)的。
reset是重置你寫(xiě)的內(nèi)容呢撞，點(diǎn)了之后贸街，恢復(fù)框內(nèi)最開(kāi)始狀態(tài)。
name就是給作用對(duì)象起名字狸相，這個(gè)名字是個(gè)變量，而且也是有通用語(yǔ)義的捐川，好像X 脓鹃，Y一樣，可以被賦予很確切的值古沥，起的名字最關(guān)鍵的是讓服務(wù)器看的瘸右，而value就是可以賦予確切的值的，在提交選項(xiàng)結(jié)果時(shí)岩齿，服務(wù)器依靠name找到對(duì)應(yīng)的value值太颤。
強(qiáng)調(diào)一下，form里面盹沈，input提交的內(nèi)容必須要有name這個(gè)參數(shù)龄章，name就是key，到了服務(wù)器內(nèi)容變成keyvalue形式乞封。這是為了跟服務(wù)器對(duì)接識(shí)別input的內(nèi)容是哪一個(gè)語(yǔ)義的內(nèi)容的做裙。下面的圖會(huì)讓你看到的。
我現(xiàn)在操作我做的這個(gè)東西肃晚，研究下method的get锚贱。先用終端進(jìn)入文件所在目錄，運(yùn)行http-server,還有以靜態(tài)服務(wù)器打開(kāi)頁(yè)面关串。
名字默認(rèn)yong,沒(méi)改拧廊，密碼輸了123456。點(diǎn)了下submit按鈕晋修。然后新打開(kāi)網(wǎng)頁(yè)吧碾，提示我找不到，因?yàn)榈刂肥俏译S意打的飞蚓。我在網(wǎng)頁(yè)右擊滤港，點(diǎn)檢查，如圖
有警告，我點(diǎn)開(kāi)看了下溅漾，我的用戶名和密碼竟然以某種方式赤裸裸地展示在服務(wù)器文件里了山叮，我是請(qǐng)求登錄的，把自己的信息給了“服務(wù)器“添履。如圖
這里引入一個(gè)安全隱患csrf——跨站腳本攻擊暮胧。推薦資料《程序猿必讀-防范CSRF跨站請(qǐng)求偽造》锐借。
然后，我把源代碼里的get改成post,再操作下往衷，這次沒(méi)有報(bào)錯(cuò)找不到網(wǎng)頁(yè)了钞翔，但是打開(kāi)了一個(gè)空白網(wǎng)頁(yè)，啥都木有席舍，我再右擊檢查布轿，繼續(xù)操作，如圖：
這次来颤，比較一下get和post的區(qū)別汰扭，至少看出我的信息一個(gè)是赤裸裸地表現(xiàn)在一個(gè)服務(wù)器加工出來(lái)的url中，一個(gè)不顯示福铅，卻出現(xiàn)在數(shù)據(jù)包里了萝毛。具體的區(qū)分，請(qǐng)自行查詢滑黔，太多了笆包，我不做多解釋。只是記住略荡，get會(huì)把提交的所有的input的name和其value值拼接成url發(fā)給服務(wù)器色查。post相比更安全就好了，還有對(duì)csrf的防范也是一個(gè)點(diǎn)撞芍，大家一點(diǎn)要看的秧了。在input中加個(gè)隨機(jī)值可以有效預(yù)防的
<input type="hidden" name="csrf" value="隨意輸入">
自己打開(kāi)網(wǎng)站，服務(wù)器發(fā)給用戶一個(gè)隨機(jī)數(shù)序无，用戶提交時(shí)验毡，服務(wù)器會(huì)比較提交時(shí)數(shù)據(jù)里有木有相同的隨機(jī)數(shù)。
單選和多選
代碼如下
效果
這是單選的帝嗡，同樣是用的label擴(kuò)大選擇面積的晶通，如果想設(shè)定默認(rèn)選項(xiàng)就用里面的checked去修飾，后面的trul可以省略的哟玷。同一道單選題狮辽，所有的選項(xiàng)必須要name值相同一也。
注意，input必須要有value值喉脖，因?yàn)槭菃芜x椰苟，name相同，提交的話树叽，必須要區(qū)分舆蝴。
這里點(diǎn)下div，我同樣可以為它加class命名的题诵，沒(méi)有影響洁仗。不過(guò)老師這么寫(xiě)了，我思考了下性锭，這就是規(guī)范性和條理性了赠潦，不僅僅自己看更邏輯清晰，別人看也方便草冈。聽(tīng)大佬們說(shuō)過(guò)祭椰，一個(gè)程序員的發(fā)展除了遵循必須的語(yǔ)法啊，規(guī)則啊之外疲陕，必須要有自己的風(fēng)格，越想越有意思钉赁。
多選的如下圖
效果如圖
還有多選的另一種應(yīng)用代碼蹄殃，如圖：
當(dāng)然，這些input沒(méi)有value值你踩，可以互相比較一下的诅岩。
下拉選項(xiàng)
代碼如圖
.這個(gè)比較單一了，除了再次強(qiáng)調(diào)name 是定函數(shù)的带膜， value是賦值的值吩谦，服務(wù)器收到的是keyvalue。簡(jiǎn)單膝藕，不多說(shuō)了式廷。
其他的練習(xí)點(diǎn)
代碼如下
效果按順序如圖
- 選擇文件，比如文件上傳芭挽，只接受兩種圖片文件
- 多行文本滑废，區(qū)別于text的一行，其中的value值是在textarea標(biāo)簽中間輸入的袜爪，而不是在標(biāo)簽內(nèi)賦予蠕趁。cols是行，rows是列辛馆。
- 日期俺陋，點(diǎn)一下會(huì)出現(xiàn)日歷
- 數(shù)字框，點(diǎn)下會(huì)有上下箭頭調(diào)數(shù)字
- 搜索欄，隨意
- 輸入郵箱腊状，格式不對(duì)诱咏，會(huì)有提示
- 輸入網(wǎng)址，同上
- 顏色調(diào)整
- 一個(gè)調(diào)整條
補(bǔ)充
<input type="button" value="Buttom" /> 不會(huì)提交
類同于disabled寿酌。
這里路線其實(shí)很清晰了胰苏，什么情況下，用什么標(biāo)簽醇疼，標(biāo)簽的屬性的name定義硕并，對(duì)name 的賦予value值，細(xì)節(jié)操作是為了各種功能的秧荆，也就是其他標(biāo)簽的修飾功能了倔毙，主要是要明白自己要做什么，服務(wù)器要得到什么乙濒。
