HTML標簽：表單標簽
概念：用於采集用戶輸入的數據的。用於和服務器進行交互
表單標簽 form：
用於定義表單的。可以定義一個范圍，范圍代表采集用戶數據的范圍
form表單屬性：
1）action：指定提交數據的URL
2）method:指定提交方式,分類：一共7種，2種比較常用
get：1.請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議后講解)。
2.請求參數大小是有限制的。
3.不太安全。
post：1.請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議后講解)
2.請求參數的大小沒有限制。
3.較為安全。
3）表單項中的數據要想被提交：必須指定其name屬性
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<form action="/login" method="post">
用戶名：<input name="username"><br>
密碼：<input name="password"><br>
<!--登陸按鈕-->
<input type="submit" value="登錄" >
</form>
</body>
</html>
結果：
input標簽：可以通過type屬性值，改變元素展示的樣式
label：指定輸入項的文字描述信息， label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。語法格式：
<label for="username"> 用戶名 </label>：<input type="text" name="username" placeholder="請輸入用戶名" id="username">
type屬性：1）text：文本輸入框，默認值；placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息
2）password：密碼輸入框 (密文顯示)
3）radio:單選框 checked默認選中
*要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
*一般會給每一個單選框提供value屬性，指定其被選中后提交的值
*checked屬性，可以指定默認值
4）checkbox：復選框
*一般會給每一個單選框提供value屬性，指定其被選中后提交的值
*checked屬性，可以指定默認值
5) file：文件選擇框
6) hidden：隱藏域，用於提交一些信息。
7）按鈕：
submit：提交按鈕。可以提交表單
button：普通按鈕
image：圖片提交按鈕，src屬性指定圖片的路徑
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<form action="/login" method="get">
<label for="username"> 用戶名 </label>：<input type="text" name="username" placeholder="請輸入用戶名" id="username"><br>
<!-- type=password密碼加密， placeholder 為表單的默認的文案-->
密碼：<input type="password" name="password" placeholder="請輸入密碼"><br>
<!--radio單選框，要想實現單選 name值必須一致；value指定之后get帶參-->
性別：<input type="radio" name="gender" value="male" > 男
<input type="radio" name="gender" value="female" checked> 女
<br>
<!-- checkbox復選框，checked默認被選中-->
愛好：<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戲<br>
圖片: <input type="file" name="file"><br>
隱藏域：<input type="hidden" name="id" value="aaa"> <br>
取色器：<input type="color" name="color"><br>
<!-- 展示一個日期 年月日 2020-01-02-->
生日：<input type="date" name="birthday"> <br>
<!-- 展示一個日期 年月日 時分秒 -->
生日：<input type="datetime-local" name="birthday"> <br>
<!-- 校驗郵箱是否有@-->
郵箱：<input type="email" name="email"> <br>
<!-- 只能輸入數字-->
年齡：<input type="number" name="age"> <br>
<!--button后面可以與javascript一起使用實現動態的效果-->
<input type="submit" value="登錄" >
<input type="button" value="一個按鈕" ><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>
結果：
select: 下拉列表
子元素：option，指定列表項
textarea：文本域
cols：指定列數，每一行有多少個字符; rows：默認多少行。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<form action="/login" method="get">
省份：<select name="province">
<!-- 請選擇不被提交 selected表示默認選中的-->
<option value="">--請選擇--</option>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">陝西</option>
</select><br>
<!--文本域 cols列 rows行數-->
自我描述：
<textarea cols="20" rows="5" name="des"></textarea><br>
</form>
</body>
</html>
結果：
