问卷调查页面.html

问卷调查页面.html

点击查看代码

```

手机移动支付业务问卷调查

---

1. 您的教育程度是？
高中 大专 本科 硕士研究生 博士及以上

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

```

css样式渲染

点击查看代码

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