1.表單簡介
表單對于用戶而言是數(shù)據(jù)的錄入和提交的界面咪鲜,對于網(wǎng)站而言是獲取用戶信息的途徑。它可以將用戶輸入的信息提交給網(wǎng)站服務(wù)器撞鹉。
2.主要標(biāo)簽及用法舉例
2.1表單標(biāo)記<form>
<form action="url" name="表單名稱" method="post" enctype="application/x-www-form-urlencoded">
.............
</form>
所有的表單元素必須被包含在<form>標(biāo)簽中才能正常提交疟丙。
action屬性表示表單處理程序的地址颖侄。
method屬性表示表單數(shù)據(jù)提交方式,有g(shù)et與post兩種享郊。
enctype規(guī)定在發(fā)送表單數(shù)據(jù)之前如何對其進(jìn)行編碼览祖。
enctype 屬性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
2.2插入表單對象<input>
根據(jù)不同的 type 屬性值,輸入字段擁有很多種形式炊琉。輸入字段可以是文本字段展蒂、復(fù)選框、掩碼后的文本控件苔咪、單選按鈕、按鈕等等团赏。
type屬性:用來指定插入哪種表單元素。
name:表單名稱丝里,用于與頁面中其他表單加以區(qū)別体谒。
value:用來定義表單提交的值。
2.2.1文字字段
<input name="表單名稱" type="text" value="文本框內(nèi)默認(rèn)值"/>
用于輸入并提交文本幌绍。
2.2.2密碼域
<input name="表單名稱" type="password" placeholder="輸入密碼"/>
用于輸入密碼纷捞。
placeholder屬性的值作為提示顯示在密碼框中被去,該值不會被提交脆丁。當(dāng)該表單獲得焦點(diǎn)時提示會消失岔冀。
2.2.3單選按鈕
<input name="表單名稱" type="radio" value="按鈕提交的值" checked/>
用于創(chuàng)建單選按鈕,checked表示默認(rèn)情況下該項(xiàng)選中捣染。同組單選按鈕需保證name的值相同停巷。
2.2.4多選按鈕
<input name="表單名稱" type="checkbox" value="按鈕提交的值" checked/>
用于創(chuàng)建多選按鈕榕栏。
2.2.5普通按鈕
<input name="表單名稱" type="button" value="按鈕上顯示的文字" onclick="處理程序"/>
用于創(chuàng)建一個普通按鈕蕾各,此處value的值為按鈕上顯示的文字。
2.2.6提交按鈕
<input name="表單名稱" type="submit" value="按鈕上顯示的文字" />
特殊的按鈕妨托,用于實(shí)現(xiàn)表單數(shù)據(jù)的提交兰伤。
2.2.7重置按鈕
<input name="表單名稱" type="reset" value="按鈕上顯示的文字" />
用于清除用戶在頁面中輸入的信息脆贵。
2.2.8圖像域
<input name="表單名稱" type="image" src="圖像地址"/>
用一幅圖像作為按鈕,可創(chuàng)作任何外觀的按鈕会烙。
2.2.9文件域
<input name="表單名稱" type="file" accept="image/png" />
用于讓用戶上傳文件筒捺。accept屬性用來限制可上傳的文件類型系吭。
2.2.10隱藏域
<input name="表單名稱" type="hidden" value="表單提交的值" />
用戶創(chuàng)建一個用戶看不見的隱藏表單。
2.3下拉菜單列表<select>,<option>
<select name="下拉菜單名稱">
<option value="表單提交的值" selected>選項(xiàng)顯示的內(nèi)容</option>
……
</select>
selected為默認(rèn)情況下選中的選項(xiàng)沃缘。
value是提交上去的值则吟,<option>標(biāo)簽之間是頁面上顯示的值。
2.4文本域<textarea>
用于輸入多行文本水慨。
<textarea name="文本域名稱">
文本域中顯示的內(nèi)容
</textarea>
2.5<label>標(biāo)簽
不會呈現(xiàn)任何效果晰洒,當(dāng)點(diǎn)擊<label>標(biāo)簽內(nèi)的文本啥箭,瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)移到和該標(biāo)簽相關(guān)的表單控件上。
<label for="目標(biāo)表單的id值">文本文本</label>