- 1PS提示：因為圖層已鎖定，無法編輯圖層的處理方法
- 2picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 3Adobe Illustrator CS5 序列號大全
- 4ACDsee注冊碼免費分享（含ACDsee18、ACDsee10等版本）
- 5PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細教程
- 6Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 7Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 8最新的Adobe Illustrator CS4序列號大全
- 9qq郵件是否已讀怎么看 QQ郵箱已經(jīng)發(fā)出去的郵件怎么知道對方是否已經(jīng)查看
- 10Intel i7-9700K性能跑分曝光：同代提升約12%
- 11企業(yè)微信怎么登陸 微信企業(yè)版賬號登錄方法流程
- 12AMD推土機架構(gòu)回顧：雖隕落卻是Zen成功的墊腳石
聊天工具辦公軟件殺毒教程系統(tǒng)工具圖形圖像電腦學(xué)習(xí)應(yīng)用軟件網(wǎng)絡(luò)軟件蘋果應(yīng)用注冊碼網(wǎng)站教程技術(shù)開發(fā)安卓教程其它教程
您當前所在位置：網(wǎng)視手游站 -> 網(wǎng)站教程 -> HTML5中form表單標簽用法詳細說明
HTML5中form表單標簽用法詳細說明
發(fā)表時間：2023-09-16 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本文主要和大家分享HTML5中form表單標簽用法詳解，會以代碼實例來和大家分享form的用法，希望能幫助到大家。語法： <form method = "傳送方式" action = "服務(wù)器文件">講解：1.<form>是成對出現(xiàn)的...
本文主要和大家分享HTML5中form表單標簽用法詳解，會以代碼實例來和大家分享form的用法，希望能幫助到大家。語法： <form method = "傳送方式" action = "服務(wù)器文件">
講解：1.<form>是成對出現(xiàn)的， 以<form> 開始， 以 </form>結(jié)束,表單都必須放在其之間。
2.method 傳送方式， get/post 是后端程序員考慮的問題
3.action 瀏覽者輸入的數(shù)據(jù)被傳送到的地方，比如一個php頁面， (save.php)
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
文本輸入框，密碼輸入框
當用戶需要在表單中鍵入字母，數(shù)據(jù)等，就要用到文本輸入框，文本輸入框也可以轉(zhuǎn)化為密碼輸入框
語法：
<form>
<input type = "text/password" name = "名稱" value = "文本" />
</form>
講解：1.type ：
當 type 為 text時，為文本輸入框
當 type 為 password 時， 為密碼輸入框
2.name ：為文本框命名，以備后臺asp php使用
3.value ：為文本輸入框設(shè)置默認值（一般起提示作用）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本輸入框、密碼輸入框</title>
</head>
<body>
<form method="post" action="save.php">
賬戶:
<input type = "text" name = "myName" />
<br />
密碼：
<input type = "password " name = "pass"/>
</form>
</body>
</html>
結(jié)果：
賬戶:
密碼:
文本域：支持多行文本輸入
當用戶需要在表單中輸入大段文字時，就要用到文本輸入域
語法：
<textarea rows = "行數(shù)" cols = "列數(shù)" > 文本 </textarea>
講解：1.文本輸入域以 <textarea>開始 ，以 </textarea>結(jié)束
2.rows： 輸入文本輸入域的行數(shù)
3.cols ： 輸入文本輸入域的列數(shù)
4.在<textarea></textarea>標簽之間輸入默認值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form method = "post" action = "save.php">
<label>個人簡介</label>
<textarea rows = "5" cols = "10">在這里輸入內(nèi)容...</textarea></span>
<input type = "submit" value = "確定" name = "submit" />
<input type = "reset" value = "重置" name = "reset" />
</form>
</body>
</html>
結(jié)果：
個人簡介
<lable>在后面會有詳解。
使用單選框，復(fù)選框讓用戶選擇
在使用表單設(shè)計調(diào)查表時，為了減少用戶的操作，使用選擇框是一個好辦法，在HTML中，有單選框和復(fù)選框，兩者的主要區(qū)別是 單選框中用戶的選項只能選擇一項，而復(fù)選框中用戶可以任意選擇多項，甚至全選。
<input type = "radio/checkbox" value = "值" name = "名稱" checked = "checked" />
講解：
1. type : radio :控件單選框
checkbox : 控件復(fù)選框
2. value: 提供數(shù)據(jù)到服務(wù)器的值
3. name：為控件命名，以備后臺程序ASP，PHP使用
4.checked： 當設(shè)置 checked = “checked”時，該選項被默認選中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、復(fù)選框</title>
</head>
<body>
<form name = "iForm" method = "post" action = "save.php">
你是否喜歡旅游？<br />
<input type = "radio" name = "radioLove" value = "喜歡" checked = "checked"/></span>
<input type = "radio" name = "radioLove" value = "不喜歡"/>
<input type = "radio" name = "radioLove" value = "無所謂"/>
<br /> <br />
你對那些運動感興趣？<br />
<input type = "checkbox" name = "checkbox1" value = "跑步"/>
<input type = "checkbox" name = "checkbox1" value = "打球" checked = "checked"/>
<input type = "checkbox" name = "checkbox1" value = "登山" checked = "checked"/>
<input type = "checkbox" name = "checkbox1" value = "健身" />
</form>
</body>
</html>
結(jié)果：
你是否喜歡旅游？
你對那些運動感興趣？
注意：同一組的單選按鈕，name的取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表框
使用下拉列表框，節(jié)省空間，既可以單選，又可以多選。
單選：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉頁表框</title>
</head>
<body>
<form name = "iForm" method = "post" action = "save.php">
<label>愛好:</label>
<select>
<option value = "讀書">讀書</option></span>
<option value = "運動">運動</option>
<option value = "音樂">音樂</option>
<option value = "旅游">旅游</option>
<option value = "購物">購物</option>
<span style="color:#ff0000;"></select></span>
</form>
</body>
</html>
結(jié)果：愛好: 讀書運動音樂 旅游購物 (可以下拉）
<option value = "提交值" > 選項</option>
提交值：是向服務(wù)器提交的值
選項：是顯示的值
設(shè)置 selected = "selected" 則該選項默認被選中。
多選：
就將上面的<select> 改為 <select multiple = "multiple" >就行，然后在widows下ctrl ,同時單擊，在Mac 下 Command + 單擊
使用提交按鈕，提交數(shù)據(jù)
在表單中有兩種按鈕可以使用，提交按鈕和重置，當用戶需要提交信息到服務(wù)器時，需要用到提交按鈕。
語法：
<input type = "submit" value = "提交">
講解：
1.只有當type = "sumit"時，按鈕才有提交的作用
2.value： 按鈕上顯示的字
重置
當用戶需要重置表單信息到初始狀態(tài)時，可以使用重置按鈕，只要把type 改為 reset 就行。
<input type = "reset" value = "重置">
講解：
1.同理提交按鈕，只有當type = "reset"時， 按鈕才有重置的作用
2.value : 按鈕上顯示的文字
label標簽
label標簽不會向用戶呈現(xiàn)任何特殊的效果，它的作用是為鼠標用戶改進了可用性，如果你在label標簽內(nèi)點擊文本，就會觸發(fā)此控件，也就是說，當用戶單擊選中該label標簽時，瀏覽器會自動將焦點轉(zhuǎn)到和 標簽相關(guān)的表單控件上(就自動選中和該label標簽相關(guān)聯(lián)的表單控件上);
語法：
<label for = "控件id 的名稱" >
注意：標簽中for 屬性的值應(yīng)該與相關(guān)控件的id屬性值一定要相同；
<form>
<label for="male">男</label>
<input type="radio" name="gender" <span style="color:#ff0000;">id="male"</span> />
<br />
<label for="female">女</label>
<input type="radio" name="gender" <span style="color:#990000;">id="female"</span> />
<label for="email">輸入你的郵箱地址</label>
<input type="email" <span style="color:#ff6666;">id="email"</span> placeholder="Enter email">
</form>
結(jié)果：
男
女
輸入你的郵箱地址
以下是自己仿寫的，可復(fù)選的：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable標簽</title>
</head>
<body>
<form>
你對什么運動感興趣：<br/>
<label for = "sport1">慢跑</label>
<input type = "checkbox" name = "sports" id = "sport1"/>
<br />
<label for = "sport2">登山</label>
<input type = "checkbox" name = "sports" id = "sport2"/>
<br />
<label for = "sport3">籃球</label>
<input type = "checkbox" name = "sports" id = "sport3"/> <br />
</form>
</body>
</html>
結(jié)果：
你對什么運動感興趣：
慢跑
登山
籃球
相關(guān)推薦：
JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
以上就是HTML5中form表單標簽用法詳解的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。
推薦資訊 總?cè)藲獍?/span>
最新教程 本月人氣
- 1這些保護殼讓iPhone 6變成3防手機
- 2iphone6 plus 16g夠用嗎?
- 3iPhone5s升級ios8藍屏如何辦？
- 4iphone6連接WiFi太慢如何辦?
- 5iPhone5s升級iOS8連接WiFi很慢如何辦?
- 6IOS8查看哪一些應(yīng)用最耗電
- 7蘋果iPhone6/新iPad為何均都沒有32GB容量
- 8iPhone6必須關(guān)閉的3個開關(guān)
- 93大運營商iPhone6國行哪家強？
- 10iPhone6如何截圖？
- 11iOS8聯(lián)通版如何打開啟4G
- 12iOS8升級后無法激活如何辦？
- 1蘋果手機如何設(shè)置微信透明頭像
- 2華為mate8如何root 華為mate8 root方法
- 3鬼怪大結(jié)局是什么？韓劇《鬼怪》大結(jié)局第16集視頻鏈接
- 4聯(lián)想zuk z2開發(fā)者模式如何開 聯(lián)想zuk z2開發(fā)者模式打開圖文說明教程
- 5oppo r9與華為mate8哪一個好 華為mate8與oppo r9比較評測
- 6詳細說明MySQL5.7中的關(guān)鍵字與保留字
- 7QQ影音如何截取QQ表情？QQ影音截取QQ表情圖文說明教程
- 8qq影音如何安裝？qq影音安裝圖文說明教程
- 9紅米3s與紅米note3哪一個好 紅米note3與紅米3s比較評測
- 10詳細說明MySQL Group Replication[Multi-Primary Mode]的搭建部署過程（圖文）
- 113星s7誤觸如何辦 3星s7防誤觸設(shè)置圖文說明教程
- 123組騰訊視頻會員賬號共享（僅供跳過廣告使用）
