HTML表單詳解
網(wǎng)站怎樣與用戶進(jìn)行交互引瀑？答案是使用HTML表單(form)狂芋。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)憨栽。
1. 在線實(shí)例 項(xiàng)目預(yù)覽地址
image.png
2.表格元素
這里的元素用于創(chuàng)建和處理表格數(shù)據(jù)
-
<caption>HTML <caption> 元素 (or HTML 表格標(biāo)題元素) 展示一個(gè)表格的標(biāo)題帜矾， 它常常作為 <table> 的第一個(gè)子元素出現(xiàn)翼虫，同時(shí)顯示在表格內(nèi)容的最前面，但是屡萤，它同樣可以被CSS樣式化珍剑，所以，它同樣可以出現(xiàn)在任何一個(gè)一個(gè)相對(duì)于表格的做任意位置死陆。 -
<col>HTML <col> 元素 定義表格中的列招拙，并用于定義所有公共單元格上的公共語義。它通常位于<colgroup>元素內(nèi)措译。 -
<colgroup>HTML 中的 表格列組（Column Group <colgroup>） 標(biāo)簽用來定義表中的一組列表别凤。 -
<table>HTML的 table 元素表示表格數(shù)據(jù) — 即通過二維數(shù)據(jù)表表示的信息。 -
<thead>語義化標(biāo)簽领虹，表示表格的開頭部分规哪。 -
<tbody>語義化標(biāo)簽，表示表格的主體部分塌衰。 -
<tfoot>語義化標(biāo)簽诉稍，表示表格的結(jié)尾部分。 -
<td>表示表格中的數(shù)據(jù)最疆。 -
<th>通常用于表示表格中第一行的數(shù)據(jù)杯巨。 -
<tr>元素定義表格中的行。
3. 表單元素
HTML 提供了許多可一起使用的元素努酸，這些元素能用來創(chuàng)建一個(gè)用戶可以填寫并提交到網(wǎng)站或應(yīng)用程序的表單舔箭。
-
<button>HTML <button>元素 表示一個(gè)可點(diǎn)擊的按鈕。 -
<datalist>HTML Datalist 元素 (<datalist>) 包含了一組<option>元素,這些元素表示其它表單控件可選值. <fieldset>-
<form>HTML <form> 元素 表示了文檔中的一個(gè)區(qū)域蚊逢，這個(gè)區(qū)域包含有交互控制元件层扶，用來向web服務(wù)器提交信息。 -
<input>HTML <input> 元素用于為基于Web的表單創(chuàng)建交互式控件烙荷，以便接受來自用戶的數(shù)據(jù)镜会。 -
<label>HTML 元素表示用戶界面中項(xiàng)目的標(biāo)題。 -
<legend>HTML的<legend>元素（也稱為HTML的域說明元素（or HMTL Legend Field Element））代表一個(gè)用于表示它的父元素-
<fieldset>的內(nèi)容的標(biāo)題终抽。</legend> -
<meter>HTML <meter>元素用來顯示已知范圍的標(biāo)量值或者分?jǐn)?shù)值戳表。 -
<optgroup>在一個(gè)web表單中, HTML元素 <optgroup> 會(huì)創(chuàng)建包含在一個(gè) <select> 元素中的一組選項(xiàng) -
<option>在web表單中, HTML元素 <option> 用于定義在<select>, -<optgroup>或<datalist> 元素中包含的項(xiàng)。<option> 可以在彈出窗口和 html 文檔中的其他項(xiàng)目列表中表示菜單項(xiàng)昼伴。 -
<output>HTML 標(biāo)簽定義一個(gè)用戶的操作或者計(jì)算的結(jié)果匾旭。 -
<progress>HTML中的progress (<progress>) 元素用來顯示一項(xiàng)任務(wù)的完成進(jìn)度.雖然規(guī)范中沒有規(guī)定該元素具體如何顯示,瀏覽器開發(fā)商可以自己決定,但通常情況下,該元素都顯示為一個(gè)進(jìn)度條形式. -
<select>HTML select (<select>) 元素是一種表單控件，可創(chuàng)建選項(xiàng)菜單圃郊。菜單內(nèi)的選項(xiàng)為<option> , 可以由 <optgroup> 元素分組价涝。選項(xiàng)可以被用戶預(yù)先選擇。 -
<textarea>HTML <textarea> 元素表示一個(gè)多行純文本編輯控件持舆。
4. 在input里色瘩，name 有什么作用伪窖？(待完善)
<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。
<input> 元素在 <form> 元素中使用居兆，用來聲明允許用戶輸入數(shù)據(jù)的 input 控件覆山。
name 屬性規(guī)定 <input> 元素的名稱。
name 屬性用于在 JavaScript 中引用元素泥栖，或者在表單提交后引用表單數(shù)據(jù)簇宽。
注意：只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。
5. radio 如何 分組?
radio分組時(shí)應(yīng)在一個(gè)input標(biāo)簽里且name值必須為同值
例：
<form>
你更喜歡哪種顏色?
<input type="radio" name="colors" id="red">紅色</br>
<input type="radio" name="colors" id="blue">藍(lán)色</br>
<input type="radio" name="colors" id="green">綠色
</form>
<button type="button" onclick="displayResult()">顯示 input 類型</button>
6. placeholder 屬性有什么作用?
placeholder 屬性規(guī)定可描述輸入字段預(yù)期值的簡(jiǎn)短的提示信息（比如：一個(gè)樣本值或者預(yù)期格式的短描述）吧享。
該提示會(huì)在用戶輸入值之前顯示在輸入字段中晦毙。
注意：placeholder 屬性適用于下面的 input 類型：text、search耙蔑、url见妒、tel、email 和 password甸陌。
image.png
7. post 和 get 方式提交數(shù)據(jù)有什么區(qū)別须揣？
GET 方法
請(qǐng)注意，查詢字符串（名稱/值對(duì)）是在 GET 請(qǐng)求的 URL 中發(fā)送的：
/test/demo_form.php?name1=value1&name2=value2
有關(guān) GET 請(qǐng)求的其他一些注釋：
GET 請(qǐng)求可被緩存
GET 請(qǐng)求保留在瀏覽器歷史記錄中
GET 請(qǐng)求可被收藏為書簽
GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
GET 請(qǐng)求有長(zhǎng)度限制
GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
POST 方法
請(qǐng)注意钱豁，查詢字符串（名稱/值對(duì)）是在 POST 請(qǐng)求的 HTTP 消息主體中發(fā)送的：
POST /test/demo_form.php HTTP/1.1
Host: w3cschool.cc
name1=value1&name2=value2
有關(guān) POST 請(qǐng)求的其他一些注釋：
POST 請(qǐng)求不會(huì)被緩存
POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒有要求
8. CSRF 攻擊是什么耻卡？如何防范?
CSRF（Cross-site request forgery）跨站請(qǐng)求偽造，也被稱為“One Click Attack”或者Session Riding牲尺，通陈牙遥縮寫為CSRF或者XSRF，是一種對(duì)網(wǎng)站的惡意利用谤碳，CSRF通過偽裝來自受信任用戶的請(qǐng)求來利用受信任的網(wǎng)站溃卡。CRSF能做的事情包括利用你的身份發(fā)郵件，發(fā)短信蜒简，進(jìn)行交易轉(zhuǎn)賬瘸羡，甚至盜取賬號(hào)信息。
image.png
CSRF攻擊攻擊原理及過程如下：
- 用戶C打開瀏覽器搓茬，訪問受信任網(wǎng)站A犹赖，輸入用戶名和密碼請(qǐng)求登錄網(wǎng)站A；
- 在用戶信息通過驗(yàn)證后卷仑，網(wǎng)站A產(chǎn)生Cookie信息并返回給瀏覽器峻村，此時(shí)用戶登錄網(wǎng)站A成功，可以正常發(fā)送請(qǐng)求到網(wǎng)站A锡凝；
- 用戶未退出網(wǎng)站A之前粘昨，在同一瀏覽器中，打開一個(gè)TAB頁訪問網(wǎng)站B；
- 網(wǎng)站B接收到用戶請(qǐng)求后雾棺，返回一些攻擊性代碼膊夹，并發(fā)出一個(gè)請(qǐng)求要求訪問第三方站點(diǎn)A衬浑；
- 瀏覽器在接收到這些攻擊性代碼后捌浩，根據(jù)網(wǎng)站B的請(qǐng)求，在用戶不知情的情況下攜帶Cookie信息工秩，向網(wǎng)站A發(fā)出請(qǐng)求尸饺。網(wǎng)站A并不知道該請(qǐng)求其實(shí)是由B發(fā)起的，所以會(huì)根據(jù)用戶C的Cookie信息以C的權(quán)限處理該請(qǐng)求助币，導(dǎo)致來自網(wǎng)站B的惡意代碼被執(zhí)行浪听。
防御CSRF攻擊：
目前防御 CSRF 攻擊主要有三種策略：
- 驗(yàn)證 HTTP Referer 字段；
- 在請(qǐng)求地址中添加 token 并驗(yàn)證眉菱；
- 在 HTTP 頭中自定義屬性并驗(yàn)證迹栓。
- 根據(jù) HTTP 協(xié)議，在 HTTP 頭中有一個(gè)字段叫 Referer俭缓，它記錄了該 HTTP 請(qǐng)求的來源地址克伊。在通常情況下，訪問一個(gè)安全受限頁面的請(qǐng)求來自于同一個(gè)網(wǎng)站华坦，比如需要訪問 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory愿吹，用戶必須先登陸 bank.example，然后通過點(diǎn)擊頁面上的按鈕來觸發(fā)轉(zhuǎn)賬事件惜姐。這時(shí)犁跪，該轉(zhuǎn)帳請(qǐng)求的 Referer 值就會(huì)是轉(zhuǎn)賬按鈕所在的頁面的 URL，通常是以 bank.example 域名開頭的地址歹袁。而如果黑客要對(duì)銀行網(wǎng)站實(shí)施 CSRF 攻擊坷衍，他只能在他自己的網(wǎng)站構(gòu)造請(qǐng)求，當(dāng)用戶通過黑客的網(wǎng)站發(fā)送請(qǐng)求到銀行時(shí)条舔，該請(qǐng)求的 Referer 是指向黑客自己的網(wǎng)站惫叛。因此，要防御 CSRF 攻擊逞刷，銀行網(wǎng)站只需要對(duì)于每一個(gè)轉(zhuǎn)賬請(qǐng)求驗(yàn)證其 Referer 值嘉涌，如果是以 bank.example 開頭的域名，則說明該請(qǐng)求是來自銀行網(wǎng)站自己的請(qǐng)求夸浅，是合法的仑最。如果 Referer 是其他網(wǎng)站的話，則有可能是黑客的 CSRF 攻擊帆喇，拒絕該請(qǐng)求警医。
這種方法的顯而易見的好處就是簡(jiǎn)單易行，網(wǎng)站的普通開發(fā)人員不需要操心 CSRF 的漏洞，只需要在最后給所有安全敏感的請(qǐng)求統(tǒng)一增加一個(gè)攔截器來檢查 Referer 的值就可以预皇。特別是對(duì)于當(dāng)前現(xiàn)有的系統(tǒng)侈玄，不需要改變當(dāng)前系統(tǒng)的任何已有代碼和邏輯，沒有風(fēng)險(xiǎn)吟温，非常便捷序仙。
然而，這種方法并非萬無一失鲁豪。Referer 的值是由瀏覽器提供的潘悼，雖然 HTTP 協(xié)議上有明確的要求，但是每個(gè)瀏覽器對(duì)于 Referer 的具體實(shí)現(xiàn)可能有差別爬橡，并不能保證瀏覽器自身沒有安全漏洞治唤。使用驗(yàn)證 Referer 值的方法，就是把安全性都依賴于第三方（即瀏覽器）來保障糙申，從理論上來講宾添，這樣并不安全。事實(shí)上柜裸，對(duì)于某些瀏覽器缕陕，比如 IE6 或 FF2，目前已經(jīng)有一些方法可以篡改 Referer 值粘室。如果 bank.example 網(wǎng)站支持 IE6 瀏覽器榄檬，黑客完全可以把用戶瀏覽器的 Referer 值設(shè)為以 bank.example 域名開頭的地址，這樣就可以通過驗(yàn)證衔统，從而進(jìn)行 CSRF 攻擊鹿榜。
即便是使用最新的瀏覽器，黑客無法篡改 Referer 值锦爵，這種方法仍然有問題舱殿。因?yàn)?Referer 值會(huì)記錄下用戶的訪問來源，有些用戶認(rèn)為這樣會(huì)侵犯到他們自己的隱私權(quán)险掀，特別是有些組織擔(dān)心 Referer 值會(huì)把組織內(nèi)網(wǎng)中的某些信息泄露到外網(wǎng)中沪袭。因此，用戶自己可以設(shè)置瀏覽器使其在發(fā)送請(qǐng)求時(shí)不再提供 Referer樟氢。當(dāng)他們正常訪問銀行網(wǎng)站時(shí)冈绊，網(wǎng)站會(huì)因?yàn)檎?qǐng)求沒有 Referer 值而認(rèn)為是 CSRF 攻擊，拒絕合法用戶的訪問埠啃。 - 請(qǐng)求地址中添加 token 并驗(yàn)證
CSRF 攻擊之所以能夠成功死宣，是因?yàn)楹诳涂梢酝耆珎卧煊脩舻恼?qǐng)求，該請(qǐng)求中所有的用戶驗(yàn)證信息都是存在于 cookie 中碴开，因此黑客可以在不知道這些驗(yàn)證信息的情況下直接利用用戶自己的 cookie 來通過安全驗(yàn)證毅该。要抵御 CSRF博秫，關(guān)鍵在于在請(qǐng)求中放入黑客所不能偽造的信息，并且該信息不存在于 cookie 之中眶掌〉灿可以在 HTTP 請(qǐng)求中以參數(shù)的形式加入一個(gè)隨機(jī)產(chǎn)生的 token，并在服務(wù)器端建立一個(gè)攔截器來驗(yàn)證這個(gè) token朴爬，如果請(qǐng)求中沒有 token 或者 token 內(nèi)容不正確即寒，則認(rèn)為可能是 CSRF 攻擊而拒絕該請(qǐng)求。
這種方法要比檢查 Referer 要安全一些寝殴，token 可以在用戶登陸后產(chǎn)生并放于 session 之中蒿叠，然后在每次請(qǐng)求時(shí)把 token 從 session 中拿出明垢，與請(qǐng)求中的 token 進(jìn)行比對(duì)蚣常，但這種方法的難點(diǎn)在于如何把 token 以參數(shù)的形式加入請(qǐng)求。對(duì)于 GET 請(qǐng)求痊银，token 將附在請(qǐng)求地址之后抵蚊，這樣 URL 就變成 http://url?csrftoken=tokenvalue。 而對(duì)于 POST 請(qǐng)求來說溯革，要在 form 的最后加上 <input type=”hidden” name=”csrftoken” value=”tokenvalue”/>贞绳，這樣就把 token 以參數(shù)的形式加入請(qǐng)求了。但是致稀，在一個(gè)網(wǎng)站中冈闭，可以接受請(qǐng)求的地方非常多，要對(duì)于每一個(gè)請(qǐng)求都加上 token 是很麻煩的抖单，并且很容易漏掉萎攒，通常使用的方法就是在每次頁面加載時(shí)，使用 JavaScript 遍歷整個(gè) dom 樹矛绘，對(duì)于 dom 中所有的 a 和 form 標(biāo)簽后加入 token耍休。這樣可以解決大部分的請(qǐng)求，但是對(duì)于在頁面加載之后動(dòng)態(tài)生成的 html 代碼货矮，這種方法就沒有作用羊精，還需要程序員在編碼時(shí)手動(dòng)添加 token。
該方法還有一個(gè)缺點(diǎn)是難以保證 token 本身的安全囚玫。特別是在一些論壇之類支持用戶自己發(fā)表內(nèi)容的網(wǎng)站喧锦，黑客可以在上面發(fā)布自己個(gè)人網(wǎng)站的地址。由于系統(tǒng)也會(huì)在這個(gè)地址后面加上 token抓督，黑客可以在自己的網(wǎng)站上得到這個(gè) token燃少，并馬上就可以發(fā)動(dòng) CSRF 攻擊。為了避免這一點(diǎn)本昏，系統(tǒng)可以在添加 token 的時(shí)候增加一個(gè)判斷供汛，如果這個(gè)鏈接是鏈到自己本站的，就在后面添加 token，如果是通向外網(wǎng)則不加怔昨。不過雀久，即使這個(gè) csrftoken 不以參數(shù)的形式附加在請(qǐng)求之中，黑客的網(wǎng)站也同樣可以通過 Referer 來得到這個(gè) token 值以發(fā)動(dòng) CSRF 攻擊趁舀。這也是一些用戶喜歡手動(dòng)關(guān)閉瀏覽器 Referer 功能的原因赖捌。 - 在 HTTP 頭中自定義屬性并驗(yàn)證
這種方法也是使用 token 并進(jìn)行驗(yàn)證，和上一種方法不同的是矮烹，這里并不是把 token 以參數(shù)的形式置于 HTTP 請(qǐng)求之中越庇，而是把它放到 HTTP 頭中自定義的屬性里。通過 XMLHttpRequest 這個(gè)類奉狈，可以一次性給所有該類請(qǐng)求加上 csrftoken 這個(gè) HTTP 頭屬性卤唉，并把 token 值放入其中。這樣解決了上種方法在請(qǐng)求中加入 token 的不便仁期，同時(shí)桑驱，通過 XMLHttpRequest 請(qǐng)求的地址不會(huì)被記錄到瀏覽器的地址欄，也不用擔(dān)心 token 會(huì)透過 Referer 泄露到其他網(wǎng)站中去跛蛋。
然而這種方法的局限性非常大熬的。XMLHttpRequest 請(qǐng)求通常用于 Ajax 方法中對(duì)于頁面局部的異步刷新，并非所有的請(qǐng)求都適合用這個(gè)類來發(fā)起赊级，而且通過該類請(qǐng)求得到的頁面不能被瀏覽器所記錄下押框，從而進(jìn)行前進(jìn)，后退理逊，刷新橡伞，收藏等操作，給用戶帶來不便挡鞍。另外骑歹，對(duì)于沒有進(jìn)行 CSRF 防護(hù)的遺留系統(tǒng)來說，要采用這種方法來進(jìn)行防護(hù)墨微，要把所有請(qǐng)求都改為 XMLHttpRequest 請(qǐng)求道媚，這樣幾乎是要重寫整個(gè)網(wǎng)站，這代價(jià)無疑是不能接受的翘县。
