表單標籤，表單域
表單標籤：表單控制（包含了具體的表單功能項，如單行文字輸入框，複選框，提交按鈕，重置按鈕等）；提示資訊（一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作）；表單域（相當於一個容器，用來容納所有的表單控制和提示資訊，如果不定義表單域，表單中的資料就無法傳送到後臺伺服器）
（1）input控制元件：<input />為單標籤。type為最基本的屬性。
type:text(屬性值) 單行文字輸入框
Password 密碼輸入框
Radio 單選按鈕
Checkbox 複選框
Button 普通按鈕
Submit 提交按鈕
Reset 重置按鈕
Image 影象形式的提交按鈕
File 檔案域
Name:由使用者自定義 控制元件的名稱
Value:由使用者自定義 input控制元件中的預設文字值
Size:正整數 input控制元件中在頁面中的顯示寬度
Checked:checked 定義選擇控制元件預設被選中的項
Maxlength:正整數 控制允許輸入的最多字元數
（2）lable標籤：用於繫結一個表單元素，當點選lable標籤的時候，被繫結的表單元素就會獲得輸入焦點。
for屬性規定lable與哪個表單元素繫結
<lable for=“male”>male</lable>
<lable type=“radio” name=“sex” id=“male” value=“male”>
（3）textarea控制元件文字域：<textarea></textarea>
（4）下拉選單：<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
......
</select>（在option中定義selected=selecteds時，當前即為預設選中項）。
（5）表單域：form被用於自定義表單域，建立一個表單，
<form action=”url地址” method=”提交方式 name=”表單名稱”>
常用屬性：action(將收集的資訊傳遞給伺服器處理，action指接收並處理表單資料的伺服器程式的url地址)； method(用於設定表單資料的提交方式，其取值為get或post);name(用於指定表單的名稱)
類選擇器：.類名{屬性1:屬性值1；} 注意：每個表單都有自己的表單域
表單控制元件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>好好學習天天向上</title>
</head>
<body>
使用者名稱：<input type="text" value ="使用者名稱"/><!--這是一個文字框--><br/>
密碼：<input type="password" maxlength="6"/> <!-- 這是一個密碼框 ctrl+/ maxlength密碼的最大長度 --><br />
性別： <input type="radio" name ="sex" /> 女 <input type="radio" name ="sex" /> 男 <input type="radio" name ="sex" checkd ="checked" /> 人妖
<input type="radio" name ="sex1" /> 未知<!-- 單選框 如果是一組通過相同的name值來實現 sex與sex1名不一樣，所以能選兩個--><br />
愛好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />籃球 <input type ="checkbox" name="hobby" />排球 <!-- 複選框 可以同時選多個 checkd ="checked"為預設--><br />
搜尋：<input type="button" value="搜尋啥"> <!-- 普通按鈕 --><br />
<input type="submit" value="提交表單"/> <!-- 提交按鈕 -->
<input type="reset" value="重置表單"/> <!-- 重置按鈕 --><br />
<input type="image" src="ta.jpg"/> <!--
影象按鈕 --><br />
上傳頭像：<input type="file" /> <!-- 檔案按鈕 -->
</body>
</html>表單域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>好好學習天天向上</title>
</head>
<body>
使用者名稱：<input type="text" value ="使用者名稱"/><!--這是一個文字框--><br/>
密碼：<input type="password" maxlength="6"/> <!-- 這是一個密碼框 ctrl+/ maxlength密碼的最大長度 --><br />
性別： <input type="radio" name ="sex" /> 女 <input type="radio" name ="sex" /> 男 <input type="radio" name ="sex" checkd ="checked" /> 人妖
<input type="radio" name ="sex1" /> 未知<!-- 單選框 如果是一組通過相同的name值來實現 sex與sex1名不一樣，所以能選兩個--><br />
愛好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />籃球 <input type ="checkbox" name="hobby" />排球 <!-- 複選框 可以同時選多個 checkd ="checked"為預設--><br />
搜尋：<input type="button" value="搜尋啥"> <!-- 普通按鈕 --><br />
<input type="submit" value="提交表單"/> <!-- 提交按鈕 -->
<input type="reset" value="重置表單"/> <!-- 重置按鈕 --><br />
<input type="image" src="ta.jpg"/> <!--
影象按鈕 --><br />
上傳頭像：<input type="file" /> <!-- 檔案按鈕 -->
</body>
</html>文字域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>好好學習天天向上</title>
</head>
<body>
<form action="xxx.php" method="get" name="userMessage">
使用者名稱：<input type="text" value ="使用者名稱"/><!--這是一個文字框--><br/>
密碼：<input type="password" maxlength="6"/> <!-- 這是一個密碼框 ctrl+/ 註釋的快捷鍵 maxlength密碼的最大長度 --><br />
性別： <input type="radio" name ="sex" /> 女 <input type="radio" name ="sex" /> 男 <input type="radio" name ="sex" checkd ="checked" /> 人妖
<input type="radio" name ="sex1" /> 未知<!-- 單選框 如果是一組通過相同的name值來實現 sex與sex1名不一樣，所以能選兩個--><br />
愛好：<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />籃球 <input type ="checkbox" name="hobby" />排球 <!-- 複選框 可以同時選多個 checkd ="checked"為預設--><br />
搜尋：<input type="button" value="搜尋啥"> <!-- 普通按鈕 --><br />
<input type="submit" value="提交表單"/> <!-- 提交按鈕 -->
<input type="reset" value="重置表單"/> <!-- 重置按鈕 --><br />
<input type="image" src="ta.jpg"/> <!--
影象按鈕 --><br />
上傳頭像：<input type="file" /> <!-- 檔案按鈕 -->
</form>
<!--
標籤名稱：form 表單標籤
屬性：action:提交的去向,目標地址的url
method:設定提交請求的方式，get和post；預設為get
get和post提交有什麼區別？
get傳輸：將內容資訊放在位址列傳輸，而且長度限制在1k,而且安全性不好。
post傳輸：將內容房子body資訊中傳輸。沒有長度限制。
子標籤：
input標籤：需要提交其中的value，必須有一個name屬性。
屬性：type：password 等
//-
通過下面的例項的演示，發現在某些情況下可以用form去做連結，而且做連結的同時還能提交資料到
這個目標的地址檔案上。
fieldset標籤：定義域
legend標籤：定義域的標題
-->
</body>
</html>新增表單屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
使用者名稱：<input type="text" placeholder="請輸入使用者名稱" autofocus />
上傳頭像：<input type="file" multiple />
<h4>自動記錄完成</h4>
1.autocomplete首先需要提交按鈕<br />
2.這個表單您必須給他名字
<form action="">
姓名：<input type="text" autocomplete="on" name="userName" /><br />
<input type="submit" />
</form>
暱稱：<input type="text" required accesskey="s"/>
<!-- 邊框裡不能為空 --><br />
</body>
</html>新增表單type型別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>HTML5新增的input type型別 那些表單</legend>
<form action="">
郵箱：<input type="email" /> <!-- [email protected] --><br />
手機：<input type="tel" /> <!-- 手機格式 數字 --><br />
數字：<input type ="number" /> <!-- 只能是數字 --><br />
url：<input type ="url" /> <!-- 網址格式 --><br />
搜尋：<input type ="search" /> <!-- 搜尋格式 --><br />
區域：<input type ="range" /> <!-- 區域格式 滑塊 --><br />
時間：<input type ="time" /> <!-- 時間格式 小時 分鐘 --><br />
<input type="submit" />
年月日：<input type ="date" /> <!-- 獲得年月日 --><br />
月份：<input type ="month" /> <!-- 獲得月份 --><br />
星期：<input type ="week" /> <!-- 獲得年 星期 --><br />
顏色：<input type ="color" /> <!-- 獲得顏色 --><br />
</form>
</fieldset>
</body>
</html>