表單的作用就是用來(lái)將用戶(hù)信息提交給服務(wù)器的
比如：百度的搜索框 注冊(cè) 登錄這些操作都需要填寫(xiě)表單
使用form標(biāo)簽創(chuàng)建一個(gè)表單
form標(biāo)簽中必須指定一個(gè)action屬性，該屬性指向的是一個(gè)服務(wù)器的地址
當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對(duì)應(yīng)的地址
<form action="target.html">
在表單中可以使用fieldset來(lái)為表單項(xiàng)進(jìn)行分組，
可以將表單項(xiàng)中的同一組放到一個(gè)fieldset中
<fieldset>
在fieldset可以使用legend子標(biāo)簽，來(lái)指定組名
<legend>用戶(hù)信息</legend>
使用input來(lái)創(chuàng)建一個(gè)文本框，它的type屬性是text
如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中，還必須給表單項(xiàng)指定一個(gè)name屬性
name表示提交內(nèi)容的名字
用戶(hù)填寫(xiě)的信息會(huì)附在url地址的后邊以查詢(xún)字符串的形式發(fā)送給服務(wù)器
url地址?查詢(xún)字符串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
在文本框中也可以指定value屬性值，該值將會(huì)作為文本框的默認(rèn)值顯示
<input id="um" type="text" name="username" />
在html中還為我們提供了一個(gè)標(biāo)簽，專(zhuān)門(mén)用來(lái)選中表單中的提示文字的
label標(biāo)簽
該標(biāo)簽可以指定一個(gè)for屬性，該屬性的值需要指定一個(gè)表單項(xiàng)的id值
<label for="um">用戶(hù)名</label>
使用input創(chuàng)建一個(gè)密碼框，它的type屬性值是password
<input id="pwd" type="password" name="password" />
單選按鈕
- 使用input來(lái)創(chuàng)建一個(gè)單選按鈕，它的type屬性使用radio
- 單選按鈕通過(guò)name屬性進(jìn)行分組，name屬性相同是一組按鈕
像這種需要用戶(hù)選擇但是不需要用戶(hù)直接填寫(xiě)內(nèi)容的表單項(xiàng)，
還必須指定一個(gè)value屬性，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器
如果希望在單選按鈕或者是多選框中指定默認(rèn)選中的選項(xiàng)，
則可以在希望選中的項(xiàng)中添加checked="checked"屬性
<input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
多選框
使用input創(chuàng)建一個(gè)多選框，它的type屬性使用checkbox
<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />籃球
下拉列表
使用select來(lái)創(chuàng)建一個(gè)下拉列表
下拉列表的name屬性需要指定給select，而value屬性需要指定給option
可以通過(guò)在option中添加selected="selected"來(lái)將選項(xiàng)設(shè)置為默認(rèn)選中
當(dāng)為select添加一個(gè)multiple="multiple"，則下拉列表變?yōu)橐粋€(gè)多選的下拉列表
在select中可以使用optgroup對(duì)選項(xiàng)進(jìn)行分組,同一個(gè)optgroup中的選項(xiàng)是一組,可以通過(guò)label屬性來(lái)指定分組的名字
<select name="star">
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="pcj">潘長(zhǎng)江</option>
</optgroup>
</select>
使用textarea創(chuàng)建一個(gè)文本域
<textarea name="info"></textarea>
提交按鈕
可以將表單中的信息提交給服務(wù)器
使用input創(chuàng)建一個(gè)提交按鈕,它的type屬性值是submit
在提交按鈕中可以通過(guò)value屬性來(lái)指定按鈕上的文字
<input type="submit" value="注冊(cè)" />
重置按鈕，
點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值
<input type="reset" />
單純的按鈕，
這個(gè)按鈕沒(méi)有任何功能，只能被點(diǎn)擊
<input type="button" value="按鈕" />
button按鈕
這種方式和使用input類(lèi)似，只不過(guò)由于它是成對(duì)出現(xiàn)的標(biāo)簽
使用起來(lái)更加的靈活
<button type="submit">提交</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="target.html">
<fieldset>
<legend>用戶(hù)信息</legend>
<label for="um">用戶(hù)名</label>
<input id="um" type="text" name="username" /> <br /><br />
<label for="pwd">密碼 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
<fieldset >
<legend>用戶(hù)愛(ài)好</legend>
性別 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
<br /><br />
愛(ài)好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />籃球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />
</fieldset>
你喜歡的明星
<select name="star">
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="pcj">潘長(zhǎng)江</option>
</optgroup>
</select>
<br /><br />
自我介紹 <textarea name="info"></textarea>
<br /><br />
<input type="submit" value="注冊(cè)" />
<input type="reset" />
<input type="button" value="按鈕" />
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
預(yù)覽:
