form表單有什么作用？有哪些常用的input 標(biāo)簽见转，分別有什么作用？
- 作用:form表單提交的方式向服務(wù)器發(fā)送數(shù)據(jù)
- 常見的input標(biāo)簽
- text
<label for="input_username">用戶名：</label> <input id="input_username" name="username" type="text" placeholder="輸入用戶名" autofocus/>
<!--
text 用于輸入一行文字 比如說輸入姓名
placeholder是沒有輸入是顯示的提示文字召夹，不是真實(shí)的賦值宝当，一旦有輸入值或者輸入時(shí)placeholder隱藏顯示
autofocus 用來指定聚焦元素
-->
- password
<label for="input_pass">密碼：</label> <input id="input_pass" name="password" type="password" placeholder="輸入密碼"/>
<!--
password 用于輸入密碼
pass world元素輸入值會(huì)顯示成黑點(diǎn)
for 可以把描述元素與輸入元素通過id綁定到一起审胚，點(diǎn)擊描述時(shí)聚焦到相對應(yīng)的輸入框
-->
- radio 單選框
<label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" />
<br/>
<label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" />
<br/>
<label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
<!--
radio 是單選框 每組只能選擇一個(gè) 那么表示分組 value表示單選框的值
-->
- checkbox 復(fù)選框
<h3>復(fù)選框</h3>
<label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" />
<br/>
<label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
<br/>
<label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" />
<br/>
<!--
checkbox 是復(fù)選框 每組可以選擇多個(gè) name用于分組 value 選定按鈕的值 checked 代表處于默認(rèn)選中狀態(tài)
-->
- file
<h3>File</h3>
<input type="file" accept="image/gif, image/jpeg"/>
<br/><br/>
<!--
file用于選擇文件 accept參數(shù)可以制定文件類型
-->
- image 按鈕
<h3>image 按鈕</h3>
<input type="image" src="xxx.jpg" alt="Submit Form"/>
<br/><br/>
<!--
圖片按鈕和submit提交按鈕一樣匈勋，點(diǎn)擊可以提交表單，當(dāng)然也可以作為普通按鈕使用膳叨。
-->
- 隱藏域
<h3>隱藏域</h3>
- radio 單選框
<label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" /> <br/> <label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" /> <br/> <label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
>>- checkbox 復(fù)選框
<h3>復(fù)選框</h3> <label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" /> <br/> <label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked /> <br/> <label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" /> <br/>
>>- file
<h3>File</h3> <input type="file" accept="image/gif, image/jpeg"/> <br/><br/>
>> - image 按鈕
<h3>image 按鈕</h3> <input type="image" src="xxx.jpg" alt="Submit Form"/> <br/><br/>
>> - 隱藏域
<h3>隱藏域</h3>
<input type="hidden" value="xxx" />
- select 下拉菜單
<h3>下拉菜單</h3>
<select id="input_select">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<!--
下拉菜單點(diǎn)擊會(huì)顯示下拉框
select代表默認(rèn)選中值
下拉菜單直接是類型select與元素option 不再是input標(biāo)簽用type指定出現(xiàn)
-->
- textarea 多行輸入框 用于輸入大量文字
<h3>多行文本</h3>
<textarea cols="60" rows="5">123</textarea>
<br/><br/>
- button submit reset
<input type="button" value="Buttom" /> <!-- 點(diǎn)擊不會(huì)提交也不會(huì)刷新 -->
<input type="submit" value="Submit" /> <!-- 點(diǎn)擊會(huì)提交數(shù)據(jù) -->
<input type="reset" value="Reset" /> <!-- 點(diǎn)擊會(huì)重置所有input標(biāo)簽 -->
form標(biāo)簽屬性
form標(biāo)簽是表單的外殼洽洁，主要有四個(gè)屬性
action： 表單提交的地址
method：提交保單的方法
target：在何處打開action
enctype:
application/x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認(rèn)）
text/plain：空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼
multipart/form-data：使用包含文件上傳控件的表單時(shí)菲嘴，必須使用該值
post 和 get 方式的區(qū)別饿自？
get
表單數(shù)據(jù)會(huì)被encodeURIComponent后以參數(shù)形式name1=value1&name2=value2 附帶在 url？后面發(fā)送給服務(wù)器龄坪，并在url中顯示出來昭雌；
post
<!--
content-type 默認(rèn)"application/x-www-form-urlencoded" 對表單數(shù)據(jù)進(jìn)行編碼，
數(shù)據(jù)字段以鍵值對在 http請求體中發(fā)送給服務(wù)器健田；
如果 enctype 屬性值為"multipart/form-data"烛卧，
則以消息的形式發(fā)送給服務(wù)器。
-->
post和get都可以用于上傳數(shù)據(jù)
post相對于get要安全一些
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
>> - textarea 多行輸入框 用于輸入大量文字
<h3>多行文本</h3>
<textarea cols="60" rows="5">123</textarea>
>> - button submit reset
<input type="button" value="Buttom" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
####form標(biāo)簽屬性 > form標(biāo)簽是表單的外殼妓局，主要有四個(gè)屬性 action： 表單提交的地址 method：提交保單的方法 target：在何處打開action enctype: application/x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認(rèn)） text/plain：空格轉(zhuǎn)換為 "+" 加號总放，但不對特殊字符編碼 multipart/form-data：使用包含文件上傳控件的表單時(shí)，必須使用該值 ####post 和 get 方式的區(qū)別好爬？ >get
表單數(shù)據(jù)會(huì)被encodeURIComponent后以參數(shù)形式name1=value1&name2=value2 附帶在 url局雄？后面發(fā)送給服務(wù)器，并在url中顯示出來存炮；
> --- >post
```
>---
>
>>post和get都可以用于上傳數(shù)據(jù)
post相對于get要安全一些
post可以傳輸?shù)淖畲髷?shù)據(jù)量要大一些炬搭，數(shù)據(jù)量比較大時(shí)post無法保證數(shù)據(jù)的完整性
post一般用于上傳數(shù)據(jù)
get一般用于請求數(shù)據(jù)時(shí)上傳一些與安全無關(guān)的參數(shù)
input中name的作用
name可以用于單選框與復(fù)選框的分組 也是傳遞變量時(shí)的變量名 只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。
radio 如何 分組?
相同name的radio元素再同一組
placeholder 屬性有什么作用?
提示用戶進(jìn)行輸入
placeholder是沒有輸入是顯示的提示文字僵蛛，不是真實(shí)的賦值尚蝌，一旦有輸入值或者輸入時(shí)placeholder隱藏顯示
type=hidden隱藏域有什么作用?
傳遞一個(gè)校驗(yàn)值迎变，以便于后端做安全驗(yàn)證
