表單標籤
input元素的type屬性：
| 屬性值 | 描述 |
|---|---|
| button | 定義可以點擊的按鈕（多數情況下用於啓動腳本） |
| checkbox | 定義複選框 |
| file | 定義輸入字段和瀏覽按鈕，供文件上傳 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的提交按鈕 |
| password | 定義密碼字段，該字段中的字符被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕，重置按鈕會還原表單中的所有數據 |
| submit | 定義提交按鈕，提交按鈕會把表單發送到服務器 |
| text | 定義單行輸入字段，用戶可在其中輸入文本，默認寬度爲20字符 |
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>網站註冊頁面</h3>
<!-- action將表單信息提交給demo.php頁面，http請求方法爲post，表單名稱爲name1 -->
<form action="demo.php" method="POST" nanme="name1">
<table style="width: 800px;">
<tr>
<td>性別</td>
<td>
<!-- 性別的input元素name屬性值必須相同，才能實現單選的效果 -->
<!--checked="checked"設置當前radio爲默認值-->
<input type="radio" id="male" value="male" name="gender" checked="checked">
<!-- label標籤的for屬性和input的id屬性相同,實現點擊label即點擊input元素，增加用戶體驗-->
<label for="male">男</label>
<input type="radio" id="female" value="female" name="gender">
<label for="female">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<!--下拉菜單-->
<select name="" id="">
<!--selected="selected"設置選項爲默認值-->
<option selected="selected">--請選擇年--</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<select name="" id="">
<option value="">--請選擇月--</option>
<option value="">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
</select>
<select name="" id="">
<option value="">--請選擇日--</option>
<option value="">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
</select>
</div>
</td>
</tr>
<tr>
<td>所在地區</td>
<td>
<!--maxlength設置允許輸入的最大字符數-->
<input type="text" id="area" value="北京思密達" maxlength="10">
</td>
</tr>
<tr>
<td>婚姻狀況</td>
<td>
<input type="radio" id="1" name="marry" checked="checked">
<label for="1">未婚</label>
<input type="radio" id="2" name="marry">
<label for="2">已婚</label>
<input type="radio" id="3" name="marry">
<label for="3">離婚</label>
</td>
</tr>
<tr>
<td>學歷</td>
<td>
<input type="text" value="幼兒園" id="education">
</td>
</tr>
<tr>
<td>喜歡的類型</td>
<td>
<!--相同的name值實現將多個checkbox值賦值給該name變量-->
<input type="checkbox" id="wumei" name="love">
<label for="wumei">嫵媚的</label>
<input type="checkbox" id="cute" name="love">
<label for="cute">可愛的</label>
<input type="checkbox" id="xxr" name="love">
<label for="xxr">小鮮肉</label>
<input type="checkbox" id="llr" name="love">
<label for="llr">老臘肉</label>
<input type="checkbox" id="all" name="love">
<label for="all">都喜歡</label>
</td>
</tr>
<tr>
<td>自我介紹</td>
<td>
<!--textarea實現大量文本書寫，可用於留言板等需要寫入大量文字的場景-->
<textarea name="" id="info" cols="30" rows="5">自我介紹</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit">免費註冊</button>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="agree" checked="checked">
<label for="agree">我同意註冊條款和會員加入標準</label>
</td>
</tr>
<tr>
<td></td>
<td>
<h1>我承諾</h1>
<ul>
<li>熱愛國家</li>
<li>熱愛人民</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
效果圖
