HTML前端开发入门之表单标签/labei标签/datalist标签
##表單標簽
<!DOCTYPE html>
<html lang="en">
<head>
??? <meta charset="UTF-8">
??? <title>表單標簽</title>
</head>
<body>
<!--
1.什么是表單？
表單就是專門用來收集用戶信息的
2.什么是表單元素？
2.1什么是元素？
在HTML中標簽/標記/元素都是指HTML中的標簽
例如：<a>a標簽/a標記/a元素
表單元素其實還是HTML中的一些標簽，只不過這些標簽比較特殊，在瀏覽器中所有的表單標簽都有特殊的外觀和默認的功能
3.表單的格式：
<form>
??? <表單元素>
</form>
4.常見的表單元素：
input標簽,定義輸入框，input標簽有一個type屬性，這個屬性有很多類型的取值，取值不同就決定了input的功能和外觀
select標簽
作用：用于定義下拉列表
格式：
<select>
??? <optgroup label="類別名稱"></optgroup>
??????? <option>列表數據<option>
??????? <option>列表數據<option>
??????? <option>列表數據<option>
</select>
注意點：
1.下拉列表不能輸入內容，但是可以直接在列表中選擇內容
2.可以通過給option標簽添加一個selected屬性來指定列表的默認值
<option selected="selected">成都</option>
3.可以通過給option標簽包裹一層optgroup標簽來給下拉列表中的數據分類
textarea標簽
作用：定義一個多行輸入框
格式：
<textarea>
</textarea>
注意點：
1.默認情況下輸入框可以無限換行
2.默認情況下輸入框有自己的寬度和高度
3.可以通過cols和rows來指定輸入框的寬度和高度，但是雖然指定了列數和行數，但是還是可以無限往下輸入
4.默認情況下，輸入框是可以手動拉伸的
-->
<form action="">
??? <!--明文輸入框-->
??? 賬號：<input type="text">
??? <!--暗文輸入框-->
??? <br>
??? 密碼：<input type="password">
??? <!--給輸入框設置默認值-->
??? <br>
??? 賬號：<input type="text" value="郵箱/電話/賬號"><br>
??? 密碼：<input type="password" value="123">
??? <br>
??? <!--
??? 單選框和多選框
??? 注意點：
??? 1.默認情況下單選框不會互斥，要想要單選框互斥，必須給每一個單元框標簽都設置一個name屬性，然后name屬性還必須設置相同的值
??? 2.要想我們的單選框默認選中某一個框子，那么可以給input標簽添加一個checked屬性
??? 3.在HTML中，屬性的取值和屬性的名稱一樣，可以只寫一個，但是在xHTML中必須寫上取值，所以在企業開發中，我們推薦大家不要省略取值
??? -->
??? 性別：
??? <input type="radio" name="gender">男
??? <input type="radio" name="gender">女
??? <input type="radio" name="gender" checked="checked">保密
??? <br>
??? 愛好：
??? <input type="checkbox">足球
??? <input type="checkbox">棒球
??? <input type="checkbox" checked="checked">籃球
??? <input type="checkbox" checked="checked">學習
</form>
<form action="http://www.baidu.com">
??? <!--
??? 定義一個普通按鈕
? ??作用：配合js完成一些操作
??? -->
??? <input type="button" value="我是按鈕">
???
??? <!--定義一個圖片按鈕-->
??? <input type="image" src="images/領取紅包按鈕.png"><br>
??? <!--
??? 定義一個重置按鈕
??? 作用：清空表單的數據
??? 注意點：
??? 重置按鈕有默認的按鈕標題，默認叫做重置
??? 也可以通過value屬性來修改默認標題
??? -->
??? 賬號：<input type="text" name="aa">
??? <br>
??? 密碼：<input type="password" name="bb">
??? <input type="reset" value="清空">
??? <!--
??? 定義一個提交按鈕
??? 作用：將表單中的數據提交到遠程服務器
??? 注意點：
??? 要把表單中的數據提交到遠程服務器，必須滿足兩個條件
??? 1.告訴表單需要提交到哪個服務器
??? 可以通過form標簽的action屬性提交到哪個服務器
??? 2.告訴表單，表單中的哪些數據需要提交
??? 可以通過input標簽中的name屬性來選擇需要提交的內容
??? 在表單標簽中，除了按鈕標簽外，都可以通過value來指定需要提交到服務器的數據
??? -->
??? <input type="submit" value="登陸">
??? <!--
??? 隱藏域
??? 作用：用于悄悄咪咪的收集用戶的一些數據
??? 隱藏域是不會出現在界面中的
??? -->
??? <input type="hidden" value="666">
</form>
<select>
??? <option>武漢</option>
??? <option>西安</option>
??? <option>杭州</option>
??? <option selected="selected">成都</option>
</select>
<select>
??? <optgroup label="武漢"></optgroup>
??????? <option>江夏區</option>
??????? <option>武昌區</option>
??????? <option>漢陽區</option>
??? <optgroup label="游戲"
??????? <option>荒野行動</option>
??????? <option>刺激戰場</option>
??????? <option>穿越火線</option>
</select>
<textarea cols="2" rows="5">
</textarea>
</body>
</html>
##Label標簽
1.默認情況下文字和輸入框是沒有關聯關系的，也就是說點擊文字輸入框不會聚焦，如果想點擊文字時讓對應的輸入框聚焦
那么就需要讓文字和輸入框進行綁定
?
2.要想文字和輸入框綁定在一起，那么我們可以使用label標簽
?
3.綁定格式：
3.1將文字利用label標簽包裹起來
3.2給輸入框添加一個id屬性
3.3在label標簽中通過for屬性和輸入框的id進行綁定即可
<label for="zhanghao"> 賬號：</label><input type="text" id="zhanghao"><br>
##Datalist標簽
1.datalist標簽
作用：給輸入框綁定待選項
?
2.datalist格式：
<datalist>
??? <option>待選項內容</option>
</datalist>
?
3.如何給輸入框綁定待選列表
1.搞一個輸入框
2.搞一個datalist列表
3.給datalist列表標簽添加一個id
4.給輸入框添加一個list屬性，將datalist的id對應的賦值給list屬性即可
?
注意點：由于眾多瀏覽器不支持這個標簽，因此這個僅作了解
總結
以上是生活随笔為你收集整理的HTML前端开发入门之表单标签/labei标签/datalist标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 麻将与扑克的文化内涵
- 下一篇： 2017年html5行业报告,云适配发布