溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5中form表單標簽怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5中form表單標簽怎么使用文章都會有所收獲，下面我們一起來看看吧。
語法：<formmethod="傳送方式"action="服務器文件">
講解：1.<form>是成對出現的，以<form>開始，以</form>結束,表單都必須放在其之間。
2.method傳送方式，get/post是后端程序員考慮的問題
3.action瀏覽者輸入的數據被傳送到的地方，比如一個php頁面，(save.php)
<formmethod="post"action="save.php">
<labelfor="username">用戶名:</label>
<inputtype="text"name="username"/>
<labelfor="pass">密碼:</label>
<inputtype="password"name="pass"/>
</form>
文本輸入框，密碼輸入框
當用戶需要在表單中鍵入字母，數據等，就要用到文本輸入框，文本輸入框也可以轉化為密碼輸入框
語法：
<form>
<inputtype="text/password"name="名稱"value="文本"/>
</form>
講解：1.type：
當type為text時，為文本輸入框
當type為password時，為密碼輸入框
2.name：為文本框命名，以備后臺aspphp使用
3.value：為文本輸入框設置默認值（一般起提示作用）
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>文本輸入框、密碼輸入框</title>
</head>
<body>
<formmethod="post"action="save.php">
賬戶:
<inputtype="text"name="myName"/>
<br/>
密碼：
<inputtype="password"name="pass"/>
</form>
</body>
</html>
結果：
賬戶:
密碼:
文本域：支持多行文本輸入
當用戶需要在表單中輸入大段文字時，就要用到文本輸入域
語法：
<textarearows="行數"cols="列數">文本</textarea>
講解：1.文本輸入域以<textarea>開始，以</textarea>結束
2.rows：輸入文本輸入域的行數
3.cols：輸入文本輸入域的列數
4.在<textarea></textarea>標簽之間輸入默認值
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>文本域</title>
</head>
<body>
<formmethod="post"action="save.php">
<label>個人簡介</label>
<textarearows="5"cols="10">在這里輸入內容...</textarea></span>
<inputtype="submit"value="確定"name="submit"/>
<inputtype="reset"value="重置"name="reset"/>
</form>
</body>
</html>
結果：
個人簡介
<lable>在后面會有詳解。
使用單選框，復選框讓用戶選擇
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好辦法，在HTML中，有單選框和復選框，兩者的主要區別是單選框中用戶的選項只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
<inputtype="radio/checkbox"value="值"name="名稱"checked="checked"/>
講解：
1.type:radio:控件單選框
checkbox:控件復選框
2.value:提供數據到服務器的值
3.name：為控件命名，以備后臺程序ASP，PHP使用
4.checked：當設置checked=“checked”時，該選項被默認選中。
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>單選框、復選框</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="無所謂"/>
<br/><br/>
你對那些運動感興趣？<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>
結果：
你是否喜歡旅游？
你對那些運動感興趣？
注意：同一組的單選按鈕，name的取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表框
使用下拉列表框，節省空間，既可以單選，又可以多選。
單選：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>下拉頁表框</title>
</head>
<body>
<formname="iForm"method="post"action="save.php">
<label>愛好:</label>
<select>
<optionvalue="讀書">讀書</option></span>
<optionvalue="運動">運動</option>
<optionvalue="音樂">音樂</option>
<optionvalue="旅游">旅游</option>
<optionvalue="購物">購物</option>
<spanstyle="color:#ff0000;"></select></span>
</form>
</body>
</html>
結果：愛好:讀書運動音樂旅游購物(可以下拉）
<optionvalue="提交值">選項</option>
提交值：是向服務器提交的值
選項：是顯示的值
設置selected="selected"則該選項默認被選中。
多選：
就將上面的<select>改為<selectmultiple="multiple">就行，然后在widows下ctrl,同時單擊，在Mac下Command+單擊
使用提交按鈕，提交數據
在表單中有兩種按鈕可以使用，提交按鈕和重置，當用戶需要提交信息到服務器時，需要用到提交按鈕。
語法：
<inputtype="submit"value="提交">
講解：
1.只有當type="sumit"時，按鈕才有提交的作用
2.value：按鈕上顯示的字
重置
當用戶需要重置表單信息到初始狀態時，可以使用重置按鈕，只要把type改為reset就行。
<inputtype="reset"value="重置">
講解：
1.同理提交按鈕，只有當type="reset"時，按鈕才有重置的作用
2.value:按鈕上顯示的文字
label標簽
label標簽不會向用戶呈現任何特殊的效果，它的作用是為鼠標用戶改進了可用性，如果你在label標簽內點擊文本，就會觸發此控件，也就是說，當用戶單擊選中該label標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上(就自動選中和該label標簽相關聯的表單控件上);
語法：
<labelfor="控件id的名稱">
注意：標簽中for屬性的值應該與相關控件的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>
結果：
男
女
輸入你的郵箱地址
以下是自己仿寫的，可復選的：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>form中的lable標簽</title>
</head>
<body>
<form>
你對什么運動感興趣：<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>
結果：
你對什么運動感興趣：
慢跑
登山
籃球
關于“HTML5中form表單標簽怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5中form表單標簽怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
