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>&nbsp;<input id="s4" type="radio" name="hangye" value="4"/><label for="s4">自由职业</label>&emsp;&nbsp;<input id="s5" type="radio" name="hangye" value="5"/><label for="s5">学生</label>&emsp;<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"/>阅读&emsp;<input type="checkbox" name="aihao" value="2"/>听音乐&emsp;<input type="checkbox" name="aihao" value="3"/>跑步</p><p><input type="checkbox" name="aihao" value="4"/>看电影<input type="checkbox" name="aihao" value="5"/>爬山&emsp;&emsp;<input type="checkbox" name="aihao" value="6"/>其他</p></td></tr><tr><td colspan="4">&emsp;&emsp;<input name="b1" type="submit" value="提交" class="btn">&emsp;&emsp;<input name="b2" type="reset" value="重置" class="btn"></td></tr></table></form>
</body>
</html>

HTML5 form表单调查问卷制作相关推荐

HTML5 form表单调查问卷制作（内含超详细代码解读）
HTML 表单技术练习:制作调查问卷(内含超详细代码解读) 这一篇来记录HTML5表单API的学习,以制作调查问卷为例,效果如图: 注:完整代码见文章末尾处. 一.表单标签form 1.常用属性常用 ...
html5 form表单,html5 教程
2019独角兽企业重金招聘Python工程师标准>>> html5 form表单 html5 教程 html5 form表单表单介绍 1.XHTML中需要放在form之中的诸如inp ...
html5自动提交表单提交,HTML5 Form表单--提交信息
Form表单主要是允许用户在表单中输入信息,并最终将这些信息提交服务器的一个元素,重在收集信息方面.由于用户各种各样的信息,所以form可以嵌入的元素就有许多种, 与Form常搭配的有input.Se ...
html5 ,form表单提交不跳转
form表单是经常用到的一种提交数据的方法,经常用于登录或者注册功能. 可是form表单提交会跳转至提交的链接,这对于前后端分离的项目就有点不太友好.所以说我们需要在表单提交后不跳转,并且获取到接口返 ...
easyUI 运用窗口和form表单制作导出功能
这里运用到easyUI的窗口模式和form表单的提交制作一个有条件的导出excel数据统计的功能,主要是知道了怎么运用easyUI的窗口和表单 jsp中: <!-- 导出数据来源条件窗口 --& ...
html表单的常用属性有哪些,html/form表单常用属性认识
1.form表单常用属性练习 .form1 { margin: auto; height: 900px; width: 500px; text-align: center; line-height: ...
【HTML5】调查问卷制作简约版
当你第一次使用CSS时候目录 1.调查问卷网页展示及源码 1.1html源码 1.2css源码 2.form表单属性的用法 2.1date属性 2.2radio属性 2.3checkbox属性 2. ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
HTML5新特性---Form表单前台通过正则表达式自动验证邮箱
在HTML5中Form表单中添加了许多新特性,下面为大家介绍一种form表单中的新属性pattern. pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) ...

HTML5 form表单调查问卷制作

HTML 表格和表单综合应用技术练习：制作调查问卷（内含超详细代码解读）

外观加工

提交按钮：

完整代码：

HTML5 form表单调查问卷制作相关推荐

最新文章

热门文章

HTML5 form表单 调查问卷制作

HTML 表格和表单综合应用技术练习：制作调查问卷（内含超详细代码解读）

外观加工

提交按钮：

完整代码：

HTML5 form表单 调查问卷制作相关推荐

最新文章

热门文章

HTML5 form表单调查问卷制作

HTML5 form表单调查问卷制作相关推荐