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>
