其他分享
首页 > 其他分享> > HTML5~问卷调查页面的设计与实现

HTML5~问卷调查页面的设计与实现

作者:互联网

问卷调查页面的设计与实现

需要制作的效果图如下在这里插入图片描述
本来问卷调查是白色的,但是电脑打开一整张截图截不了,所以我用了手机打开。

大概思路:我们先设置底色灰色,然后写出表单,再利用CSS给表单进行设置。
1、设置底色(css 行内式)

<style>
	body{background:#CCC;}
</style>

2、制作表单

	<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>

电脑看到的截图如下
在这里插入图片描述
在这里插入图片描述

4、现在添加验证功能

<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>

最后再把代码总的发一次

<!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>

上面所有内容为个人总结,如有任何不对的地方,可以私聊我,我会马上进行修正,如果进行转载请告知,谢谢。

标签:return,可多选,width,HTML5,支付,input,border,问卷调查,页面
来源: https://blog.csdn.net/weixin_45626404/article/details/110577889