根据我们上一篇学习的表单知识点，做一个综合性练习。
作出如图的表单样式，先是一个表格样式，创建标签作为表头，和空连接的创建，这就用到了之前学过的表格的知识论了。剩下的差不多就是表单元素、属性的应用。
先观察一下这个页面的布局，这脑袋里先有一个框架布局，思路先写什么，都用什么元素。
自己先照着图片自己做一下，看一下效果，了解如何布局，再看下面的解析。
页面效果：
步骤操作：
1、先给到表单元素form，再给表格元素，标题用<h1>，表格的大小。
<form action="" method="get">
<h1>青春不常在，抓紧谈恋爱</h1>
<table border="1">
<colgroup>
<col width="100">
<col width="600">
</colgroup>2、就在表格里面写入表单元素，性别的单选框，回想一下
<tr>
<th>性别</th>
<td>
<label>男</label>
<input type="radio">
<label>女</label>
<input type="radio">
</td>
</tr>3、三个日期的下拉选项，用到select，option
<tr>
<th>生日</th>
<td>
<select >
<option value="year">--请选择年份--</option>
<option value="year">2001</option>
<option value="year">2002</option>
<option value="year">2003</option>
<option value="year">2004</option>
</select>
<select>
<option value="year">--请选择月份--</option>
<option value="year">1</option>
<option value="year">2</option>
<option value="year">3</option>
<option value="year">4</option>
<option value="year">5</option>
<option value="year">6</option>
<option value="year">7</option>
<option value="year">8</option>
<option value="year">9</option>
</select>
<select>
<option value="year">--请选择日期--</option>
<option value="year">1</option>
<option value="year">2</option>
<option value="year">3</option>
<option value="year">4</option>
<option value="year">5</option>
<option value="year">6</option>
<option value="year">7</option>
<option value="year">8</option>
<option value="year">9</option>
</select>
</td>
</tr>4、就是一个输入框，给一个提示文本
<tr>
<th>所在地区</th>
<th align="left">
<input type="text" placeholder="北京思密达">
</th>
</tr>5、这个就是和上面的原理一样，单选框，文本框
<tr>
<th>
婚姻状况
</th>
<td>
<label>未婚</label>
<input type="radio">
<label>已婚</label>
<input type="radio">
<label>离婚</label>
<input type="radio">
</td>
</tr>
<tr>
<th>学历</th>
<td align="left">
<input type="text" placeholder="幼儿园">
</td>
</tr>
<tr>
<th>月薪</th>
<th align="left">
<input type="text" placeholder="10000-20000">
</th>
</tr>
<tr>
<th>手机号码</th>
<th align="left">
<input type="number">
</th>
</tr>
<tr>
<th>所在地区</th>
<th align="left">
<input type="text">
</th>
</tr>6、这个是一个复选框
<tr>
<th>喜欢的类型</th>
<th align="left">
<input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
<input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
<input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉
</th>
</tr>7、多行文本的输入，用到了我们的textarea标签，cols=“每行中的字符数” ，rows=“显
示的行数”。下面就是个注册的按钮。
<tr>
<th>自我介绍</th>
<th align="left">
<textarea name="showText" cols="20" rows="2"></textarea>
</th>
</tr>
<tr>
<th></th>
<th align="left">
<input type="submit" value="免费注册" >
</th>
</tr>8、这就是一个单选，下面是一个空连接的使用，做这的时候为了便利就不给到具体的网页链接，用空链接代替。最后是无序列表的使用。
<tr>
<th></th>
<th align="left">
<input type="radio">
<label>我同意注册条款和会员加入标准</label>
</th>
</tr>
<tr>
<th></th>
<th align="left"><a href="#" >我是会员</a>
<a href="#" >立即登录</a>
<a href="#" >前往修改页面</a></th>
</tr>
<tr>
<th></th>
<th align="left">
<h2>我承诺</h2>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</th>
</tr>全部代码展示：
<!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>
<form action="" method="get">
<h1>青春不常在，抓紧谈恋爱</h1>
<table border="1">
<colgroup>
<col width="100">
<col width="600">
</colgroup>
<tr>
<th>性别</th>
<td>
<label>男</label>
<input type="radio">
<label>女</label>
<input type="radio">
</td>
</tr>
<tr>
<th>生日</th>
<td>
<select >
<option value="year">--请选择年份--</option>
<option value="year">2001</option>
<option value="year">2002</option>
<option value="year">2003</option>
<option value="year">2004</option>
</select>
<select>
<option value="year">--请选择月份--</option>
<option value="year">1</option>
<option value="year">2</option>
<option value="year">3</option>
<option value="year">4</option>
<option value="year">5</option>
<option value="year">6</option>
<option value="year">7</option>
<option value="year">8</option>
<option value="year">9</option>
</select>
<select>
<option value="year">--请选择日期--</option>
<option value="year">1</option>
<option value="year">2</option>
<option value="year">3</option>
<option value="year">4</option>
<option value="year">5</option>
<option value="year">6</option>
<option value="year">7</option>
<option value="year">8</option>
<option value="year">9</option>
</select>
</td>
</tr>
<tr>
<th>所在地区</th>
<th align="left">
<input type="text" placeholder="北京思密达">
</th>
</tr>
<tr>
<th>
婚姻状况
</th>
<td>
<label>未婚</label>
<input type="radio">
<label>已婚</label>
<input type="radio">
<label>离婚</label>
<input type="radio">
</td>
</tr>
<tr>
<th>学历</th>
<td align="left">
<input type="text" placeholder="幼儿园">
</td>
</tr>
<tr>
<th>月薪</th>
<th align="left">
<input type="text" placeholder="10000-20000">
</th>
</tr>
<tr>
<th>手机号码</th>
<th align="left">
<input type="number">
</th>
</tr>
<tr>
<th>所在地区</th>
<th align="left">
<input type="text">
</th>
</tr>
<tr>
<th>喜欢的类型</th>
<th align="left">
<input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
<input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
<input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉
</th>
</tr>
<tr>
<th>自我介绍</th>
<th align="left">
<textarea name="showText" cols="20" rows="2"></textarea>
</th>
</tr>
<tr>
<th></th>
<th align="left">
<input type="button" value="免费注册" >
</th>
</tr>
<tr>
<th></th>
<th align="left">
<input type="radio">
<label>我同意注册条款和会员加入标准</label>
</th>
</tr>
<tr>
<th></th>
<th align="left"><a href="#" >我是会员</a>
<a href="#" >立即登录</a>
<a href="#" >前往修改页面</a></th>
</tr>
<tr>
<th></th>
<th align="left">
<h2>我承诺</h2>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</th>
</tr>
</table>
</form>
</body>
</html>学到了吧。多加练习更好地掌握每一个元素、属性。
