html問卷調(diào)查表單
HTML英語:HyperTextMarkupLanguage，中文:超文本標(biāo)記語言，是創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML的全稱是超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽。通過這些標(biāo)簽，網(wǎng)絡(luò)上的文檔格式可以統(tǒng)一，分散的互聯(lián)網(wǎng)資源可以連接成一個(gè)邏輯整體。下面就由小編為您介紹html問卷調(diào)查表單。
html問卷調(diào)查表單
?一、表單標(biāo)簽form
1.常用屬性
常用屬性有兩個(gè)：action和method，分別用于規(guī)定表單數(shù)據(jù)提交的URL地址以及提交方式。
method有g(shù)et和post兩種屬性值，其中post不顯示name等參數(shù)信息，適用于安全級(jí)別相對(duì)較高的數(shù)據(jù)。默認(rèn)值為get。
2.form標(biāo)簽框架
<form method="post" action="URL">
<!--表單具體內(nèi)容-->
</form>
二、表單制作
1.有序列表標(biāo)簽ol，用于定義帶有編號(hào)的有序列表；列表項(xiàng)目標(biāo)簽li，用于列出每個(gè)問題
2.input輸入標(biāo)簽
常見語法格式：
<input type="輸入類型" name="自定義名稱" />
type常用屬性值：
類型名稱解釋
text單行文本輸入框
password密碼輸入框
radio單選按鈕
checkbox復(fù)選按鈕
submit復(fù)選按鈕
3.加工處理
requi要求在提交之前必須在輸入框內(nèi)填寫內(nèi)容，實(shí)現(xiàn)單選框的非空驗(yàn)證。
用input制作最下方填寫的橫線：
思路：上右下左四個(gè)邊框線，只顯示下邊框線：(通過CSS的style實(shí)現(xiàn))
input{
border-color: black;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:2px;
border-left-width:0px;
}
完整表單代碼如下：
<form method="post" action="URL">
<ol>
<li>您的教育程度是？</li>
<label><input type="radio" name="education" value="1" required /> 高中 </label>
<label><input type="radio" name="education" value="2" /> 大專 </label>
<label><input type="radio" name="education" value="3" /> 本科 </label>
<label><input type="radio" name="education" value="4" /> 碩士研究生 </label>
<label><input type="radio" name="education" value="5" /> 博士及以上 </label>
<li>您的年齡段是？</li>
<label><input type="radio" name="age" value="1" required /> 18歲以下 </label>
<label><input type="radio" name="age" value="2" /> 18-25歲 </label>
<label><input type="radio" name="age" value="3" /> 26-30歲 </label>
<label><input type="radio" name="age" value="4" /> 31-35歲 </label>
<label><input type="radio" name="age" value="5" /> 35歲以上 </label>
<li>您是否使用過手機(jī)移動(dòng)支付業(yè)務(wù)？</li>
<label><input type="radio" name="use" value="1" required /> 從未聽說過 </label>
<label><input type="radio" name="use" value="2" /> 聽說過，但未使用過 </label>
<label><input type="radio" name="use" value="3" /> 偶爾使用 </label>
<label><input type="radio" name="use" value="4" /> 經(jīng)常使用 </label>
<li>您看中以下哪些支付功能？（可多選）</li>
<label><input type="checkbox" name="how" value="1" /> 話費(fèi)/游戲幣充值</label><br />
<label><input type="checkbox" name="how" value="2" /> 刷手機(jī)加油</label><br />
<label><input type="checkbox" name="how" value="3" /> 刷手機(jī)購物</label><br />
<label><input type="checkbox" name="how" value="4" /> 刷手機(jī)乘坐公交/輕軌/地鐵</label><br />
<label><input type="checkbox" name="how" value="5" /> 水電煤/有線電視/寬帶遠(yuǎn)程繳費(fèi)</label><br />
<label><input type="checkbox" name="how" value="6" /> 享受聯(lián)盟商戶的優(yōu)惠折扣</label><br />
<label><input type="checkbox" name="how" value="7" /> 以上均不感興趣</label><br />
</ol>
您的姓名 <input type="text" name="username" required />
您的職業(yè) <input type="text" name="occupation" required />
聯(lián)系電話 <input type="tel" name="tele" required />
<br />
<button id="btn" type="submit">提交問卷</button>
</form>
三、外觀加工
1.灰背景，白底面，外陰影：
body{
background-color: gray;
}
.index{
margin: auto;
width:920px;
background-color: white;
box-shadow:10px 10px 15px black;
margin-top:10px;
}
在body標(biāo)簽內(nèi)，插入一個(gè)div標(biāo)簽，class值為index
2.表單的位置：
form{
padding-left: 100px;
line-height:180%;
}
3.提交按鈕：
#btn{
background-color: #FFA500;
color:white;
padding:5px 10px;
margin-left:320px;
margin-top:16px;
margin-bottom: 20px;
}
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>調(diào)查問卷頁面</title>
<style>
body{
background-color: gray;
}
.index{
margin: auto;
width:920px;
background-color: white;
box-shadow:10px 10px 15px black;
margin-top:10px;
}
h1{
color:orange;
padding-top:30px;
text-align:center;
}
form{
padding-left: 100px;
line-height:180%;
}
input{
border-color: black;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:2px;
border-left-width:0px;
}
#btn{
background-color: #FFA500;
color:white;
padding:5px 10px;
margin-left:320px;
margin-top:16px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="index">
<h1>手機(jī)移動(dòng)支付業(yè)務(wù)調(diào)查問卷</h1>
<hr color="orange" width="700px" />
<form method="post" action="URL">
<ol>
<li>您的教育程度是？</li>
<label><input type="radio" name="education" value="1" required /> 高中 </label>
<label><input type="radio" name="education" value="2" /> 大專 </label>
<label><input type="radio" name="education" value="3" /> 本科 </label>
<label><input type="radio" name="education" value="4" /> 碩士研究生 </label>
<label><input type="radio" name="education" value="5" /> 博士及以上 </label>
<li>您的年齡段是？</li>
<label><input type="radio" name="age" value="1" required /> 18歲以下 </label>
<label><input type="radio" name="age" value="2" /> 18-25歲 </label>
<label><input type="radio" name="age" value="3" /> 26-30歲 </label>
<label><input type="radio" name="age" value="4" /> 31-35歲 </label>
<label><input type="radio" name="age" value="5" /> 35歲以上 </label>
<li>您是否使用過手機(jī)移動(dòng)支付業(yè)務(wù)？</li>
<label><input type="radio" name="use" value="1" required /> 從未聽說過 </label>
<label><input type="radio" name="use" value="2" /> 聽說過，但未使用過 </label>
<label><input type="radio" name="use" value="3" /> 偶爾使用 </label>
<label><input type="radio" name="use" value="4" /> 經(jīng)常使用 </label>
<li>您看中以下哪些支付功能？（可多選）</li>
<label><input type="checkbox" name="how" value="1" /> 話費(fèi)/游戲幣充值</label><br />
<label><input type="checkbox" name="how" value="2" /> 刷手機(jī)加油</label><br />
<label><input type="checkbox" name="how" value="3" /> 刷手機(jī)購物</label><br />
<label><input type="checkbox" name="how" value="4" /> 刷手機(jī)乘坐公交/輕軌/地鐵</label><br />
<label><input type="checkbox" name="how" value="5" /> 水電煤/有線電視/寬帶遠(yuǎn)程繳費(fèi)</label><br />
<label><input type="checkbox" name="how" value="6" /> 享受聯(lián)盟商戶的優(yōu)惠折扣</label><br />
<label><input type="checkbox" name="how" value="7" /> 以上均不感興趣</label><br />
</ol>
您的姓名 <input type="text" name="username" required />
您的職業(yè) <input type="text" name="occupation" required />
聯(lián)系電話 <input type="tel" name="tele" required />
<br />
<button id="btn" type="submit">提交問卷</button>
</form>
</div>
</body>
</html>
超級(jí)文本是一種組織信息的方式，它通過超級(jí)鏈接將文本中的文本和圖表與其他信息媒體聯(lián)系起來。這些相關(guān)信息媒體可能位于相同文本、其他文件或遠(yuǎn)離地理位置的計(jì)算機(jī)上。這種組織信息模式將分布在不同位置的信息資源隨機(jī)連接起來，方便人們搜索和搜索信息。以上就是小編為您介紹的html問卷調(diào)查表單。
[免責(zé)聲明]
文章標(biāo)題： html問卷調(diào)查表單
文章內(nèi)容為網(wǎng)站編輯整理發(fā)布，僅供學(xué)習(xí)與參考，不代表本網(wǎng)站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。如涉及作品內(nèi)容、版權(quán)和其它問題，請(qǐng)及時(shí)溝通。發(fā)送郵件至36dianping@36kr.com，我們會(huì)在3個(gè)工作日內(nèi)處理。
