HTML5 form表单 调查问卷制作(内含超详细代码解读)

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 />&nbsp;&nbsp;高中&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="2" />&nbsp;&nbsp;大专&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="3" />&nbsp;&nbsp;本科&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="4" />&nbsp;&nbsp;硕士研究生&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="5" />&nbsp;&nbsp;博士及以上 </label>
					<li>您的年龄段是?</li>
					<label><input type="radio" name="age" value="1" required />&nbsp;&nbsp;18岁以下&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="2" />&nbsp;&nbsp;18-25岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="3" />&nbsp;&nbsp;26-30岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="4" />&nbsp;&nbsp;31-35岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="5" />&nbsp;&nbsp;35岁以上 </label>
					<li>您是否使用过手机移动支付业务?</li>
					<label><input type="radio" name="use" value="1" required />&nbsp;&nbsp;从未听说过&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="2" />&nbsp;&nbsp;听说过,但未使用过&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="3" />&nbsp;&nbsp;偶尔使用&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="4" />&nbsp;&nbsp;经常使用&nbsp;&nbsp; </label>
					<li>您看中以下哪些支付功能?(可多选)</li>
					<label><input type="checkbox" name="how" value="1" />&nbsp;&nbsp;话费/游戏币充值</label><br />
					<label><input type="checkbox" name="how" value="2" />&nbsp;&nbsp;刷手机加油</label><br />
					<label><input type="checkbox" name="how" value="3" />&nbsp;&nbsp;刷手机购物</label><br />
					<label><input type="checkbox" name="how" value="4" />&nbsp;&nbsp;刷手机乘坐公交/轻轨/地铁</label><br />
					<label><input type="checkbox" name="how" value="5" />&nbsp;&nbsp;水电煤/有线电视/宽带远程缴费</label><br />
					<label><input type="checkbox" name="how" value="6" />&nbsp;&nbsp;享受联盟商户的优惠折扣</label><br />
					<label><input type="checkbox" name="how" value="7" />&nbsp;&nbsp;以上均不感兴趣</label><br />
				</ol>
				您的姓名&nbsp;&nbsp;<input type="text" name="username" required />
				&nbsp;&nbsp;您的职业&nbsp;&nbsp;<input type="text" name="occupation" required />
				&nbsp;&nbsp;联系电话&nbsp;&nbsp;<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 />&nbsp;&nbsp;高中&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="2" />&nbsp;&nbsp;大专&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="3" />&nbsp;&nbsp;本科&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="4" />&nbsp;&nbsp;硕士研究生&nbsp;&nbsp; </label>
					<label><input type="radio" name="education" value="5" />&nbsp;&nbsp;博士及以上 </label>
					<li>您的年龄段是?</li>
					<label><input type="radio" name="age" value="1" required />&nbsp;&nbsp;18岁以下&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="2" />&nbsp;&nbsp;18-25岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="3" />&nbsp;&nbsp;26-30岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="4" />&nbsp;&nbsp;31-35岁&nbsp;&nbsp; </label>
					<label><input type="radio" name="age" value="5" />&nbsp;&nbsp;35岁以上 </label>
					<li>您是否使用过手机移动支付业务?</li>
					<label><input type="radio" name="use" value="1" required />&nbsp;&nbsp;从未听说过&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="2" />&nbsp;&nbsp;听说过,但未使用过&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="3" />&nbsp;&nbsp;偶尔使用&nbsp;&nbsp; </label>
					<label><input type="radio" name="use" value="4" />&nbsp;&nbsp;经常使用&nbsp;&nbsp; </label>
					<li>您看中以下哪些支付功能?(可多选)</li>
					<label><input type="checkbox" name="how" value="1" />&nbsp;&nbsp;话费/游戏币充值</label><br />
					<label><input type="checkbox" name="how" value="2" />&nbsp;&nbsp;刷手机加油</label><br />
					<label><input type="checkbox" name="how" value="3" />&nbsp;&nbsp;刷手机购物</label><br />
					<label><input type="checkbox" name="how" value="4" />&nbsp;&nbsp;刷手机乘坐公交/轻轨/地铁</label><br />
					<label><input type="checkbox" name="how" value="5" />&nbsp;&nbsp;水电煤/有线电视/宽带远程缴费</label><br />
					<label><input type="checkbox" name="how" value="6" />&nbsp;&nbsp;享受联盟商户的优惠折扣</label><br />
					<label><input type="checkbox" name="how" value="7" />&nbsp;&nbsp;以上均不感兴趣</label><br />
				</ol>
				您的姓名&nbsp;&nbsp;<input type="text" name="username" required />
				&nbsp;&nbsp;您的职业&nbsp;&nbsp;<input type="text" name="occupation" required />
				&nbsp;&nbsp;联系电话&nbsp;&nbsp;<input type="tel" name="tele" required />
				<br />
				<button id="btn" type="submit">提交问卷</button>
				
			</form>
		</div>
	</body>
</html>

  • 52
    点赞
  • 384
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值