HTML5中form表單標(biāo)簽使用方法-創(chuàng)新互聯(lián)

HTML5中form表單標(biāo)簽使用方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、合作ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的合作網(wǎng)站制作公司

語法： <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>

文本輸入框，密碼輸入框

當(dāng)用戶需要在表單中鍵入字母，數(shù)據(jù)等，就要用到文本輸入框，文本輸入框也可以轉(zhuǎn)化為密碼輸入框

語法：

<form>
<input type = "text/password" name = "名稱" value = "文本" />
</form>

講解：1.type ：

當(dāng) type 為 text時，為文本輸入框

當(dāng) type 為 password 時，為密碼輸入框

2.name ：為文本框命名，以備后臺asp php使用

3.value ：為文本輸入框設(shè)置默認(rèn)值（一般起提示作用）

<!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é)果：

賬戶:
密碼:

文本域：支持多行文本輸入

當(dāng)用戶需要在表單中輸入大段文字時，就要用到文本輸入域

語法：

講解：1.文本輸入域以 <textarea>開始，以 </textarea>結(jié)束

2.rows：輸入文本輸入域的行數(shù)

3.cols ：輸入文本輸入域的列數(shù)

4.在<textarea></textarea>標(biāo)簽之間輸入默認(rèn)值

<!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：當(dāng)設(shè)置 checked = “checked”時，該選項被默認(rèn)選中。

<!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" 則該選項默認(rèn)被選中。

多選：

就將上面的<select> 改為 <select multiple = "multiple" >就行，然后在widows下ctrl ,同時單擊，在Mac 下 Command + 單擊

使用提交按鈕，提交數(shù)據(jù)

在表單中有兩種按鈕可以使用，提交按鈕和重置，當(dāng)用戶需要提交信息到服務(wù)器時，需要用到提交按鈕。

語法：

講解：

1.只有當(dāng)type = "sumit"時，按鈕才有提交的作用

2.value：按鈕上顯示的字

重置

當(dāng)用戶需要重置表單信息到初始狀態(tài)時，可以使用重置按鈕，只要把type 改為 reset 就行。

講解：

1.同理提交按鈕，只有當(dāng)type = "reset"時，按鈕才有重置的作用

2.value : 按鈕上顯示的文字

label標(biāo)簽

label標(biāo)簽不會向用戶呈現(xiàn)任何特殊的效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性，如果你在label標(biāo)簽內(nèi)點擊文本，就會觸發(fā)此控件，也就是說，當(dāng)用戶單擊選中該label標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上(就自動選中和該label標(biāo)簽相關(guān)聯(lián)的表單控件上);

語法：

注意：標(biāo)簽中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標(biāo)簽</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é)果：

你對什么運動感興趣：
慢跑
登山
籃球

感謝各位的閱讀！看完上述內(nèi)容，你們對HTML5中form表單標(biāo)簽使用方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

當(dāng)前題目：HTML5中form表單標(biāo)簽使用方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://bm7419.com/article0/didioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容