當需要向服務器提交數據時，我們一般會選擇使用form表單來實現數據的提交。
<form>標籤用來表示一個需要向服務器提交的數據表單，在這個form表單的子標籤裏，需要實現讓用戶 輸入、單選、多選(input標籤)，下拉選擇(select標籤)，點擊(button標籤或者input標籤)，輸入大段文字(textarea標籤)等操作。
一.form標籤的使用
<form action="http://www.baidu.com" method="post">
<!-- 在這裏放入input/select/textarea等子標籤，用來讓用戶輸入內容 -->
</form>
常見屬性
| 屬性名 | 取值 | 含義 |
|---|---|---|
| action | url | 表示當點擊提交按鈕時，form表單裏的數據要提交到的服務器地址 |
| method | get或post | 表示向服務器提交數據時的方式，支持get和post提交，默認提交方式是get |
二. form表單的常見屬性
| 屬性名 | 取值 | 含義 |
|---|---|---|
| type | text | 默認值，顯示一個普通的文本輸入框 |
| button | 顯示一個普通按鈕 | |
| submit | 顯示一個提交按鈕，點擊時，會提交所在form表單裏的數據 | |
| image | 根據src屬性指定的圖片路徑，加載顯示一張圖片，作爲提交按鈕 | |
| reset | 顯示一個重置按鈕，點擊時，會重置所在form表單裏的數據 | |
| radio | 顯示一個單選框，多個相關聯的單選框name屬性值要一樣，否則無法實現多選 | |
| checkbox | 顯示一個複選框 | |
| file | 顯示一個文件按鈕，點擊時可以選擇電腦上的文件 | |
| password | 顯示一個密碼輸入框，當用戶輸入時，會顯示成爲密文 | |
| number | 顯示一個輸入框，用戶只能輸入數字、正負號和字母e,其他非數字無法輸入 | |
| 顯示一個文本輸入框，用戶輸入的內容要符合電子郵箱地址，否則點擊提交按鈕時會出現錯誤提示，無法提交數據 | ||
| tel | 控制用戶輸入手機號，當用戶使用手機訪問網頁，點擊文本框時，會彈出撥號鍵盤 | |
| name | 任意文本 | 設置input的名稱，當提交給服務器時，會作爲key提交 |
| value | 任意文本 | 當提交給服務器時，會作爲value提交 當input爲文本輸入框時，設置文本輸入框上的內容；當input爲按鈕時，用來設置按鈕上的顯示文字 |
| checked | checkeck或者不設置 | 當type爲radio或者checkbox時，用來設置默認選中 |
| autofocus | autofocus或者不設置 | 設置當打開頁面時，文本輸入框是否自動獲取焦點 |
| autocomplete | autocomplete或者不設置 | 設置是否自動補全，注意，只有input標籤設置了name屬性以後，autocomplete纔有效 |
| required | required或不設置 | 表示該輸入框必須要填寫，否則無法提交 |
| readonly | readonly或不設置 | 表示該輸入框裏的數據不可修改 |
| disabled | disabled或不設置 | 表示禁用文本輸入框，多用於按鈕 |
| max/min | 數字 | 當type爲number時，用來設置最大值和最小值區間 |
| placeholder | 任意文本 | 當input的類型爲輸入框時，用來在輸入框中顯示提示信息 |
三 .form表單的練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
form 表單
action: 作用是提交給服務器的地址
method: 指定以哪種方式向服務器提交數據
get:所有的請求參數直接拼接到地址欄
post:單獨
-->
<!-- <input type="text"> -->
<form action="https://www.baidu.com" method="get">
<!--
input:用來接收用戶的輸入
type屬性,用來接收規定輸入的類型
常見的可選值如下:
text:默認值,顯示一個普通的文本輸入框
number: 允許用戶輸入數字,包括 . - e
tel: 只在移動端有效
button: 顯示一個按鈕
radio: 用來顯示一個單選按鈕,如果想要實現聯動,需要給input添加相同的name屬性
checkbox:用來顯示一個多選框
reset:重置當前form表單裏的數據
submit: 用來向服務器提交數據(form 表單的地址),
value屬性,用來設置input標籤的內容
當type = button 時,用來表示在按鈕上顯示文字
placeholder屬性,用來顯示input的輸入提示信息
name屬性，設置input的名字，當提交給服務器時，會作爲key提交
-->
<!-- select標籤用來顯示一個下拉選擇框-->
<span>用戶名:</span> <input type="text" value="zhangsan" name="username" accesskey="u"><br>
<span >密碼:</span> <input type="password" placeholder="請輸入密碼" name="password"> <br>
<span>性別:</span>
<!--
label 標籤.使用label 標籤的for屬性和另一個標籤的id屬性進行關聯
-->
<input type="radio" name="sex" id="nan" value="male"> <label for="nan" >男</label>
<input type="radio" name="sex" id="nv" value="female"> <label for="nv">女</label>
<input type="radio" name="sex" id="secret" value="secret"> <label for="secret">保密</label><br>
<span>愛好:</span>
<input type="checkbox" id="tubu" name="hobbies" value="hiking" checked> <label for="tubu">徒步</label>
<input type="checkbox" id="paobu" name="hobbies" value="running"> <label for="paobu">跑步</label>
<input type="checkbox" id="pashan" name="hobbies" value="climbing"> <label for="pashan">爬山</label><br>
<span>手機號:</span> <input type="tel" name="phone">
<input type="button" value="點擊發送驗證碼" id=""><br>
<span>文件:</span> <input type="file" ><br>
<span>照片</span> <input type="image"><br>
<span>省份</span>
<select name="province" >
<option value="hubei">湖北</option>
<option value="henan" selected>河南</option>
<option value="sichuan">四川</option>
<option value="shanxi">陝西</option>
<option value="sx">山西</option>
</select><br>
<input type="reset" value="重置">
<input type="submit" value="註冊">
</form>
</body>
</html>
效果圖
