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


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

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

大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。
1、设置底色（css 行内式）

1
2
3
<style>
    body{<!-- -->background:#CCC;}
</style>

2、制作表单

  • 首先利用无序列表ol 制作题目，再利用单选按钮和多选按钮制作出选项
1
2
3
4
5
6
7
8
9
10
11
12
    <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>

在这里插入图片描述
增加单选和多选选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>

在这里插入图片描述
增加底下的个人信息和提交按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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给表单添加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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自定义函数来为多选框进行非空验证。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<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()” ，这样才会调用函数。

最后再把代码总的发一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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>

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