1.動手

form 表單
table 表格

2. <form>表單元素

1） 簡述：
<form>元素是塊級元素,其開始標(biāo)簽和結(jié)束標(biāo)簽都不能省略，其中可以包含<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>等表單元素。

其中：

• <fieldset>用于組合表單數(shù)據(jù)，每個<fieleset></fieleset>是一組。
• <legend>元素為<fieldset>元素定義標(biāo)題。
• <input>是最重要的表單元素，有很多不同的type屬性，input元素需要定義type，name，value，或者checked，其中，每個輸入字段必須設(shè)置一個name屬性，checked屬性用于設(shè)置按鈕的預(yù)選項。
• <select>元素定義下拉列表，<option>元素定義下拉列表的選項，列表通常會把首個選項顯示為被選選項，但可以通過selected定義預(yù)定義選項。
• <textarea>元素定義多行輸入字段（文本域），【rows="10" cols="30"】的意思是定義一個30個字符寬，10行高的文本區(qū)。
• <button>元素定義可點擊的按鈕，請示中為按鈕規(guī)定type屬性。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值。IE將提交<button>與<button/>之間的文本，而其他瀏覽器將提交value屬性的內(nèi)容。應(yīng)用<input>元素創(chuàng)建按鈕。
• <datalist>為<input>預(yù)定義選項列表，起到提示作用。用戶會在他們輸入數(shù)據(jù)時看到預(yù)定義選項的下拉列表。

注意：<input>元素的list屬性值必須與<datalist>元素的id屬性值相同。Safari或≤IE9不支持datalist標(biāo)簽。

2） 作用：
HTML<form>元素表示了文檔中的一個區(qū)域，這個區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息。

3） 常用屬性：

• action屬性制訂了某個服務(wù)器腳本來處理被提交的表單，如果省略action屬性，則action會被設(shè)置為當(dāng)前頁面。
• method屬性規(guī)定了提交表單的http方法，默認(rèn)GET，GET最適合少量數(shù)據(jù)且不需要保密的提交，使用GET時表單數(shù)據(jù)在頁面地址欄中是可見的。設(shè)置為POST，安全性更佳，因為在頁面地址欄中被提交的數(shù)據(jù)不可見。
• target屬性值是一個名字或關(guān)鍵字，規(guī)定在哪里打開新頁面，默認(rèn)_self,一般設(shè)置為_blank。
  _self: 在當(dāng)前HTML4或HTML5文檔頁面重新加載返回值。這個是默認(rèn)值。譯注：也就是說如果這個文檔在一個frame中的話，self是在當(dāng)前frame（document）中重新加載的，而不是整個頁面（window）。
  _blank: 以新的HTML4或HTML5文檔窗口加載返回值。
  _parent: 在父級的frame中以HTML4或HTML5文檔形式加載返回值，如果沒有父級的frame，行為和_self一致。
  _top: 如果是HTML 4文檔: 清空當(dāng)前文檔，加載返回內(nèi)容；HTML5: 在當(dāng)前文檔的最高級內(nèi)加載返回值，如果沒有父級，和_self的行為一致。
  iframename: 返回值在指定frame中加載。
  在HTML5中這個值可以被 <button> 或者 <input> 元素中的 formtarget 屬性重載（覆蓋）。
• accept-charset屬性規(guī)定被提交表單中使用的字符集，默認(rèn)為頁面字符集。
• enctype屬性規(guī)定被提交數(shù)據(jù)的編碼。
• autocomplete屬性規(guī)定瀏覽器應(yīng)自動完成表單，默認(rèn)為開啟“on”。
• novalidate屬性規(guī)定瀏覽器不驗證表單。

3. input標(biāo)簽常用屬性及作用

1）簡述：
<input>標(biāo)簽用于搜集用戶信息，根據(jù)不同的type屬性值，輸入字段擁有很多種形式，可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕等。

2）常用屬性及作用：

type屬性：規(guī)定input元素的類型，可設(shè)置值如下：

• text：定義共文本輸入的單行字段，默認(rèn)值。
• password：定義密碼字段，字段中的字符會做掩碼處理，顯示為星號或?qū)嵭娜Α?/li>
• submit：定義提交表單數(shù)據(jù)至表單處理程序（即form元素的action屬性值）的按鈕。如果省略了提交按鈕的value屬性，那么該按鈕將獲得默認(rèn)文本，一般是“提交”這兩個字。
• reset：定義重設(shè)按鈕。
• radio：定義單選按鈕。
• checkbox：定義復(fù)選框，即多選。
• button：定義按鈕。
• hidden：定義隱藏輸入字段。
• number：用于應(yīng)該包含數(shù)字值的輸入字段，可自定義數(shù)字限制。
• data: 用于應(yīng)該包含日期的輸入字段,日期也可定義輸入限制。
• color：用于應(yīng)該包含顏色的輸入字段。
• range：用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段，可用min、max、step、value屬性規(guī)定限制。
• month：選擇月份和年份。
• week：選擇周和年。
• time：選擇時間-無時區(qū)。
• datatime：選擇日期與時間-有時區(qū)。
• datetime-local：選擇日期和時間-無時區(qū)。
• email：用于應(yīng)該包含電子郵件地址的輸入字段，若瀏覽器支持，能夠在被提交時自動對電子郵件地址進(jìn)行驗證，某些智能手機會識別email類型，并在鍵盤增加".com" 以匹配電子郵件輸入。
• search：用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）。
• tel：用于應(yīng)該包含電話號碼的輸入字段，目前只有safari 8支持。
• url：用于應(yīng)該包含URL地址的輸入字段，若瀏覽器支持，能夠在提交時自動驗證url字符，某些智能手機識別url類型，并向鍵盤添加".com"以匹配url輸入。

name：定義input元素的名稱。

value：規(guī)定字段的初始值。

readonly：規(guī)定輸入字段只讀。readonly="readonly"。

disabled：規(guī)定輸入字段是禁用的，被禁用的元素是不可用不可點擊并且不可提交。disabled="disabled"。

size：規(guī)定輸入字段的尺寸，如果size="5"，那么一行中可輸入無數(shù)個字符但一行中只有5個可見字符。

maxlength：規(guī)定輸入字段允許的最大長度。如果maxlength="5"，那么一行中最多可輸入5個字符。

placeholder：規(guī)定幫助用戶填寫輸入字段的提示（樣本值或有關(guān)格式的簡短描述），該提示會在用戶輸入值之前顯示在輸入字段中。

list：引用包含輸入字段的與定義選項的datalist。

src：定義以提交按鈕形式顯示的圖像的 URL。

step：規(guī)定<input>元素的合法數(shù)字間隔,如果step="3"，則合法數(shù)字應(yīng)該是-3、0、3、6、等。只能是3的整數(shù)倍。可與max以及min屬性一同使用，來創(chuàng)建合法值的范圍。

4. post和get方式的區(qū)別

• GET
  用GET方法提交的表單數(shù)據(jù)只經(jīng)過了簡單的編碼，同時它將作為URL的一部分向服務(wù)器發(fā)送，URL具有長度限制，即GET方式提交的數(shù)據(jù)大小有限制，如<Http://localhost/login.php?username=aa&password=1234>，很容易辨認(rèn)出表單提交的內(nèi)容，因此，如果使用GET方法來提交表單數(shù)據(jù)就存在著安全隱患。
• POST
  是GET的一個替代方法，很適合提交表單數(shù)據(jù)，尤其是大批量的數(shù)據(jù)。POST方法克服了GET方法的一些缺點。通過POST方法提交表單數(shù)據(jù)時，數(shù)據(jù)不是作為URL請求的一部分而是作為標(biāo)準(zhǔn)數(shù)據(jù)放在HTTP的body中傳送給Web服務(wù)器，這就克服了GET方法中的信息無法保密和數(shù)據(jù)量太小的缺點。因此，出于安全的考慮以及對用戶隱私的尊重，通常表單提交時采用POST方法。
• 比較

5. input中name的作用

name屬性規(guī)定input元素的名稱，用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識，或是在客戶端通過javascript引用表單數(shù)據(jù)。

注意：瀏覽器會根據(jù)name來設(shè)定發(fā)送到服務(wù)器的request，在表單的接收頁面只接收有name的元素，即只有設(shè)置了name屬性的表單元素才能在提交表單時傳遞它們的值，賦id的元素通過表單是接收不到值的。

6. radio如何分組

<input type="radio" />定義單選按鈕。radio使用name屬性來分組，所有name屬性相同的radio使用時其中只有一個會被選中。

<input type="radio" value="male" name="sex"/>男
<input type="radio" value="female" name="sex"/>女

以上兩個radio就是一組。

7. placeholder屬性的作用?

placeholder:規(guī)定用于描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡短描述）。該提示會在用戶輸入值之前顯示在輸入字段中。適用于如下輸入類型：<input type="text|search|url|tel|email|password">。

<!DOCTYPE HTML>
<html>
<body>
<h1>html 5為input元素新增的屬性placeholder</h1>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>
</body>
</html>

僅僅是提示值，至于是否按照提示寫是另一回事。

圖片說明文字

8. 舉例說明type=hidden隱藏域的作用?

<input type="hidden" />定義隱藏字段。隱藏字段對于用戶是不可見的，通常會存儲一個默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。
作用：

• 收集或發(fā)送信息以被處理表單的程序所使用，提交表單時隱藏域的信息也會被一起發(fā)送到服務(wù)器。
• 所有瀏覽器都支持隱藏域，操作方便簡單、對長度限制不大，且避免了用戶禁用cookie的煩惱。
• 一個網(wǎng)頁有多個form，而多個form不能同時提交但他們確實相互作用，這種情況下我們可以在form中添加隱藏域使它們聯(lián)系起來。

<html>
    <body>
    <form action="/example/html/form_action.asp" method="get">
    Email: <input type="text" name="email" /><br />
    <input type="hidden" name="country" value="China" />
    <input type="submit" value="Submit" />
    </form>
    </body>
</html>

輸入email地址dolby.dot@gmail.com，單擊Sumbit按鈕，輸入的內(nèi)容會發(fā)送到服務(wù)器上名為form_action.asp的頁面，服務(wù)器處理了我的輸入并返回結(jié)果"email=dolby.dot%40gmail.com&country=China"。

9. html5語義化新標(biāo)簽

• <header>：定義文檔或節(jié)的頁眉
• <nav>：定義導(dǎo)航鏈接的容器
• <section>：定義文檔中的節(jié)
• <article>：定義獨立的自包含文章
• <aside>：定義內(nèi)容之外的內(nèi)容（比如側(cè)欄）
• <footer>：定義文檔或節(jié)的頁腳
• <details>：定義額外的細(xì)節(jié)
• <summary>：定義details> 的標(biāo)題

10. CSRF攻擊是什么，如何防范？

簡介：
CSRF（Cross-Site Request Forgery，跨站點偽造請求）是一種網(wǎng)絡(luò)攻擊方式，該攻擊可以在受害者毫不知情的情況下以受害者名義偽造請求發(fā)送給受攻擊站點，從而在未授權(quán)的情況下執(zhí)行在權(quán)限保護(hù)之下的操作，具有很大的危害性。
可以這樣理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求，對服務(wù)器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發(fā)送郵件、發(fā)消息，盜取你的賬號，添加系統(tǒng)管理員，甚至于購買商品、虛擬貨幣轉(zhuǎn)賬等。

原理：
SRF攻擊原理如圖所示。其中Web A為存在CSRF漏洞的網(wǎng)站，Web B為攻擊者構(gòu)建的惡意網(wǎng)站，User C為Web A網(wǎng)站的合法用戶。

• 用戶C打開瀏覽器，訪問受信任網(wǎng)站A，輸入用戶名和密碼請求登錄網(wǎng)站A；
• 在用戶信息通過驗證后，網(wǎng)站A產(chǎn)生Cookie信息并返回給瀏覽器，此時用戶登錄網(wǎng)站A成功，可以正常發(fā)送請求到網(wǎng)站A；
• 用戶未退出網(wǎng)站A之前，在同一瀏覽器中，打開一個TAB頁訪問網(wǎng)站B；
• 網(wǎng)站B接收到用戶請求后，返回一些攻擊性代碼，并發(fā)出一個請求要求訪問第三方站點A；
• 瀏覽器在接收到這些攻擊性代碼后，根據(jù)網(wǎng)站B的請求，在用戶不知情的情況下攜帶Cookie信息，向網(wǎng)站A發(fā)出請求。網(wǎng)站A并不知道該請求其實是由B發(fā)起的，所以會根據(jù)用戶C的Cookie信息以C的權(quán)限處理該請求，導(dǎo)致來自網(wǎng)站B的惡意代碼被執(zhí)行。

防御手段：
養(yǎng)成良好上網(wǎng)習(xí)慣，不要輕易點擊鏈接或圖片，及時退出長時間不使用的已登錄賬戶，安裝防護(hù)軟件并及時更新。