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个工作日内处理。
