form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
- <form> 標簽用于為用戶輸入創(chuàng)建 HTML 表單，表單能夠包含文本字段、復選框、單選框、提交按鈕等等，表單用于向服務器傳輸數(shù)據(jù)。
- type=text
輸入類型是text，這是我們見的最多也是使用最多的，比如登陸輸入用戶名，注冊輸入電話號碼，電子郵件， 家庭住址等等，是Input的默認類型。
type=password
密碼輸入框，當在此輸入框輸入信息時顯示為保密字符。
type=file
提供了一個文件目錄輸入的平臺。
type=hidden
隱藏域，如果一個非常重要的信息需要被提交到下一頁，但又不能或者無法明示的時候。
type=button
按鈕，要讓按鈕跳轉(zhuǎn)到某個頁面上還需要加入寫JavaScript代碼。
type=checkbox
多選框，常見于注冊時選擇愛好、性格、等信息。
type=radio
單選框，出現(xiàn)在多選一的頁面設(shè)定中。
type=image
將圖片作為提交按鈕。
type=submit
提交按鈕，將Form中所有內(nèi)容進行提交action頁處理。
type=reset
充值按鈕，清空表單所有填寫內(nèi)容。
post 和 get 方式的區(qū)別？
- get安全性非常低，post安全性較高。
- get是從服務器上獲取數(shù)據(jù)，post是向服務器傳送數(shù)據(jù)。
- get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應，在URL中可以看到。post是通過HTTP的post機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML的header內(nèi)一起傳送到action屬性所指的URL地址。用戶看不到這個過程。
- get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認為不受限制。
- 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數(shù)據(jù)。
在input里，name 有什么作用？
name 屬性規(guī)定 input 元素的名稱。name 屬性用于對提交到服務器后的表單數(shù)據(jù)進行標識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。
radio 如何 分組?
在input中設(shè)置name屬性，name相同的位同一個組。
placeholder 屬性有什么作用?
提供可描述輸入字段預期值的提示信息。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
type=hidden隱藏域有什么作用? 舉例說明
在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。隱藏域在頁面中對于用戶是不可見的，但當用戶提交信息的時候，隱藏域的信息也被一起發(fā)送到服務器。例如：在提交表單信息時，隱藏域的數(shù)據(jù)可以驗證用戶身份，若隱藏域信息與后臺數(shù)據(jù)一致，則通過身份驗證。
HTML 表單的用法
表單的定義
表單是一個包含表單元素的區(qū)域。表單元素允許用戶在表單中輸入信息的元素。表單使用表單標簽(<form>)定義。HTML中的表單是HTML頁面與瀏覽器端實現(xiàn)交互的重要手段。利用表單，服務器可以收集客戶端瀏覽器提交的相關(guān)信息，比如輸入的密碼等等。
form標簽屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | 規(guī)定能夠通過文件上傳進行提交的文件類型，HTML 5 中不支持 |
| accept-charset | charset_list | 規(guī)定服務器可處理的表單數(shù)據(jù)字符集 |
| action | URL | 規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù) |
| autocomplete | on/off | 規(guī)定表單是否應該啟用自動完成功能 |
| enctype | 見說明 | 規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據(jù)進行編碼 |
| method | get/post | 規(guī)定如何發(fā)送表單數(shù)據(jù) |
| name | form_name | 規(guī)定表單的名稱。 |
| novalidate | novalidate | 規(guī)定當提交表單時不對其進行驗證 |
| target | _blank/_self/_parent/_top/framename | 規(guī)定在何處打開 |
說明
enctype 屬性可能的值：
- application/x-www-form-urlencoded（在發(fā)送前編碼所有字符）
- multipart/form-data（不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值）
- text/plain（空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼）
常用的表單元素
- 文本域
<input type="text" name="text" value="" /> - 密碼域
<input type="password" name="text" value="" /> - 單選按鈕
男人:<input type="radio" name="sex" value="male" /> Male
<br />
女人：<input type="radio" name="sex" value="female" /> Female
- 復選框
<input type="checkbox" name="check1" value="" /> - 按鈕
<input type="button" value="確認" /> - 重置按鈕
當點擊重置按鈕時，重置按鈕所在的表單將全部清空，而其他表單不受影響。
<input type="reset" value="重置" /> - 提交按鈕
當點擊提交按鈕時，瀏覽器將自動提交表單。
<input type="submit" value="提交" /> - 隱藏域
隱藏域在瀏覽器中并不顯示。
<input type="hidden" value="我是一個隱藏域" /> - 文件上傳域
<input type="file" value="" /> - 圖片按鈕
<input type="image" src="123.gif" /> - 下拉列表
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
- label
label 元素不會向用戶呈現(xiàn)任何特殊效果。設(shè)置for屬性，點擊label內(nèi)的文字也會觸發(fā)單選按鈕。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
- 文本區(qū)域
用戶可在此文本區(qū)域中寫文本。在一個文本區(qū)中，可輸入無限數(shù)量的文本。
<textarea cols="10" rows="10">我是一個文本區(qū)域</textarea>
form表單Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<form action="">
<div>
<label for="userName">姓名：</label>
<input type="text" id= "userName" name="userName" placeholder= "用戶名">
</div>
<div>
<label for="password">密碼：</label>
<input type="password" id= "password" name="password">
</div>
<div>
<label>性別：</label>
<input type="radio" id="male1" name="sex" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female1" name="sex" value="female">
<label for="female">女</label>
</div>
<div>
<label>取向：</label>
<input type="radio" id="male2" name="orientation" value="male">
<label for="male">男</label>
<input type="radio" id="female2" name="orientation" value="female">
<label for="female">女</label>
</div>
<div>
<label>愛好：</label>
<input type="checkbox" id="game" name="hobby">
<label for="game">游戲</label>
<input type="checkbox" id="tourism" name="hobby">
<label for="tourism">旅游</label>
<input type="checkbox" id="movies" name="hobby">
<label for="movies">電源</label>
</div>
<div>
<label>評論：</label>
<textarea name="comment" cols="30" rows="15" placeholder= "請輸入"></textarea>
</div>
<div>
<label>我的Car：</label>
<select name="myCar" id="myCar">
<option value="奔馳">奔馳</option>
<option value="寶馬">寶馬</option>
<option value="奧迪">奧迪</option>
</select>
<input type="submit">
</div>
</form>
</body>
</html>
