问卷调查网页设计
预览链接点击这里。（移动端会有显示问题）
todo：
Post提交与Get提交的区别
如果向服务器提交信息：
账号：abc
密码：123
确认密码：123
性别：男
擅长语言：java、html
国家：中国
那么，
- get提交，提交的信息都显示在地址栏中。
地址拦：http://localhost:9891/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
- post提交，提交的信息不显示地址栏中，显示在消息体中。
地址栏：http://localhost:9891/
消息体则封装发送给服务器：user=abc&psw=123repsw=123&sex=nan&tech=java&tech=html&country=cn
区别因此也很明显：
- get提交，对于敏感的数据信息不安全。
post提交，对于敏感信息安全。 - get提交，对于大数据不行，因为地址栏存储体积有限。
post提交，可以提交大体积数据。 - get提交，将信息封装到了请求消息的请求行中。
post提交，将信息封装到了请求体中。
综上所述：表单提交，建议使用post。
Session与Token的区别
session 有如用户信息档案表, 里面包含了用户的认证信息和登录状态等信息，会储存在网站服务器里。
session 可以理解为一个状态列表，拥有一个唯一识别符号sessionId，通常存放于cookie中。
而 token 类似一个令牌，无状态，用户信息都被加密到token中，服务器收到token后解密就可知道是哪个用户。通常在用户离开网站后就被清除掉。
问卷调查html+CSS代码
html主体代码：
<body>
<div id="naire">
<div id="topic">
<h1 class="title1">问 卷 调 查</h1>
<div class="content">
<p>亲爱的同学您好!<br>随着经济社会的纵深发展，我们大学生作为社会特殊的消费群体，我们的消费观念对我们产生重要的影响。因此，我们想邀请您用几分钟的时间填写这份问卷，<strong>本问卷各项答案没有对错之分，对所填结果不做个别呈现，对外绝对保密</strong>，希望您抽出宝贵的时间进行填写，谢谢！</p>
</div>
<div class="alarm">
<p><strong>注意：本调查问卷仅为样式排版，不会收集任何信息，可放心选择。</strong></p>
</div>
</div>
<div id="fenge"></div>
<div class="question2">
<div class="question1">
<p>1.您的性别</p>
<form class="choice">
<label><input type="radio" name="sex" value="male">男</label>
<br>
<label><input type="radio" name="sex" value="female">女</label>
</form>
</div>
<div class="question1">
<p>2.年级</p>
<form class="choice">
<label><input type="radio" name="grade" value="1">一年级</label>
<br>
<label><input type="radio" name="grade" value="2">二年级</label>
<br>
<label><input type="radio" name="grade" value="3">三年级</label>
<br>
<label><input type="radio" name="grade" value="4">四年级</label>
</form>
</div>
<div class="question1">
<p>3.在校期间平均月消费</p>
<form class="choice">
<label><input type="radio" name="cost" value="1">少于500元</label>
<br>
<label><input type="radio" name="cost" value="2">501~1500元</label>
<br>
<label><input type="radio" name="cost" value="3">1501~2500元</label>
<br>
<label><input type="radio" name="cost" value="4">多于2500元</label>
</form>
</div>
<div class="question1">
<p>4.生活费来源</p>
<form class="choice">
<label><input type="radio" name="earn" value="1">全部为父母给予</label>
<br>
<label><input type="radio" name="earn" value="2">一部分为父母给予，另一部分为打工赚取</label>
<br>
<label><input type="radio" name="earn" value="3">全部为自己打工赚取</label>
</form>
</div>
<div class="question1">
<p>5.购物方式通常为</p>
<form class="choice">
<label><input type="radio" name="shop" value="online">网络商店</label>
<br>
<label><input type="radio" name="shop" value="offline">实体商店</label>
<br>
<label><input type="radio" name="shop" value="both">两者都经常用</label>
</form>
</div>
<div class="question1">
<p>6.您的月消费多用在哪些方面</p>
<form class="choice">
<label><input type="checkbox" name="way" value="h">伙食</label>
<br>
<label><input type="checkbox" name="way" value="g">购置衣物</label>
<br>
<label><input type="checkbox" name="way" value="j">交通通讯</label>
<br>
<label><input type="checkbox" name="way" value="s">生活用品</label>
<br>
<label><input type="checkbox" name="way" value="r">日常交际</label>
<br>
<label><input type="checkbox" name="way" value="x">学习用品</label>
<br>
<label><input type="checkbox" name="way" value="y">娱乐旅游</label>
<br>
<label><input type="checkbox" name="way" value="o" onClick="if (this.checked) {edit1.style.display='';} else {edit1.style.display='none';}">其他</label>
</form>
<div class="blocko" id="edit1" style="display: none;">
<p>输入其他方面</p><input type="text" class="othertext">
</div>
</div>
<div class="question1">
<p>7.花钱方式</p>
<form class="choice">
<label><input type="radio" name="costway" value="a">全部计划好再花</label>
<br>
<label><input type="radio" name="costway" value="b">能省就省</label>
<br>
<label><input type="radio" name="costway" value="c">能花就花</label>
<br>
<label><input type="radio" name="costway" value="d">一边花一边打算</label>
</form>
</div>
<div class="question1">
<p>8.您会使用哪些预支方式付款</p>
<form class="choice">
<label><input type="checkbox" name="yuzhi" value="a">从不</label>
<br>
<label><input type="checkbox" name="yuzhi" value="b">花呗</label>
<br>
<label><input type="checkbox" name="yuzhi" value="c">借呗</label>
<br>
<label><input type="checkbox" name="yuzhi" value="d">信用卡</label>
<br>
<label><input type="checkbox" name="yuzhi" value="e" onClick="if (this.checked) {edit2.style.display='';} else {edit2.style.display='none';}"/>其他</label>
</form>
<div class="blocko" id="edit2" style="display: none;">
<p>输入其他方式</p><input type="text">
</div>
</div>
<div class="question1">
<p>9.您觉得自己的生活费</p>
<form class="choice">
<label><input type="radio" name="plea" value="a">有富余</label>
<br>
<label><input type="radio" name="plea" value="b">刚好够用</label>
<br>
<label><input type="radio" name="plea" value="c">不够</label>
</form>
</div>
<div class="question1">
<p>10.每月的生活费有余时，您会把它用于</p>
<form class="choice">
<label><input type="checkbox" name="way2" value="a">吃喝</label>
<br>
<label><input type="checkbox" name="way2" value="b">旅游</label>
<br>
<label><input type="checkbox" name="way2" value="c">添置衣物</label>
<br>
<label><input type="checkbox" name="way2" value="d">买书</label>
<br>
<label><input type="checkbox" name="way2" value="e">存起来</label>
<br>
<label><input type="checkbox" name="way2" onClick="if (this.checked) {edit3.style.display='';} else {edit3.style.display='none';}">其他</label>
</form>
<div class="blocko" id="edit3" style="display: none;">
<p>输入其他方式</p><input type="text">
</div>
</div>
<div align="center" class="next">
<button onClick="window.location.href='https://www.lanxy.ink/'" class="confirm">我已确认，完成提交</button>
</div>
</div>
<div id="endbox"></div>
</div>
</body>
CSS部分代码
@charset "utf-8";
/* CSS Document */
body{
background: url("DAY-1.jpg") no-repeat fixed center;
background-size: cover;
}
@keyframes trace {
from{opacity: 0}
to{opacity:1}
}
@keyframes focus {
from{border: solid 1px #525f7f;}
to{border:solid 1px #AD7D80;}
}
@keyframes focus-r{
from{border: solid 1px #ad7d80;}
to{border:solid 1px #525f7f;}
}
.title1{
color:white;
text-shadow: 4px 4px 20px #cfb3b5,-4px -4px 20px #cfb3b5,4px -4px 20px #cfb3b5,-4px 4px 20px #cfb3b5;
word-spacing: 10px;
}
.content{
line-height: 25px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 2px 2px 15px lightgray;
background-color: rgba(255,255,255,0.9);
padding:0.1% 5% 0.1% 5%;
font-size: 15px;
font-style: italic;
color:#525f7f;
opacity:0;
animation: trace 2s forwards;
animation-delay: 0.5s;
}
div#topic{
padding-top:6px;
text-align: center;
font-size: 20px;
line-height: 35px;
}
div#naire{
padding-left: 15%;
padding-right: 15%;
border-radius: 5px;
background-color: #cfb3b51a;
box-shadow: 1px 1px 10px #cfb3b5;
}
div#fenge{
margin-top: 15px;
border-top: dashed 1px #ffffff;
margin-bottom: 15px;
opacity: 0;
animation: trace 2s forwards;
animation-delay: 1.1s;
}
.question1 p {
color: #AD7D80;
font-size: 20px;
}
.question1 label{
color: #525f7f;
cursor: pointer;
}
.question1{
font-weight: bolder;
line-height: 10px;
}
.question2{
border-radius: 5px;
box-shadow: 2px 2px 15px lightgray;
padding:10px;
background: rgba(255,255,255,0.8);
opacity:0;
animation: trace 2s forwards;
animation-delay: 2.5s;
}
div#endbox{
padding-bottom: 30px;
}
.choice{
font-weight: normal;
line-height: 30px;
}
.alarm{
border-radius: 5px;
border-left: solid 10px;
border-left-color: rgba(187,148,151,1.00);
background-color: rgba(255,255,255,0.9);
box-shadow: 2px 2px 25px 0px lightgray;
padding:5px 15px 5px 15px;
color: #525f7f;
opacity: 0;
animation: trace 2s forwards;
animation-delay: 1s;
}
.confirm{
display: inline;
background-color: #cfb3b5;
border:none;
color:white;
font-weight: bold;
padding:15px 25px 15px 25px;
border-radius: 5px 5px 5px 5px;
transition: 0.3s;
}
.confirm:hover{
background-color: #B3878A;
}
.confirm:active{
background-color:#7B4D50;
color: rgba(190,190,190,1.00);
}
.next{
margin:15px 0 15px 0;
}
.othertext{
size: 40px 20px 40px 20px;
}
input[type="text"]{
outline: none;
width:400px;
height:25px;
font-size: 20px;
background-color: #ffffffa1;
border-radius: 5px;
border:solid 1px #525f7f;
animation: focus-r 0.3s ease-out forwards;
}
input[type="text"]:hover{
border:solid 1px #525f7f;
animation: focus 0.3s ease-out forwards;
}
.blocko p{
color: #B3878A;
font-size: 15px;
margin: 5px 2px 10px 10px;
}综上。