問卷調查頁面.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;
}