对于表单中可以用的元素和控件，我们已经学习了<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下拉列表元素，生日的年、月和日
今天先到这里，大家晚安~