1.form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？

表單是一個(gè)包含表單元素的區(qū)域，用來(lái)收集用戶輸入的內(nèi)容并提交。

所有用于提交數(shù)據(jù)的表單元素必須要有name屬性，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)。

使用方式

<form action="#" method="post">
    <div class="name">
        <label for="name">姓名：</label>
        <input id="name" type="text" name="name" placeholder="用戶名">
    </div>
    <input type="submit" value="提交">
</form>

action：表單提交的后臺(tái)處理地址url
method：提交方式，可以是get或post

常用的input標(biāo)簽及作用

    <!-- 單行的文本輸入框 -->
    <input type="text"> 

    <!-- 密碼輸入框 -->
    <input type="password"> 

    <!-- 單選按鈕 -->
    <input type="radio"> 

    <!-- 復(fù)選框 -->
    <input type="checkbox"> 

    <!-- 按鈕 -->
    <input type="button"> 

    <!-- 提交按鈕 -->
    <input type="submit"> 

    <!-- 重置按鈕 -->
    <input type="reset"> 

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

• 傳輸方式的不同
  GET請(qǐng)求的數(shù)據(jù)會(huì)附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD
  POST把提交的數(shù)據(jù)則放置在是HTTP包的包體中。

• 數(shù)據(jù)大小的限制不同
  GET是通過(guò)URL提交數(shù)據(jù)，HTTP協(xié)議規(guī)范沒(méi)有對(duì)URL長(zhǎng)度進(jìn)行限制，但是特定的瀏覽器及服務(wù)器對(duì)它有所限制，IE對(duì)URL長(zhǎng)度的限制是2083字節(jié)(2K+35)。對(duì)于其他瀏覽器，如Netscape、FireFox等，理論上沒(méi)有長(zhǎng)度限制，其限制取決于操作系統(tǒng)的支持。
  理論上講，POST是沒(méi)有大小限制的，HTTP協(xié)議規(guī)范也沒(méi)有進(jìn)行大小限制。

• 安全性方面也有所差別
  POST的安全性要比GET的安全性高。比如：通過(guò)GET提交數(shù)據(jù)，用戶名和密碼將明文出現(xiàn)在URL上，因?yàn)榈卿涰?yè)面有可能被瀏覽器緩存，其他人查看瀏覽器的歷史紀(jì)錄，那么別人就可以拿到你的賬號(hào)和密碼了，除此之外，使用GET提交數(shù)據(jù)還可能會(huì)造成Cross-site request forgery攻擊。

• 簡(jiǎn)單總結(jié)一下
  Get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請(qǐng)求，而Post是向服務(wù)器提交數(shù)據(jù)的一種請(qǐng)求，在FORM（表單）中，Method默認(rèn)為"GET"，實(shí)質(zhì)上，GET和POST只是發(fā)送機(jī)制不同，并不是一個(gè)取一個(gè)發(fā)！

3.在input里，name 有什么作用？

<form action="#" method="post">
    <div class="name">
        <label for="name">姓名：</label>
        <input id="name" type="text" name="name" placeholder="用戶名">
    </div>

• name 屬性規(guī)定 input 元素的名稱。

• name 屬性用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，
  指定了表單數(shù)據(jù)提交時(shí)各個(gè)數(shù)據(jù)的key，如下圖：

  
  
  image.png

4.radio 如何 分組?

表單中的單選框radio，name相同的是一組，如下：

  <div class="sex">
        <label for="">性別</label>
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
    </div>

5. placeholder 屬性有什么作用?

文本框中的灰色提示，當(dāng)輸入文字后，會(huì)自動(dòng)消失,如下圖：

image.png

6.type=hidden隱藏域有什么作用? 舉例說(shuō)明

隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。

基本語(yǔ)法

  <input type="hidden" name="hide_name" value="value">

作用

1.防止CSRF攻擊。

2.隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器。

3.有些時(shí)候我們要給用戶一信息，讓他在提交表單時(shí)提交上來(lái)以確定用戶身份，如sessionkey，等等．當(dāng)然這些東西也能用cookie實(shí)現(xiàn)，但使用隱藏域就簡(jiǎn)單的多了．而且不會(huì)有瀏覽器不支持，用戶禁用cookie的煩惱。

4.有些時(shí)候一個(gè)form里有多個(gè)提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個(gè)按鈕提交上來(lái)的呢？我們就可以寫(xiě)一個(gè)隱藏域，然后在每一個(gè)按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會(huì)知道用戶是按的那個(gè)按鈕提交上來(lái)的。

5.有時(shí)候一個(gè)網(wǎng)頁(yè)中有多個(gè)form，我們知道多個(gè)form是不能同時(shí)提交的，但有時(shí)這些form確實(shí)相互作用，我們就可以在form中添加隱藏域來(lái)使它們聯(lián)系起來(lái)。

6.javascript不支持全局變量，但有時(shí)我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會(huì)丟失了。

7.還有個(gè)例子，比如按一個(gè)按鈕彈出四個(gè)小窗口，當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動(dòng)關(guān)閉．可是IE不支持小窗口相互調(diào)用，所以只有在父窗口寫(xiě)個(gè)隱藏域，當(dāng)小窗口看到那個(gè)隱藏域的值是close時(shí)就自己關(guān)掉