HTML5-表單標籤
阿新 • • 發佈：2018-12-26
一、什麼是表單
表單就是專門用來收集使用者資訊的
二、表單元素
1、元素：在html中標籤／標記／元素都是指html的標籤
2、常見表單元素：
2.1、input標籤：有一個type屬性，這個屬性有很多型別的取 值，取值的不同決定了input標籤的功能和外觀
<form action="https://www.baidu.com/">
<!--明文輸入-->
賬號：<input type="text" name="aa"><br>
<!--暗文輸入-->
密碼：<input 2.2、lable標籤：預設情況下文字和輸入框是沒有關聯關係的，也就是說點選文字輸入框不會聚焦，如果想點選文字時讓對應的輸入框聚焦，那麼就需要讓文字和輸入框進行繫結，可使用lable標籤完成該繫結
繫結格式：1、將文字利用lable標籤包裹起來
2、給輸入框新增id屬性
3、在lable標籤中通過for屬性和輸入框中的id進行繫結 即可
<form action="">
<label for="account">賬號:</label><input type="text" id="account"><br>
<label for="pwd">密碼:</label><input type="password" id="pwd"><br>
</form>2.3、datalist標籤：給輸入框繫結待選項(眾多瀏覽器不支援datalist標籤，所以不常用)
如何給輸入框繫結待選列表：
1、建立一個輸入框
2、建立一個datalist列表
3、給datalist標籤新增一個id
4、給輸入框新增一個list屬性，該list的值為datalist標籤的id屬性的值
請輸入你的車型：<input type="text" list="cars">
<datalist id="cars">
<option>寶馬</option>
<option>賓士</option>
<option>路虎</option>
<option>賓利</option>
</datalist>2.4、select標籤：用於定義下拉列表，下拉列表不能輸入內容，只能從列表中選擇;可以通過option標籤新增一個select屬性來指定列表的預設值；可以通過給option標籤包裹一層optgroup標籤來給下拉列表的資料進行分類
<select>
<optgroup label="北京">
<option selected="selected">朝陽區</option>
<option>昌平區</option>
<option>通州區</option>
</optgroup>
<optgroup label="廣州">
<option>天河區</option>
<option>越秀區</option>
</optgroup>
</select>2.5、textarea標籤：定義一個多行輸入框;預設情況下輸入框可以無限換行，有自己的寬高，可通過cols和rows來指定輸入框的寬高，但是還是可以無限往下輸入；預設情況下輸入框是可以手動拉伸的
<textarea cols="2" rows="5"></textarea>小練習：
<body>
<form action="https://www.baidu.com/">
<p>
賬號:<input type="text" name="account">
</p>
<p>
密碼:<input type="password" name="pwd">
</p>
<!--注意點：單選框和多選框指定的name值要一樣-->
<p>
性別:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender" checked="checked">保密
</p>
<p>
愛好：
<input type="checkbox" name="sport">籃球
<input type="checkbox" name="sport">足球
<input type="checkbox" checked="checked" name="sport">羽毛球
</p>
<p>
簡介：
<textarea cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日：
<input type="date" name="date">
</p>
<p>
郵箱：
<input type="email" name="email">
</p>
<p>
電話：
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="註冊">
<input type="reset" value="清空">
</p>
</form>
</body>