HTML 表单技术练习：制作调查问卷（内含超详细代码解读）
这一篇来记录HTML5表单API的学习，以制作调查问卷为例，效果如图：
注：完整代码见文章末尾处。
一、表单标签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>
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
