【HTML5】调查问卷制作简约版

当你第一次使用CSS时候

---

目录

 1、调查问卷网页展示及源码

1.1html源码

1.2css源码

2、form表单属性的用法

2.1date属性

2.2radio属性

2.3checkbox属性

2.4textarea标签

2.5required属性

2.6button标签

---

前言：

大家好，我是拳击哥带你捶键盘。首先感谢您的到来，今天给大家带来的是前端静态版调查问卷的设计，运用表单中radio单选框、checkbox复选框、date日历、required属性等属性以及textarea标签、button标签来制作一个简易的调查问卷。

---

 1、调查问卷网页展示及源码

1.1html源码

	
		
		
		
	

	
		

		
调查问卷
		

		

			

				
请选择今天的日期
				
				

				

				
你的学历是？
				高中及以下

				大专

				本科

				硕士研究生

				

				
你从事拳击/健身教练的时间？
				刚开始

				1~2年

				3~4年

				5~10年

				

				
你是通过什么渠道学会拳击/其他这项技术的？
				部队

				拳馆

				武校

				少林寺

				其他

				

				
你晚上睡觉的时间是？
				晚上八点至九点

				晚上十点点至十一点

				晚上十二点以后

				通宵

				

				
你早上起床的时间是？
				早上六点至七点

				早上八点至九点

				早上十点至十一点

				中午十二点之后

				

				
你最近有锻炼身体吗？
				一周三到五次

				一周一到两次

				一周一次

				很久没锻炼了

				

				
你近期与别人发生过矛盾吗？
				有，没和好

				有，和好了

				有，并且打了一架

				有，就吵了下嘴

				没有

				

				
你喜欢的运动有？（可多选）
				篮球

				乒乓球

				羽毛球

				拳击

				柔术

				摔跤

				散打

				

				
你期待的工资是？
				3000~5000

				5000~10000

				10000~15000

				15000~20000

				

				
你的意见:
				

					
			
			

				提交	
		
		
	

1.2css源码

body {
		background-color:bisque;
}
.biaoti {
	text-align: center;
	padding-top: 30px;
}

.index {
	font-size: 20px;
	margin: auto;
	width: 600px;
	background-color: white;
	margin-top: 10px;
}

.biaodan {
	padding-left: 50px;
	line-height:100%;
}

#tijiao{
	width: 200px;
	height: 50px;
	font-size: 30px;
	color:whitesmoke;
	background-color:#3366CC;
    margin-left: 150PX;
	margin-top: 16PX;
	margin-bottom: 20PX;
	border-radius: 6px;
}

---

2、form表单属性的用法

2.1date属性

date（日期），直接把type设置成date，会出现与你电脑相同的日期选项。

请选择今天的日期

实现效果：

---

2.2radio属性

radio（单选框），直接把type属性设置为radio，并且所有的选项都得name相同。

你的学历是？
高中及以下

大专

本科

硕士研究生

 实现效果：

---

2.3checkbox属性

checkbox（多选框），直接把type属性设置为checkbox，并且把所有选项的name设置相同这样就能实现多选。

你喜欢的运动有？（可多选）
篮球

乒乓球

羽毛球

拳击

柔术

摔跤

散打

 实现效果：

---

2.4textarea标签

标签</span></span>表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。</p> <pre><code class="language-html"><textarea name="message" placeholder="你的宝贵意见对我们帮助很大" required>

 实现效果：

---

2.5required属性

在标签后面加上<span style="color:#fe2c24;"><span style="background-color:#d7d8d9;">required 属性</span></span>规定必需在提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的，当我点击button时候时如果textarea中没有填写内容会提示请填写此字段。</p> <pre><code class="language-html"><textarea name="message" placeholder="你的宝贵意见对我们帮助很大" required>

---

2.6button标签

控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

---

本期博客到这里就结束啦，感谢大家的观看。

 

Never Give Up