1.form標(biāo)簽簡介
- 網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)涣仿。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端勤庐，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
- 語法：
<form method="傳送方式" action="服務(wù)器文件"> - 詳解：
（1）<form> ：<form>標(biāo)簽是成對出現(xiàn)的好港，以<form>開始愉镰，以</form>結(jié)束。
（2）action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)钧汹。
（3）method ： 數(shù)據(jù)傳送的方式（get/post）丈探。 - 注意：所有表單控件（文本框、文本域拔莱、按鈕碗降、單選框隘竭、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上！）
2.method=get／method的區(qū)別
- 兩者的本質(zhì)區(qū)別在于：
（1）GET后退按鈕/刷新無害讼渊，POST數(shù)據(jù)會(huì)被重新提交（瀏覽器應(yīng)該告知用戶數(shù)據(jù)會(huì)被重新提交动看。
（2）GET書簽可收藏，POST為書簽不可收藏爪幻。
（3）GET能被緩存弧圆，POST不能緩存 。
（4）GET編碼類型application/x-www-form-url笔咽，POST編碼類型application/x-www-form-urlencoded 或 multipart/form-data搔预。為二進(jìn)制數(shù)據(jù)使用多重編碼。
（5）GET歷史參數(shù)保留在瀏覽器歷史中叶组。POST參數(shù)不會(huì)保存在瀏覽器歷史中拯田。
（6）GET對數(shù)據(jù)長度有限制，當(dāng)發(fā)送數(shù)據(jù)時(shí)甩十，GET 方法向 URL 添加數(shù)據(jù)船庇；URL 的長度是受限制的（URL 的最大長度是 2048 個(gè)字符）。POST無限制侣监。
（7）GET只允許 ASCII 字符鸭轮。POST沒有限制。也允許二進(jìn)制數(shù)據(jù)橄霉。
與 POST 相比窃爷，GET 的安全性較差，因?yàn)樗l(fā)送的數(shù)據(jù)是 URL 的一部分姓蜂。在發(fā)送密碼或其他敏感信息時(shí)絕不要使用 GET 按厘！POST 比 GET 更安全，因?yàn)閰?shù)不會(huì)被保存在瀏覽器歷史或 web 服務(wù)器日志中钱慢。（8）GET的數(shù)據(jù)在 URL 中對所有人都是可見的逮京。POST的數(shù)據(jù)不會(huì)顯示在 URL 中。 - 使用post的情況：
（1）如果表單正在更新數(shù)據(jù)束莫，或者包含敏感信息（例如密碼）懒棉。
（2）post安全性更加，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的览绿。 - 使用get的情況：
（1）如果表單的提交是被動(dòng)的（比如搜索引擎查詢）策严，沒有敏感信息。
（2）使用get時(shí)挟裂，表單數(shù)據(jù)在頁面地址中是可見的享钞。
（3）少量數(shù)據(jù)的提交
3.文本輸入框揍诽、密碼輸入框
- 當(dāng)用戶要在表單中鍵入字母诀蓉、數(shù)字等內(nèi)容時(shí)栗竖，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框渠啤。
- 語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
- 注意：
（1）type：
當(dāng)type="text"時(shí)狐肢，輸入框?yàn)槲谋据斎肟颍瑔涡休斎氩荒軗Q行;
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框沥曹，輸入的文本會(huì)變?yōu)閳A點(diǎn)份名。
（2）name：為文本框命名，以備后臺程序ASP 妓美、PHP使用僵腺。
（3）value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
4.文本域
- 當(dāng)用戶需要在表單中輸入大段文字時(shí)壶栋，需要用到文本輸入域辰如。
- 語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea> - 注意：
（1）<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始贵试，以</textarea>結(jié)束琉兜。
（2）cols ：多行輸入域的列數(shù)。
（3）rows ：多行輸入域的行數(shù)毙玻。
（4）在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值豌蟋。
5.使用單選框、復(fù)選框
- 在使用表單設(shè)計(jì)調(diào)查表時(shí)桑滩，為了減少用戶的操作梧疲，使用選擇框是一個(gè)好主意，html中有兩種選擇框运准，即單選框和復(fù)選框往声，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)戳吝，甚至全選浩销。
- 語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/> - 注意：
（1）type:
當(dāng) type="radio" 時(shí)，控件為單選框听哭。
當(dāng) type="checkbox" 時(shí)慢洋，控件為復(fù)選框。
（2）value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）陆盘。
（3）name：為控件命名普筹，以備后臺程序 ASP、PHP 使用隘马。
（4）checked：當(dāng)設(shè)置 checked="checked" 時(shí)太防，該選項(xiàng)被默認(rèn)選中。
6.如何使用下拉列表框
1.單選下拉列表框
- 下拉列表在網(wǎng)頁中也常會(huì)用到酸员，它可以有效的節(jié)省網(wǎng)頁空間蜒车。既可以單選讳嘱、又可以多選。
- 使用方法舉例：
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
- 詳解：
（1）value：<option value="向服務(wù)器提交的值">顯示的值</option>
（2）selected="selected"：設(shè)置selected="selected"屬性酿愧，則該選項(xiàng)就被默認(rèn)選中沥潭。
2.多選下拉列表框
下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性嬉挡，就可以實(shí)現(xiàn)多選功能钝鸽，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊）庞钢，可以選擇多個(gè)選項(xiàng)拔恰。
例如：
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
7.提交按鈕和重制按鈕
1.提交按鈕
- 在表單中有兩種按鈕可以使用，分別為：提交按鈕基括、重置仁连。這一小節(jié)講解提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕阱穗。
- 語法：
<input type="submit" value="提交"> - type：只有當(dāng)type值設(shè)置為submit時(shí)饭冬，按鈕才有提交作用
- value：按鈕上顯示的文字
2.重置按鈕
- 當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后揪阶，發(fā)現(xiàn)書寫有誤昌抠，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以鲁僚。
- 語法：
<input type="reset" value="重置"> - type：只有當(dāng)type值設(shè)置為reset時(shí)炊苫，按鈕才有重置作用
- value：按鈕上顯示的文字
8.label標(biāo)簽
- label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性冰沙。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本侨艾，就會(huì)觸發(fā)此控件。就是說拓挥，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)唠梨，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
- 語法：
<label for="控件id名稱"> - 注意：注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同侥啤。
9.placeholder 屬性有什么作用?
- placeholder屬性一般會(huì)在輸入框有一個(gè)提示当叭，該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失盖灸。
- 注意：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password蚁鳖。
placeholder為HTML5的新屬性
10.常見type屬性及其用法一覽
- type: 控件類型的顯示。如果這個(gè)屬性沒有指定赁炎，默認(rèn)的類型是 text醉箕。
- type可用的值包括：
- button：無缺省行為按鈕。
- checkbox： 復(fù)選框。必須使用 value 屬性定義此控件被提交時(shí)的值讥裤。使用 checked 屬性指示控件是否被選擇放棒。也可以使用 indeterminate 指示復(fù)選框在一種不確定狀態(tài)（大多數(shù)平臺上，顯示為一條穿過復(fù)選框的水平線）坞琴。
- color：HTML5 用于指定顏色的控件哨查。
- date：HTML5 用于輸入日期的控件（年逗抑，月剧辐，日，不包括時(shí)間）邮府。
- datetime：HTML5 基于 UTC 時(shí)區(qū)的日期時(shí)間輸入控件（時(shí)荧关，分，秒及幾分之一秒）褂傀。
- datetime-local：HTML5 用于輸入日期時(shí)間控件忍啤，不包含時(shí)區(qū)。
- email：HTML5 用于編輯 e-mail 的字段仙辟。 合適的時(shí)候可以使用 :valid 和 :invalid CSS 偽類同波。
- file：此控件可以讓用戶選擇文件。使用 accept 屬性可以定義控件可以選擇的文件類型叠国。
- hidden：不顯示在頁面上的控件未檩，但它的值會(huì)被提交到服務(wù)器。
- image：圖片提交按鈕粟焊。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本冤狡。還可以使用 height 和 width 屬性以像素為單位定義圖片的大小。
- month：HTML5 用于輸入年月的控件项棠，不帶時(shí)區(qū)悲雳。
- number: HTML5 用于輸入浮點(diǎn)數(shù)的控件。
- password：一個(gè)值被遮蓋的單行文本字段香追。使用 maxlength 指定可以輸入的值的最大長度 合瓢。
- radio：單選按鈕。必須使用 value 屬性定義此控件被提交時(shí)的值透典。使用checked 必須指示控件是否缺省被選擇歪玲。在同一個(gè)”單選按鈕組“中，所有單選按鈕的 name 屬性使用同一個(gè)值掷匠； 一個(gè)單選按鈕組中是滥崩，同一時(shí)間只有一個(gè)單選按鈕可以被選擇。
- range：HTML5 用于輸入不精確值控件讹语。
- reset：用于將表單所內(nèi)容設(shè)置為缺省值的按鈕钙皮。
- search：HTML5用于輸入搜索字符串的單行文本字段。換行會(huì)被從輸入的值中自動(dòng)移除。
- submit：用于提交表單的按鈕短条。
- tel：HTML5 用于輸入電話號碼的控件导匣；換行會(huì)被自動(dòng)從輸入的值中移除A,，but no other syntax is enforced茸时」倍ǎ可以使用屬性，比如 pattern 和 maxlength 來約束控件輸入的值可都。恰當(dāng)?shù)臅r(shí)候缓待，可以應(yīng)用 :valid 和 :invalid CSS 偽類。
- text：單行字段渠牲；換行會(huì)將自動(dòng)從輸入的值中移除旋炒。
- time：HTML5 用于輸入不含時(shí)區(qū)的時(shí)間控件。
- url：HTML5 用于編輯URL的字段签杈。 The user may enter a blank or invalid address. 換行會(huì)被自動(dòng)從輸入值中移隊(duì)瘫镇。可以使用如：pattern 和 maxlength 樣的屬性來約束輸入的值答姥。 恰當(dāng)?shù)臅r(shí)候使可以應(yīng)用 :valid 和 :invalid CSS 偽類铣除。
- week：HTML5 用于輸入一個(gè)由星期-年組成的日期，日期不包括時(shí)區(qū)鹦付。
