html問卷調查表單
HTML英語:HyperTextMarkupLanguage，中文:超文本標記語言，是創建網頁的標準標記語言。HTML的全稱是超文本標記語言，是一種標記語言。它包括一系列標簽。通過這些標簽，網絡上的文檔格式可以統一，分散的互聯網資源可以連接成一個邏輯整體。下面就由小編為您介紹html問卷調查表單。
html問卷調查表單
?一、表單標簽form
1.常用屬性
常用屬性有兩個：action和method，分別用于規定表單數據提交的URL地址以及提交方式。
method有get和post兩種屬性值，其中post不顯示name等參數信息，適用于安全級別相對較高的數據。默認值為get。
2.form標簽框架
<form method="post" action="URL">
<!--表單具體內容-->
</form>
二、表單制作
1.有序列表標簽ol，用于定義帶有編號的有序列表；列表項目標簽li，用于列出每個問題
2.input輸入標簽
常見語法格式：
<input type="輸入類型" name="自定義名稱" />
type常用屬性值：
類型名稱解釋
text單行文本輸入框
password密碼輸入框
radio單選按鈕
checkbox復選按鈕
submit復選按鈕
3.加工處理
requi要求在提交之前必須在輸入框內填寫內容，實現單選框的非空驗證。
用input制作最下方填寫的橫線：
思路：上右下左四個邊框線，只顯示下邊框線：(通過CSS的style實現)
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>您是否使用過手機移動支付業務？</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" /> 經常使用 </label>
<li>您看中以下哪些支付功能？（可多選）</li>
<label><input type="checkbox" name="how" value="1" /> 話費/游戲幣充值</label><br />
<label><input type="checkbox" name="how" value="2" /> 刷手機加油</label><br />
<label><input type="checkbox" name="how" value="3" /> 刷手機購物</label><br />
<label><input type="checkbox" name="how" value="4" /> 刷手機乘坐公交/輕軌/地鐵</label><br />
<label><input type="checkbox" name="how" value="5" /> 水電煤/有線電視/寬帶遠程繳費</label><br />
<label><input type="checkbox" name="how" value="6" /> 享受聯盟商戶的優惠折扣</label><br />
<label><input type="checkbox" name="how" value="7" /> 以上均不感興趣</label><br />
</ol>
您的姓名 <input type="text" name="username" required />
您的職業 <input type="text" name="occupation" required />
聯系電話 <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標簽內，插入一個div標簽，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>調查問卷頁面</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>手機移動支付業務調查問卷</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>您是否使用過手機移動支付業務？</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" /> 經常使用 </label>
<li>您看中以下哪些支付功能？（可多選）</li>
<label><input type="checkbox" name="how" value="1" /> 話費/游戲幣充值</label><br />
<label><input type="checkbox" name="how" value="2" /> 刷手機加油</label><br />
<label><input type="checkbox" name="how" value="3" /> 刷手機購物</label><br />
<label><input type="checkbox" name="how" value="4" /> 刷手機乘坐公交/輕軌/地鐵</label><br />
<label><input type="checkbox" name="how" value="5" /> 水電煤/有線電視/寬帶遠程繳費</label><br />
<label><input type="checkbox" name="how" value="6" /> 享受聯盟商戶的優惠折扣</label><br />
<label><input type="checkbox" name="how" value="7" /> 以上均不感興趣</label><br />
</ol>
您的姓名 <input type="text" name="username" required />
您的職業 <input type="text" name="occupation" required />
聯系電話 <input type="tel" name="tele" required />
<br />
<button id="btn" type="submit">提交問卷</button>
</form>
</div>
</body>
</html>
超級文本是一種組織信息的方式，它通過超級鏈接將文本中的文本和圖表與其他信息媒體聯系起來。這些相關信息媒體可能位于相同文本、其他文件或遠離地理位置的計算機上。這種組織信息模式將分布在不同位置的信息資源隨機連接起來，方便人們搜索和搜索信息。以上就是小編為您介紹的html問卷調查表單。
[免責聲明]
文章標題： html問卷調查表單
文章內容為網站編輯整理發布，僅供學習與參考，不代表本網站贊同其觀點和對其真實性負責。如涉及作品內容、版權和其它問題，請及時溝通。發送郵件至36dianping@36kr.com，我們會在3個工作日內處理。
