问卷调查页面的设计与实现
需要制作的效果图如下
本来问卷调查是白色的，但是电脑打开一整张截图截不了，所以我用了手机打开。
大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。
1、设置底色（css 行内式）
<style>body{background:#CCC;}</style>
2、制作表单
首先利用无序列表ol 制作题目，再利用单选按钮和多选按钮制作出选项
<div><h2>手机移动支付业务问卷调查</h2><br/><hr/><br/><form method="post" action="URL" onSubmit="return check()"><ol><li>您的教育程度是？</li><li>您的年龄段是？</li><li>您了解以下哪些手机移动支付业务？（可多选）</li><li>您看重以下哪些支付功能？（可多选）</li></ol></form></div>
增加单选和多选选项
<div><h2>手机移动支付业务问卷调查</h2><br/><hr/><br/><form method="post" action="URL" onSubmit="return check()"><ol><li>您的教育程度是？</li><label> <input type="radio" name="1" >高中 </label><label> <input type="radio" name="1" >大专 </label><label> <input type="radio" name="1" >本科 </label><label> <input type="radio" name="1" >硕士研究生 </label><label> <input type="radio" name="1" >博士及以上 </label><li>您的年龄段是？</li><label> <input type="radio" name="2" >18岁以下 </label><label> <input type="radio" name="2" >18-25岁 </label><label> <input type="radio" name="2" >26-30岁 </label><label> <input type="radio" name="2" >31-35岁 </label><label> <input type="radio" name="2" >35岁以上 </label><li>您了解以下哪些手机移动支付业务？（可多选）</li><label> <input type="checkbox" name="q3">支付宝 </label><label> <input type="checkbox" name="q3">微信支付 </label><label> <input type="checkbox" name="q3">Apple Pay </label><label> <input type="checkbox" name="q3">电信翼支付 </label><label> <input type="checkbox" name="q3">以上均不了解 </label><li>您看重以下哪些支付功能？（可多选）</li><label> <input type="checkbox" name="q4">话费充值 </label><br/><label> <input type="checkbox" name="q4">刷手机加油 </label><br/><label> <input type="checkbox" name="q4">刷手机购物 </label><br/><label> <input type="checkbox" name="q4">乘坐公交/地铁 </label><br/><label> <input type="checkbox" name="q4">以上均不感兴趣 </label><br/></ol></form></div>
增加底下的个人信息和提交按钮
<div><h2>手机移动支付业务问卷调查</h2><br/><hr/><br/><form method="post" action="URL" onSubmit="return check()"><ol><li>您的教育程度是？</li><label> <input type="radio" name="1" >高中 </label><label> <input type="radio" name="1" >大专 </label><label> <input type="radio" name="1" >本科 </label><label> <input type="radio" name="1" >硕士研究生 </label><label> <input type="radio" name="1" >博士及以上 </label><li>您的年龄段是？</li><label> <input type="radio" name="2" >18岁以下 </label><label> <input type="radio" name="2" >18-25岁 </label><label> <input type="radio" name="2" >26-30岁 </label><label> <input type="radio" name="2" >31-35岁 </label><label> <input type="radio" name="2" >35岁以上 </label><li>您了解以下哪些手机移动支付业务？（可多选）</li><label> <input type="checkbox" name="q3">支付宝 </label><label> <input type="checkbox" name="q3">微信支付 </label><label> <input type="checkbox" name="q3">Apple Pay </label><label> <input type="checkbox" name="q3">电信翼支付 </label><label> <input type="checkbox" name="q3">以上均不了解 </label><li>您看重以下哪些支付功能？（可多选）</li><label> <input type="checkbox" name="q4">话费充值 </label><br/><label> <input type="checkbox" name="q4">刷手机加油 </label><br/><label> <input type="checkbox" name="q4">刷手机购物 </label><br/><label> <input type="checkbox" name="q4">乘坐公交/地铁 </label><br/><label> <input type="checkbox" name="q4">以上均不感兴趣 </label><br/></ol><label>您的姓名<input type="text" name="name" required></label><label>您的职业<input type="text" name="position" required></label><label>联系电话<input type="tel" name="tel" required></label><button type="submit">提交问卷</button></form></div>
3、利用css给表单添加样式
<style>body{background:#CCC;}div{background:#FFF;color:#09F;padding:15px;margin:60px auto 0px;width:600px;font-family:"微软雅黑";box-shadow:10px 10px 15px black ;}h2{text-align:center;}hr{width:80%;border:1px solid #09F ;margin-top:-5px;}input{margin:10px}li{margin:10px;}input[type="text"] ,input[type="tel"]{width:100px;border:0px;border-bottom:1px solid;}button{background:#09F;color:white;width:100px;height:40px;font-size:16px;font-weight:bold;font-family:"微软雅黑";margin:5% 39%;} button:hover{background:#0CF;}</style>
代码补充：box-shadow是设置阴影效果button:hover是指当鼠标悬浮在按钮上时的样式input[type=“text”] ,input[type=“tel”]
{ width:100px;
border:0px;
border-bottom:1px solid; }
这个是一种写法，代表对input标签里面，type=“text” 才进行设置样式，input[type=“text”] ,input[type=“tel”]这里逗号是指并且，当你不同的标签都要使用同一个样式的时候就可以，用一个逗号并列然后一起写。
本来他是一个文本框的，我们把border:0px;他就显示不出来，border-bottom:1px solid; 我们设置了底部为实线，所以他看起来就像是一行横线一样，其实是对border进行设置样式得到的。
电脑看到的截图如下
4、现在添加验证功能
required非空验证，意思就是你如果没有输入，也就是如果你没有填写到内容，然后提交，他会提示你此项内容不能为空单选我们设置非空，当用户没有填写的时候，就会提示，但是多选的时候，如果我们也设置非空的话，就意味着要全部都选中才不会提示，这样是不对的，所以我们对于多选按钮不用非空验证，而是增加一个JS自定义函数来为多选框进行非空验证。
<div><h2>手机移动支付业务问卷调查</h2><br/><hr/><br/><form method="post" action="URL" onSubmit="return check()"><!--input[type="text"] ,input[type="tel"]{width:100px;border:0px;border-bottom:1px solid;}--><ol><li>您的教育程度是？</li><label> <input type="radio" name="1" required>高中 </label><label> <input type="radio" name="1" required>大专 </label><label> <input type="radio" name="1" required>本科 </label><label> <input type="radio" name="1" required>硕士研究生 </label><label> <input type="radio" name="1" required>博士及以上 </label><li>您的年龄段是？</li><label> <input type="radio" name="2" required>18岁以下 </label><label> <input type="radio" name="2" required>18-25岁 </label><label> <input type="radio" name="2" required>26-30岁 </label><label> <input type="radio" name="2" required>31-35岁 </label><label> <input type="radio" name="2" required>35岁以上 </label><li>您了解以下哪些手机移动支付业务？（可多选）</li><label> <input type="checkbox" name="q3">支付宝 </label><label> <input type="checkbox" name="q3">微信支付 </label><label> <input type="checkbox" name="q3">Apple Pay </label><label> <input type="checkbox" name="q3">电信翼支付 </label><label> <input type="checkbox" name="q3">以上均不了解 </label><li>您看重以下哪些支付功能？（可多选）</li><label> <input type="checkbox" name="q4">话费充值 </label><br/><label> <input type="checkbox" name="q4">刷手机加油 </label><br/><label> <input type="checkbox" name="q4">刷手机购物 </label><br/><label> <input type="checkbox" name="q4">乘坐公交/地铁 </label><br/><label> <input type="checkbox" name="q4">以上均不感兴趣 </label><br/></ol><label>您的姓名<input type="text" name="name" required></label><label>您的职业<input type="text" name="position" required></label><label>联系电话<input type="tel" name="tel" required></label><button type="submit">提交问卷</button></form><script>function checkBox(name){var j=0;var checkbox=document.getElementsByName(name);for(var i=0; i<checkbox.length;i++){if(checkbox[i].checked){j++;break;}}if(j==0)return false;return true;}function check(){var q3=checkBox("q3");if(q3==false){alert("第3题起码要选择一个选项");return false;}var q4=checkBox("q4");if(q4==false){alert("第4题起码要选择一个选项");return false;}}</script></div>
script 里面包含的就是js的自定义函数啦，不理解也没有关系，掌握前面的内容就行了form method=“post” action=“URL” onSubmit=“return check()”
表单后面记得添加 onSubmit=“return check()” ，这样才会调用函数。
最后再把代码总的发一次
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>body{background:#CCC;}div{background:#FFF;color:#09F;padding:15px;margin:60px auto 0px;width:600px;font-family:"微软雅黑";box-shadow:10px 10px 15px black ;}h2{text-align:center;}hr{width:80%;border:1px solid #09F ;margin-top:-5px;}input{margin:10px}li{margin:10px;}input[type="text"] ,input[type="tel"]{width:100px;border:0px;border-bottom:1px solid;}button{background:#09F;color:white;width:100px;height:40px;font-size:16px;font-weight:bold;font-family:"微软雅黑";margin:5% 39%;} button:hover{background:#0CF;}</style></head><body><div><h2>手机移动支付业务问卷调查</h2><br/><hr/><br/><form method="post" action="URL" onSubmit="return check()"><!--input[type="text"] ,input[type="tel"]{width:100px;border:0px;border-bottom:1px solid;}--><ol><li>您的教育程度是？</li><label> <input type="radio" name="1" required>高中 </label><label> <input type="radio" name="1" required>大专 </label><label> <input type="radio" name="1" required>本科 </label><label> <input type="radio" name="1" required>硕士研究生 </label><label> <input type="radio" name="1" required>博士及以上 </label><li>您的年龄段是？</li><label> <input type="radio" name="2" required>18岁以下 </label><label> <input type="radio" name="2" required>18-25岁 </label><label> <input type="radio" name="2" required>26-30岁 </label><label> <input type="radio" name="2" required>31-35岁 </label><label> <input type="radio" name="2" required>35岁以上 </label><li>您了解以下哪些手机移动支付业务？（可多选）</li><label> <input type="checkbox" name="q3">支付宝 </label><label> <input type="checkbox" name="q3">微信支付 </label><label> <input type="checkbox" name="q3">Apple Pay </label><label> <input type="checkbox" name="q3">电信翼支付 </label><label> <input type="checkbox" name="q3">以上均不了解 </label><li>您看重以下哪些支付功能？（可多选）</li><label> <input type="checkbox" name="q4">话费充值 </label><br/><label> <input type="checkbox" name="q4">刷手机加油 </label><br/><label> <input type="checkbox" name="q4">刷手机购物 </label><br/><label> <input type="checkbox" name="q4">乘坐公交/地铁 </label><br/><label> <input type="checkbox" name="q4">以上均不感兴趣 </label><br/></ol><label>您的姓名<input type="text" name="name" required></label><label>您的职业<input type="text" name="position" required></label><label>联系电话<input type="tel" name="tel" required></label><button type="submit">提交问卷</button></form><script>function checkBox(name){var j=0;var checkbox=document.getElementsByName(name);for(var i=0; i<checkbox.length;i++){if(checkbox[i].checked){j++;break;}}if(j==0)return false;return true;}function check(){var q3=checkBox("q3");if(q3==false){alert("第3题起码要选择一个选项");return false;}var q4=checkBox("q4");if(q4==false){alert("第4题起码要选择一个选项");return false;}}</script></div></body></html>
上面所有内容为个人总结，如有任何不对的地方，可以私聊我，我会马上进行修正，如果进行转载请告知，谢谢。
如果觉得《HTML5~问卷调查页面的设计与实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
