概念
表單目的是爲了收集用戶信息。
在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控件（也稱爲表單元素）、提示信息和表單域3個部分構成。
比如當我們在註冊用戶時，就包括：
-
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。 -
提示信息：
一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。 -
表單域：
他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。
input 控件(重點)
input 輸入的意思
在上面的語法中，<input />標籤爲單標籤，type屬性爲其最基本的屬性 類型 ，其取值有多種，用於指定不同的控件類型。除了type屬性之外，<input />標籤還可以定義很多其他的屬性，其常用屬性如下表所示。
type 說明了屬於那種表單
radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
label標籤(理解)
label 標籤爲 input 元素定義標註（標籤）。
作用： 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪個表單元素綁定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控件(文本域)
text 文本框 只能寫一行文本呢
textarea 文本域
如果需要輸入大量的信息，就需要用到<textarea></textarea>標籤。通過textarea控件可以輕鬆地創建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>
比如說發評論的輸入框
下拉菜單
使用select控件定義下拉菜單的基本語法格式如下 select 選擇
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意：
- <select></select>中至少應包含一對<option></option>。
- 在option 中定義selected =" selected "時，當前項即爲默認選中項。
表單域
在HTML中，form標籤被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性：
- Action
在表單收集到信息後，需要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。 - method
用於設置表單數據的提交方式，其取值爲get或post。 - name
用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意：
每個表單都應該有自己表單域。
案例 有緣網
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有緣婚姻網</title>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" align=center>
<caption><h4 style="color: pink;font-size: 25px;">你我盡在有緣</h4> </caption>
<tr height="30">
<td>姓名：</td>
<td><input type="text" value="二芳" style="color:#ccc;" /> </td>
</tr>
<tr height="30">
<td>所在地區：</td>
<td><input type="text" value="滄州青縣" style="color:#ccc;" /> </td>
</tr>
<tr height="30">
<td>電話號碼：</td>
<td><input type="text" value="13785662655" style="color:#ccc;" /> </td>
</tr>
<tr height="30">
<td>用戶名：</td>
<td><input type="text" value="喜子" style="color:#ccc;" /> </td>
</tr>
<tr height="30">
<td>密碼</td>
<td><input type="password" value="" style="color:#ccc;" /> </td>
</tr>
<!-- 一下是 年齡 -->
<tr height="30">
<td>出生日期</td>
<td>
<select name="" id="">
<option value="">選擇年份</option> <!-- option選項 -->
<option value="">1990</option> <!-- option選項 -->
<option value="">1991</option> <!-- option選項 -->
<option value="">1992</option> <!-- option選項 -->
<option value="">1993</option> <!-- option選項 -->
<option value="">1994</option> <!-- option選項 -->
<option value="">1995</option> <!-- option選項 -->
<option value="">1996</option> <!-- option選項 -->
<option value="">1997</option> <!-- option選項 -->
</select>
<select name="" id="">
<option value="">選擇月份</option> <!-- option選項 -->
<option value="">1月份</option> <!-- option選項 -->
<option value="">2月份</option> <!-- option選項 -->
<option value="">3月份</option> <!-- option選項 -->
<option value="">4月份</option> <!-- option選項 -->
<option value="">5月份</option> <!-- option選項 -->
<option value="">6月份</option> <!-- option選項 -->
<option value="">7月份</option> <!-- option選項 -->
<option value="">8月份</option> <!-- option選項 -->
<option value="">9月份</option> <!-- option選項 -->
<option value="">10月份</option> <!-- option選項 -->
<option value="">11月份</option> <!-- option選項 -->
<option value="">12月份</option> <!-- option選項 -->
</select>
</td>
</tr>
<!-- 一下是 籍貫 -->
<tr height="30">
<td>籍貫</td>
<td>
<select name="" id="">
<option value="">籍貫</option> <!-- option選項 -->
<option value="" selected="selected">滄州</option> <!-- option選項 -->
<option value="">哈爾濱</option> <!-- option選項 -->
<option value="">青島</option> <!-- option選項 -->
<option value="">大連</option> <!-- option選項 -->
</select>
</td>
</tr>
<tr height="30">
<td>性別</td>
<td style="color: blue;">
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex"/> 人妖
</td>
</tr height="30">
<tr>
<td>喜歡的類型</td>
<td>
<input type="checkbox" name="love">妖嬈
<input type="checkbox" name="love">氣質
<input type="checkbox" name="love">嬉皮內柔
<input type="checkbox" name="love" checked="checked" />呼呼嚕嚕
</td>
</tr>
<tr height="30">
<td>上傳頭像</td>
<td>
<input type="file" >
</td>
</tr>
<tr height="60">
<td>給我留言</td>
<td>
<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="註冊">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</body>
</html>