用html中標(biāo)簽制作表單案例
發(fā)表時(shí)間：2023-09-10 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章主要介紹用如何用html標(biāo)簽制作表單實(shí)例，屬于HTML中必須要掌握的知識(shí)點(diǎn)之一。感興趣的朋友參考下，希望對(duì)大家有所幫助。表單標(biāo)簽：form表單標(biāo)簽的主要作用是：在HTML頁(yè)面中創(chuàng)建一個(gè)表單，在用戶填寫(xiě)完表單信息后，將數(shù)據(jù)提交給服務(wù)器。需要填寫(xiě)數(shù)據(jù)的標(biāo)簽必須要放在表單標(biāo)簽體里面。常用的屬性：...
本篇文章主要介紹用如何用html標(biāo)簽制作表單實(shí)例，屬于HTML中必須要掌握的知識(shí)點(diǎn)之一。感興趣的朋友參考下，希望對(duì)大家有所幫助。
表單標(biāo)簽：form
表單標(biāo)簽的主要作用是：在HTML頁(yè)面中創(chuàng)建一個(gè)表單，在用戶填寫(xiě)完表單信息后，將數(shù)據(jù)提交給服務(wù)器。需要填寫(xiě)數(shù)據(jù)的標(biāo)簽必須要放在表單標(biāo)簽體里面。
常用的屬性：
action：請(qǐng)求路徑，在該屬性中確定表單數(shù)據(jù)提交的服務(wù)器地址。
method：請(qǐng)求方式。常用的請(qǐng)求方式有：get，post。
get（默認(rèn)）：1.get的請(qǐng)求的數(shù)據(jù)有限
2.提交的表單數(shù)據(jù)是追加在請(qǐng)求的路徑上，如：regist.action?username=jack&password=1111。
追加是在請(qǐng)求地址的后面加上?連接。之后每一對(duì)數(shù)據(jù)使用&連接。
post：1.提交的數(shù)據(jù)不在請(qǐng)求路徑上追加，不顯示在地址欄上。
2.理論上，post請(qǐng)求的數(shù)據(jù)量是無(wú)限的。輸入域標(biāo)簽：input
輸入域標(biāo)簽用于獲得用戶輸入的信息，type屬性的值不同，獲取的方式也就不一樣。
常用屬性：
type屬性
text：文本框，單行輸入字段，用戶可以在其中輸入文本，
password：密碼框，該輸入框中的輸入字符將會(huì)以黑圓顯示。
radio：?jiǎn)芜x框，表示一組互斥選項(xiàng)按鈕中的一個(gè)，當(dāng)一個(gè)按鈕被選中，之前的按鈕就會(huì)變?yōu)榉沁x中。
checkbox：多選按鈕。
file：文件上傳組件
hidden：隱藏字段，數(shù)據(jù)會(huì)發(fā)送給服務(wù)器，但瀏覽器不會(huì)顯示。
reset：重置按鈕，將表單恢復(fù)到默認(rèn)值。
submit：提交按鈕，提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。
name屬性：元素名，必須要提供name屬性，表單數(shù)據(jù)才會(huì)提交到服務(wù)器中。服務(wù)器通過(guò)該值來(lái)獲取數(shù)據(jù)。
value屬性：設(shè)置input標(biāo)簽的默認(rèn)值，
size屬性：設(shè)置輸入框的大小
checked屬性：?jiǎn)芜x框或復(fù)選框被選中。
readonly：是否只讀。
disable：是否可用。下拉列表標(biāo)簽：select
下拉列表標(biāo)簽，提供一些選項(xiàng)，來(lái)選中其中的一項(xiàng)或多項(xiàng)。需要配合子標(biāo)簽<option>來(lái)使用。
name屬性：設(shè)置名稱，必寫(xiě)項(xiàng)。
multiple屬性：不寫(xiě)默認(rèn)單選，取值為multiple表示多選。
size屬性：多選時(shí)，可見(jiàn)的選項(xiàng)數(shù)目。
子標(biāo)簽<option>:下拉列表中的一個(gè)選項(xiàng)
selected：選中當(dāng)前的列表項(xiàng)。
value：發(fā)送給服務(wù)器的選項(xiàng)值。示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標(biāo)簽</title>
</head>
<body>
<!--要提交到服務(wù)器中的所有信息，必須要用form標(biāo)簽包裹起來(lái)-->
<form>
<!--文本輸入項(xiàng)-->
用戶名：<input type="text" name="usernam"/><br />
<!--密碼項(xiàng)-->
密 碼：<input type="password" name="password" /><br />
確認(rèn)密碼:<input type="password" name="password2" /><br />
<!--單選按鈕-->
性別:<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br />
<!--多選按鈕-->
興趣愛(ài)好：<input type="checkbox" name="hobby" />寫(xiě)博客
<input type="checkbox" name="hobby" />寫(xiě)代碼
<input type="checkbox" name="hobby" />看源碼<br />
<!--文件選項(xiàng)-->
文件：<input type="file" name="file" /><br />
<!--下拉列表標(biāo)簽-->
居住城市：<select name="city">
<option>--請(qǐng)選擇--</option>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</select><br />
<!--提交按鈕-->
<input type="submit" value="提交按鈕" /><br />
<!--普通按鈕-->
<input type="button" value="普通按鈕" /><br />
<!--重置按鈕-->
<input type="reset" value="重置" /><br />
</form>
</body>
</html>效果如下：
相關(guān)推薦：
HTML中如何使用html表單提交的操作
html表單被重置后觸發(fā)的事件onreset
html表單選項(xiàng)菜單option與optgruop標(biāo)簽的用法詳解
以上就是用html中標(biāo)簽制作表單實(shí)例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
