问卷调查代码

原创于 2021-06-29 16:39:59 发布 · 3.3k 阅读

CC 4.0 BY-SA版权

这是一个HTML5问卷调查页面的示例，包含问卷面板样式、标题、水平线、表单及输入框等元素的CSS样式设计，以及JavaScript验证功能。

body {
background-color:#CCCCCC;/*设置页面背景色为浅灰色*/
}

/*问卷面板样式*/
#questionnaire{
   background-color:white;
   padding:15px;
   margin: auto;
   width:900px;
   text-align:center;
   font-family:"微软雅黑";
   box-shadow: 10px 10px 15px black;
}

/*标题样式*/
h1{
color:orange;
}

/*水平线样式*/
hr{
   width:80%;
   border:orange 1px solid;
   margin-bottom:15px;
}

/*表单样式*/
form{
   text-align:left;
   width:80%;
   margin:auto;
}

/*列表选项样式*/
li{
margin:10px 0;
}

/*输入表单样式*/
input{
margin:10px;
}

/*输入表单样式*/
input[type="text"],input[type="tel"]{
   width:130px;
   height:20px;
   font-size:16px;
   font-family:"微软雅黑";
   border:0px;
   border-bottom:1px solid;
   outline:none;
}

/*按钮外区域div元素样式*/
#btn{
text-align:center;
}

/*按钮样式*/
button{
   width:120px;
   height:40px;
   background-color:orange;
   border:0px;
   color: white;
   margin:10px;
   font-size:18px;
   font-family:"微软雅黑";
   font-weight:bold;
}

/*鼠标悬浮时按钮样式*/
button:hover{
background-color:#FF6835;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>HTML5问卷调查页面示例</title>
<link rel="stylesheet" href="css/questionnaire.css">
<script src="js/questionnaire.js"></script>
</head>
<body>
<div id="questionnaire">

<h1>手机移动支付业务问卷调查</h1>

<hr />

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

               <div id="btn">
<button type="submit">提交问卷</button>
</div>
</form>
</div>
</body>
</html>