html基礎-form表單、input輸入框、select選擇框與文字框
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>
結果：