對于表單中可以用的元素和控件，我們已經學習了<input>、<select>和<textarea>，今天準備做一個綜合的業務示例。
按照下面這張圖，我們來實作吧!
首先，對這張圖檔裡的内容進行下業務拆解，可以看到頂部 青春不常在，抓緊談戀愛 是一部分，下面的是另一部分。上面部分使用标題标簽就可以，下面可以使用表單标簽來展示。
先來第一行的性别，男女
看下實作效果:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>戀愛網站</title>
</head>
<body>
<!--頂部展示-->
<h4>青春不常在，抓緊談戀愛</h4>
<!--下面是table部分展示-->
<table width="500">
<tr><!--一行展示-->
<td><!--每一行的左邊展示-->
性别:
</td>
<td><!--每一行的右邊展示-->
<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 男
<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 女
</td>
</tr>
</table>
</body>
</html>
對頁面的代碼進行了更多的優化，可以在圖檔上時進行點選
<body>
<!--頂部展示-->
<h4>青春不常在，抓緊談戀愛</h4>
<!--下面是table部分展示-->
<table width="500">
<tr><!--一行展示-->
<td><!--每一行的左邊展示-->
性别:
</td>
<td><!--每一行的右邊展示-->
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="1.jpeg" width="15" height="10"> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="1.jpeg" width="15" height="10"> 女</label>
</td>
</tr>
</table>
</body>
頁面效果是沒有變化的
接着我們看看第二行的效果圖:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>戀愛網站</title>
</head>
<body>
<!--頂部展示-->
<h4>青春不常在，抓緊談戀愛</h4>
<!--下面是table部分展示-->
<table width="800">
<tr><!--一行展示-->
<td><!--每一行的左邊展示-->
性别:
</td>
<td><!--每一行的右邊展示-->
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="1.jpeg" width="15" height="10"> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="1.jpeg" width="15" height="10"> 女</label>
</td>
</tr>
<tr><!--第二行-->
<td>
生日:
</td>
<td>
<select>
<option>請選擇年份</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
</select>
<select>
<option>請選擇月份</option>
<option>12</option>
<option>11</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
</select>
<select>
<option>請選擇日期</option>
<option>30</option>
<option>29</option>
<option>28</option>
<option>27</option>
<option>26</option>
<option>25</option>
</select>
</td>
</tr>
</table>
</body>
</html>
這裡對應三個select下拉清單元素，生日的年、月和日