form表單的作用

收集用戶提交的數(shù)據(jù)并提交到后臺

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

1.type="text"，用于輸入普通文本
2.type="password"，用于輸入密碼
3.type="checkbox"，復(fù)選框
4.type="radio"，單選按鈕
5.type="textarea"，可用于輸入多行文本
6.type="file"，用于傳送文件
7.type="hidden"，可以用于暫存數(shù)據(jù)和安全性校驗(yàn)
8."button","submit","reset"，依次為自定義功能按鈕，提交按鈕和重置按鈕

post和get的區(qū)別

1.提交數(shù)據(jù)時(shí)post不會改變當(dāng)前url，不會暴露提交的數(shù)據(jù)，而get會在url中顯示提交的數(shù)據(jù)
2.post提交數(shù)據(jù)容量遠(yuǎn)大于get
3.get傳輸?shù)臄?shù)據(jù)在瀏覽器記錄中可被發(fā)現(xiàn)

input中name的作用

可以標(biāo)識每一段被提交的數(shù)據(jù)

radio如何分組

采用相同的name屬性

placeholder的作用

占位，提示用戶輸入，不會影響用戶輸入也不會影響數(shù)據(jù)提交

type="hidden"的作用

提交一些不需要或者不想被用戶看到的參數(shù)，或者存放臨時(shí)值
也可以用于防御CSRF攻擊，例如在表單中添加特定數(shù)值，在服務(wù)器中進(jìn)行認(rèn)證，可以避免絕大多數(shù)的CSRF攻擊

html表單的簡單用法

HTML表單是一個(gè)包含表單元素的區(qū)域， 表單使用<form> 標(biāo)簽創(chuàng)建。表單能夠包含 <a target="_blank" title="HTML input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
1.表單的屬性
action：規(guī)定當(dāng)提交表單時(shí)，向何處發(fā)送表單數(shù)據(jù)
method：該屬性定義瀏覽器將表單中的數(shù)據(jù)提交給服務(wù)器處理程序的方式。關(guān)于method的取值，最常用的是get和post
target：該屬性規(guī)定在何處顯示action屬性中指定的URL所返回的結(jié)果
enctype：規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼
2.表單中包含的元素
除了之前提到的各種input標(biāo)簽外還包括復(fù)選框select及永福劃分區(qū)域的fieldset等
3.使用演示（課程任務(wù)中的第8項(xiàng)）

<form>
   <div class="username">
      <label for="username">姓名</label>
      <input type="text" name="username">
   </div>
   <div class="password">
      <label for="password">密碼</label>
      <input type="password" name="password">
   </div>
   <div class="sex">
      <label>性別</label>
      <input type="radio" name="sex" value="male">男
      <input type="radio" name="sex" value="female">女  
    </div>
    <div class="sex orientation">
      <label>取向</label>
      <input type="radio" name="orientation" value="male">男
      <input type="radio" name="orientation" value="female">女  
    </div>
    <div class="hobby">
      <label>愛好</label>
      <input type="checkbox" name="hobby" value="dota">dota
      <input type="checkbox" name="hobby" value="travel">旅游
      <input type="checkbox" name="hobby" value="pets">寵物
    </div>
    <div class="discuss">
      <textarea placeholder="ddd"></textarea>
    </div>
    <div class="car">
      <label>我的car</label>
      <select name="cars">
        <option value="wanjuche">玩具車</option>
        <option value="yaokongche" selected>遙控車</option>
      </select>
    </div>
    <input type="submit">
</form>

運(yùn)行結(jié)果點(diǎn)這