這篇文章主要介紹了HTML5中form表單標(biāo)簽怎么使用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇HTML5中form表單標(biāo)簽怎么使用文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
在榕城等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專(zhuān)注、極致的服務(wù)理念,為客戶(hù)提供做網(wǎng)站、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營(yíng)銷(xiāo)型網(wǎng)站,外貿(mào)網(wǎng)站建設(shè),榕城網(wǎng)站建設(shè)費(fèi)用合理。
語(yǔ)法:<formmethod="傳送方式"action="服務(wù)器文件">
講解:1.<form>是成對(duì)出現(xiàn)的,以<form>開(kāi)始,以</form>結(jié)束,表單都必須放在其之間。
2.method傳送方式,get/post是后端程序員考慮的問(wèn)題
3.action瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)php頁(yè)面,(save.php)
<formmethod="post"action="save.php">
<labelfor="username">用戶(hù)名:</label>
<inputtype="text"name="username"/>
<labelfor="pass">密碼:</label>
<inputtype="password"name="pass"/>
</form>
文本輸入框,密碼輸入框
當(dāng)用戶(hù)需要在表單中鍵入字母,數(shù)據(jù)等,就要用到文本輸入框,文本輸入框也可以轉(zhuǎn)化為密碼輸入框
語(yǔ)法:
<form>
<inputtype="text/password"name="名稱(chēng)"value="文本"/>
</form>
講解:1.type:
當(dāng)type為text時(shí),為文本輸入框
當(dāng)type為password時(shí),為密碼輸入框
2.name:為文本框命名,以備后臺(tái)aspphp使用
3.value:為文本輸入框設(shè)置默認(rèn)值(一般起提示作用)
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>文本輸入框、密碼輸入框</title>
</head>
<body>
<formmethod="post"action="save.php">
賬戶(hù):
<inputtype="text"name="myName"/>
<br/>
密碼:
<inputtype="password"name="pass"/>
</form>
</body>
</html>
結(jié)果:
賬戶(hù):
密碼:
文本域:支持多行文本輸入
當(dāng)用戶(hù)需要在表單中輸入大段文字時(shí),就要用到文本輸入域
語(yǔ)法:
<textarearows="行數(shù)"cols="列數(shù)">文本</textarea>
講解:1.文本輸入域以<textarea>開(kāi)始,以</textarea>結(jié)束
2.rows:輸入文本輸入域的行數(shù)
3.cols:輸入文本輸入域的列數(shù)
4.在<textarea></textarea>標(biāo)簽之間輸入默認(rèn)值
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>文本域</title>
</head>
<body>
<formmethod="post"action="save.php">
<label>個(gè)人簡(jiǎn)介</label>
<textarearows="5"cols="10">在這里輸入內(nèi)容...</textarea></span>
<inputtype="submit"value="確定"name="submit"/>
<inputtype="reset"value="重置"name="reset"/>
</form>
</body>
</html>
結(jié)果:
個(gè)人簡(jiǎn)介
<lable>在后面會(huì)有詳解。
使用單選框,復(fù)選框讓用戶(hù)選擇
在使用表單設(shè)計(jì)調(diào)查表時(shí),為了減少用戶(hù)的操作,使用選擇框是一個(gè)好辦法,在HTML中,有單選框和復(fù)選框,兩者的主要區(qū)別是單選框中用戶(hù)的選項(xiàng)只能選擇一項(xiàng),而復(fù)選框中用戶(hù)可以任意選擇多項(xiàng),甚至全選。
<inputtype="radio/checkbox"value="值"name="名稱(chēng)"checked="checked"/>
講解:
1.type:radio:控件單選框
checkbox:控件復(fù)選框
2.value:提供數(shù)據(jù)到服務(wù)器的值
3.name:為控件命名,以備后臺(tái)程序ASP,PHP使用
4.checked:當(dāng)設(shè)置checked=“checked”時(shí),該選項(xiàng)被默認(rèn)選中。
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>單選框、復(fù)選框</title>
</head>
<body>
<formname="iForm"method="post"action="save.php">
你是否喜歡旅游?<br/>
<inputtype="radio"name="radioLove"value="喜歡"checked="checked"/></span>
<inputtype="radio"name="radioLove"value="不喜歡"/>
<inputtype="radio"name="radioLove"value="無(wú)所謂"/>
<br/><br/>
你對(duì)那些運(yùn)動(dòng)感興趣?<br/>
<inputtype="checkbox"name="checkbox1"value="跑步"/>
<inputtype="checkbox"name="checkbox1"value="打球"checked="checked"/>
<inputtype="checkbox"name="checkbox1"value="登山"checked="checked"/>
<inputtype="checkbox"name="checkbox1"value="健身"/>
</form>
</body>
</html>
結(jié)果:
你是否喜歡旅游?
你對(duì)那些運(yùn)動(dòng)感興趣?
注意:同一組的單選按鈕,name的取值一定要一致,這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表框
使用下拉列表框,節(jié)省空間,既可以單選,又可以多選。
單選:
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>下拉頁(yè)表框</title>
</head>
<body>
<formname="iForm"method="post"action="save.php">
<label>愛(ài)好:</label>
<select>
<optionvalue="讀書(shū)">讀書(shū)</option></span>
<optionvalue="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<optionvalue="音樂(lè)">音樂(lè)</option>
<optionvalue="旅游">旅游</option>
<optionvalue="購(gòu)物">購(gòu)物</option>
<spanstyle="color:#ff0000;"></select></span>
</form>
</body>
</html>
結(jié)果:愛(ài)好:讀書(shū)運(yùn)動(dòng)音樂(lè)旅游購(gòu)物(可以下拉)
<optionvalue="提交值">選項(xiàng)</option>
提交值:是向服務(wù)器提交的值
選項(xiàng):是顯示的值
設(shè)置selected="selected"則該選項(xiàng)默認(rèn)被選中。
多選:
就將上面的<select>改為<selectmultiple="multiple">就行,然后在widows下ctrl,同時(shí)單擊,在Mac下Command+單擊
使用提交按鈕,提交數(shù)據(jù)
在表單中有兩種按鈕可以使用,提交按鈕和重置,當(dāng)用戶(hù)需要提交信息到服務(wù)器時(shí),需要用到提交按鈕。
語(yǔ)法:
<inputtype="submit"value="提交">
講解:
1.只有當(dāng)type="sumit"時(shí),按鈕才有提交的作用
2.value:按鈕上顯示的字
重置
當(dāng)用戶(hù)需要重置表單信息到初始狀態(tài)時(shí),可以使用重置按鈕,只要把type改為reset就行。
<inputtype="reset"value="重置">
講解:
1.同理提交按鈕,只有當(dāng)type="reset"時(shí),按鈕才有重置的作用
2.value:按鈕上顯示的文字
label標(biāo)簽
label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊的效果,它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性,如果你在label標(biāo)簽內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件,也就是說(shuō),當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上(就自動(dòng)選中和該label標(biāo)簽相關(guān)聯(lián)的表單控件上);
語(yǔ)法:
<labelfor="控件id的名稱(chēng)">
注意:標(biāo)簽中for屬性的值應(yīng)該與相關(guān)控件的id屬性值一定要相同;
<form>
<labelfor="male">男</label>
<inputtype="radio"name="gender"<spanstyle="color:#ff0000;">id="male"</span>/>
<br/>
<labelfor="female">女</label>
<inputtype="radio"name="gender"<spanstyle="color:#990000;">id="female"</span>/>
<labelfor="email">輸入你的郵箱地址</label>
<inputtype="email"<spanstyle="color:#ff6666;">id="email"</span>placeholder="Enteremail">
</form>
結(jié)果:
男
女
輸入你的郵箱地址
以下是自己仿寫(xiě)的,可復(fù)選的:
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>form中的lable標(biāo)簽</title>
</head>
<body>
<form>
你對(duì)什么運(yùn)動(dòng)感興趣:<br/>
<labelfor="sport1">慢跑</label>
<inputtype="checkbox"name="sports"id="sport1"/>
<br/>
<labelfor="sport2">登山</label>
<inputtype="checkbox"name="sports"id="sport2"/>
<br/>
<labelfor="sport3">籃球</label>
<inputtype="checkbox"name="sports"id="sport3"/><br/>
</form>
</body>
</html>
結(jié)果:
你對(duì)什么運(yùn)動(dòng)感興趣:
慢跑
登山
籃球
關(guān)于“HTML5中form表單標(biāo)簽怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“HTML5中form表單標(biāo)簽怎么使用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前題目:HTML5中form表單標(biāo)簽怎么使用
網(wǎng)頁(yè)鏈接:http://muchs.cn/article20/ijodjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站制作、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)