HTML 表格和表单综合应用技术练习：制作调查问卷（内含超详细代码解读）
这一篇来记录HTML5表格和表单综合应用的学习，以制作状况调查问卷为例，效果如图：
注：完整代码见文章末尾处。
外观加工
提交按钮：
.btn {
width: 80px;
height: 35px;
border: none;
background-color: #99ccff;
color: #993564;
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>状况调查问卷</title>
<style type="text/css">
table{
margin: 0 auto;
padding: 0;
width: 800px;
font-size: 14px;
border-collapse:collapse;
border-color: #000000;
}
td{
height: 35px;
padding: 4px;
}
input{
font-size: 14px;
border: 0;
}
.btn {
width: 80px;
height: 35px;
border: none;
background-color: #99ccff;
color: #993564;
}
.kuan{
width: 100px;
}
.long{
width: 200px;
}
</style>
</head>
<body>
<form method="post" action="">
<table border="1" cellpadding="0" cellspacing="0" align="center">
<caption>状况调查问卷</caption>
<tr>
<td colspan="4" bgcolor="#00cc99">个人基本信息</td>
</tr>
<tr>
<td>
姓名:
<input class="kuan" type="text" name="username"/>
</td>
<td>
性别:
<input class="kuan" type="text" name="username"/>
</td>
<td colspan="2">
年龄:
<input id="s1" type="radio" name="age" value="1"/>
<label for="s1">18以下</label>
<input id="s2" type="radio" name="age" value="2"/>
<label for="s2">18-23</label>
<input id="s3" type="radio" name="age" value="3"/>
<label for="s3">24-28</label>
<input id="s4" type="radio" name="age" value="4"/>
<label for="s4">29-38</label>
</td>
</tr>
<tr>
<td colspan="2">
曾用名:
<input class="long" type="text" name="username"/>
（没有可不填）
</td>
<td>
婚姻状况：
<input id="s1" type="radio" name="hunyin" value="1"/>
<label for="s1">未婚</label>
<input id="s2" type="radio" name="hunyin" value="2"/>
<label for="s2">已婚</label>
</td>
<td>
宗教信仰：
<input id="s1" type="radio" name="zongjiaoxinyang" value="1"/>
<label for="s1">有信仰</label>
<input id="s2" type="radio"name="zongjiaoxinyang" value="2"/>
<label for="s2">无信仰</label>
</td>
</tr>
<tr>
<td>
政治面貌:
<input class="kuan" type="text" name="username"/>
</td>
<td colspan="3">
联系电话:
<input type="text" name="username"/>
</td>
</tr>
<tr>
<td colspan="4">
学历：
<input id="s1" type="radio" name="xueli" value="1"/>
<label for="s1">初中或以下；</label>
<input id="s2" type="radio" name="xueli" value="2"/>
<label for="s2">高中或中专；</label>
<input id="s3" type="radio" name="xueli" value="3"/>
<label for="s3">大学本科；</label>
<input id="s4" type="radio" name="xueli" value="4"/>
<label for="s4">硕士；</label>
<input id="s5" type="radio" name="xueli" value="5"/>
<label for="s5">博士及以上；</label>
</td>
</tr>
<tr>
<td colspan="4">
所从事的行业状况？：<br>
<p>
<input id="s1" type="radio" name="hangye" value="1"/>
<label for="s1">机关、事业单位职工</label>
<input id="s2" type="radio" name="hangye" value="2"/>
<label for="s2">企业、公司员工</label><br>
</p>
<p>
<input id="s3" type="radio" name="hangye" value="3"/>
<label for="s3">经商</label>
<input id="s4" type="radio" name="hangye" value="4"/>
<label for="s4">自由职业</label> 
<input id="s5" type="radio" name="hangye" value="5"/>
<label for="s5">学生</label> 
<input id="s6" type="radio" name="hangye" value="6"/>
<label for="s6">其他</label>
</p>
</td>
</tr>
<tr>
<td colspan="4">
你有什么个人爱好？<br>
<p>
<input type="checkbox" name="aihao" value="1"/>阅读 
<input type="checkbox" name="aihao" value="2"/>听音乐 
<input type="checkbox" name="aihao" value="3"/>跑步
</p>
<p>
<input type="checkbox" name="aihao" value="4"/>看电影
<input type="checkbox" name="aihao" value="5"/>爬山  
<input type="checkbox" name="aihao" value="6"/>其他
</p>
</td>
</tr>
<tr>
<td colspan="4">
  
<input name="b1" type="submit" value="提交" class="btn">
  
<input name="b2" type="reset" value="重置" class="btn">
</td>
</tr>
</table>
</form>
</body>
</html>
