<!DOCTYPE html>
<html>
<head>
<title>问卷调查页面</title>
<style type="text/css">
div{
padding: 15px; /*内边距*/
margin:60px auto 0px; /*相互距离*/
width: 700px;
font-family: "微软雅黑";
box-shadow: 10px 10px 15px black; /*阴影效果*/
}
h1{
text-align: center;/*标题设置*/
color: orange;
}
input{
margin:10px;/*控制单选间距*/
}
li{
margin:10px; /*上下距离*/
}
input[type="text"],input[type="tel"]
{
width: 100px;
border: 0px; /*避免整个盒子都被画上实线，先将整个设为0，再单独设下边缘*/
border-bottom:1px solid;
}
button{
background: orange;
color: white;
width: 100px;
height: 40px;
font-weight: bold;/*粗字体符*/
font-family: "微软雅黑";
margin:5% 39%;/*上下左右居中*/
}
button:hover{
background: red; /*鼠标放置*/
}
</style>
</head>
<body>
<div>
<h1>手机移动支付业务调查问卷</h1>
<hr style="width: 90%; height: 5px; border: none; background-color: orange"><br><!--换行无结束-->
<form method="post" action="URL" onsubmit="return check()"><!-- method规定了发送方式,常用的为get和post,涉及到用户隐私时,为了安全起见通常都采用post方式.
action规定了提交表单时发送表单数据的目的地,也即将数据发到哪里
onsubmit事件属性,只在form表单中使用,在表单提交时触发,一般可以用它来进行前端验证.当"提交"按钮被点击时，执行check()函数，在check()函数中，我们对表单输入框进行了空验证，如果为空，提示输入并return false,这样表单就不会提交,同时，使用时要注意onsubmit不能掉了return，否则表单永远会提交 -->
<ol><!-- 有序列表标签 -->
<li>您的教育程度是？</li><!-- li标签可以用在ol里 可以用在ul（无序列表）默认有实心圆点 -->
<label><input type="radio" name="q1" required>高中</label><!--点击label内的文本就会触发控件，为鼠标增进可用性-->
<label><input type="radio" name="q1" required>大专</label><!-- radio单选 checkbox多选 submit提交 -->
<label><input type="radio" name="q1" required>本科</label>
<label><input type="radio" name="q1" required>硕士研究生</label>
<label><input type="radio" name="q1" required>博士及以上</label>
<li>您的年龄段是？</li>
<label><input type="radio" name="q2" required>18岁以下</label>
<label><input type="radio" name="q2" required>18—25岁</label>
<label><input type="radio" name="q2" required>26—30岁</label>
<label><input type="radio" name="q2" required>31—35岁</label>
<label><input type="radio" name="q2" required>35岁以上</label>
<li>您是否使用过手机移动支付业务？</li>
<label><input type="radio" name="q3" required>从来没听说过</label>
<label><input type="radio" name="q3" required>听说过，但未使用过</label>
<label><input type="radio" name="q3" required>偶尔使用</label>
<label><input type="radio" name="q3" required>经常使用</label>
<li>您了解以下哪些手机移动支付业务？（可多选）</li>
<label><input type="checkbox" name="q4">支付宝</label>
<label><input type="checkbox" name="q4">微信支付</label>
<label><input type="checkbox" name="q4">电信翼支付</label>
<label><input type="checkbox" name="q4">Apple Pay</label>
<label><input type="checkbox" name="q4">以上均不了解</label>
<!-- 相关分类 多选返回值为键值对 -->
<li>您看着以下哪些支付功能？（可多选）</li>
<label><input type="checkbox" name="q5">话费/游戏币充值</label><br>
<label><input type="checkbox" name="q5">刷手机加油</label>
<br>
<label><input type="checkbox" name="q5">刷手机购物</label>
<br>
<label><input type="checkbox" name="q5">刷手机乘坐公交/轻轨/地铁</label><br>
<label><input type="checkbox" name="q5">水电煤/有线电视/宽带远程缴费</label><br>
<label><input type="checkbox" name="q5">享受联盟商户的优惠折扣</label><br>
<label><input type="checkbox" name="q5">以上均不感兴趣</label>
</ol>
<label>您的姓名<input type="text" name="name" required></label><!--required布尔属性，必须在提交表单之前输入字段-->
<label>您的职业<input type="text" name="work" required></label>
<label>联系电话<input type="tel" name="tel" required></label>
<button type="submit">提交问卷</button>
</form>
<script type="text/javascript">
// 提交时触发check函数
function check(){
var q4=checkBox("q4");
if(q4==false){
alert("第四题起码要选一个选项。");//弹出框
return false;
}
var q5=checkBox("q5");
if(q5==false){
alert("第五题起码要选一个选项。");
return false;
}
}
function checkBox(name){
var i=0;
var checkbox=document.getElementsByName(name);
for(var j=0;j<checkbox.length;j++)
{
if(checkbox[j].checked){
i++;
break; //只要有一个选了就跳出
}
}
if(i==0) return false;
return true;
}
</script>
</div>
</body>
</html>运行结果：
