网页设计之问卷调查

错误代码937

已于 2022-08-09 16:58:25 修改

阅读量1.2k

点赞数

分类专栏：笔记文章标签： html html5 css

于 2021-08-29 11:22:27 首次发布

本文链接：https://blog.csdn.net/zym0218/article/details/119978380

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这是一个关于手机移动支付业务的HTML问卷调查页面示例。页面包含教育程度、年龄段、移动支付使用情况、了解的支付业务及看重的支付功能等多选题，以及姓名、职业和联系电话的输入字段。提交问卷前会进行检查，确保第4题至少选择一个选项。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>问卷调查页面的设计与实现·</title>
	<style>
		#questionnaire{
			box-shadow: 10px 10px 15px black;
		}
		#h1{
			text-align: center;
			color: orange;
		}
		#txt{
			border: none;
			border-bottom: 1px solid;
		}
		#btn{
			text-align: center;
		}
	</style>
	<script> 
function check(){        
       var checkbox=document.getElementsByName('q4');
	   var q4=checkBox("q4");
       for(var i=0;i<checkbox.length;i++){
           if(checkbox[i].checked){
               true;
            }
       }
       if(q4==false){
           alert("第4题起码要选择一个选项。");
           return false;
       }   
}    
	</script>
</head>

<body>
	<div id="questionnaire">
		<div id="h1"><h1>手机移动支付业务问卷调查</h1></div>
		<hr color="orange">
	<form  name="form1" method="post" action="URL" onsubmit="return check()">
		<ol>
	<li>您的教育程度是？</li>
		<label><input type="radio" name="q1" value="q1-1" required />高中</label>
		<label><input type="radio" name="q1" value="q1-2" required />大专</label>
		<label><input type="radio" name="q1" value="q1-3" required />本科</label>
		<label><input type="radio" name="q1" value="q1-4" required />硕士研究生</label>
		<label><input type="radio" name="q1" value="q1-5" required />博士及以上</label>
	<li>您的年龄段是？</li>
		<label><input type="radio" name="q2" value="q2-1" required />18岁以下</label>
		<label><input type="radio" name="q2" value="q2-2" required />18-25岁</label>
		<label><input type="radio" name="q2" value="q2-3" required />26-30岁</label>
		<label><input type="radio" name="q2" value="q2-4" required />31-35岁</label>
		<label><input type="radio" name="q2" value="q2-5" required />35岁以上</label>
	<li>您是否使用过手机移动支付业务？</li>
		<label><input type="radio" name="q3" value="q3-1" required />从未听说过</label>
		<label><input type="radio" name="q3" value="q3-2" required />听说过，但未使用过</label>
		<label><input type="radio" name="q3" value="q3-3" required />偶尔使用</label>
		<label><input type="radio" name="q3" value="q3-4" required />经常使用</label>
	<li>您了解以下哪些手机移动支付业务？（可多选）</li>
		<label><input type="checkbox" name="q4" value="q4-1" />支付宝</label>
		<label><input type="checkbox" name="q4" value="q4-2" />微信支付</label>
		<label><input type="checkbox" name="q4" value="q4-3" />电信翼支付</label>
		<label><input type="checkbox" name="q4" value="q4-4" />Apple Pay</label>
		<label><input type="checkbox" name="q4" value="q4-5" />以上均不了解</label>
	<li>您看重以下哪些支付功能？（可多选）</li>
		<label><input type="checkbox" name="q5" value="q5-1" />花费/游戏币充值</label><br>
		<label><input type="checkbox" name="q5" value="q5-2" />刷手机加油</label><br>
		<label><input type="checkbox" name="q5" value="q5-3" />刷手机购物</label><br>
		<label><input type="checkbox" name="q5" value="q5-4" />刷手机乘坐公交/轻轨/地铁</label><br>
		<label><input type="checkbox" name="q5" value="q5-5" />水电煤/有线电视/宽带远程缴费</label><br>
		<label><input type="checkbox" name="q5" value="q5-6" />享受联盟商户的优惠折扣</label><br>
		<label><input type="checkbox" name="q5" value="q5-7" />以上均不感兴趣</label><br>
		</ol>
		<label>您的姓名<input id="txt" type="text" name="name" required /></label>
		<label>您的职业<input id="txt" type="text" name="position" required /></label>
		<label>联系电话<input id="txt" type="tel" name="tel" required /></label><br>
		<div id="btn"><button type="submit" style="background:orange;color: white">提交问卷</button></div>
	</form>
	</div>	
</body>
</html>