Web前端HTML5表单的应用——调查问卷

• 石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
• 石家庄邮电职业技术学院社区

学号后四位：0235

知识点(项目涉及标签)

form标签——创建表单

        action属性用于指定接收并处理表单数据的服务器URL地址

input标签——表单中定义文本输入框，单选按钮，复选框，重置按钮

属性	允许取值	取值说明
type	text	单行文本输入框
	radio	单选框
	checkbox	复选框
	submit	提交按钮
	file	文件域
	number	数值的输入域
	Datepickers(date,month,week, time,datetime,datetime-local)	日期和时间的输入类型
	color	颜色输入类型
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本
maxlength	正整数	控件允许输入你的最多字符数

textarea标签——多行文本输入框

属性	允许取值	取值说明
name	由用户自定义	控件的名称
cols	number	规定文本区内的可见宽度
rows	number	规定文本区内的可见行数

label标签——为 input 元素标注(标记)，当用户选在标签时，浏览器自动将焦点转到与标签相关的表单控件上。

项目名称及描述

调查问卷页面：该项目界面包含用户名输入框，日期格式输入框，性别单选按钮，兴趣复选框，文本域和提交按钮等。当用户单击提交按钮后就会将表单中填写的用户信息提交给服务器。其中体重的type类型为number表示只能填写数字格式内容；颜色的type类型为color，表示在颜色板中选择颜色。(注:number和color为HTML5新增的type类型)

项目思路

调查问卷页面的实现细节：1.单击体重输入框测试number类型，取值范围再50~100kg。2.单击”年-月-日“输入框弹出日期选择面板。3.单击性别单选框实现性别的选择。4.单击兴趣复选框实现兴趣的选择。5.单击颜色框弹出颜色选取器面板，选取喜欢颜色。6.单击”选择文件“按钮实现用户头像的上传。7.单击”提交“按钮，实现表单的提交。

在项目开发之前，首先需要完成项目目录结构的搭建：

在项目分析文成后，我们就可以根据项目结构图编写HTML代码和CSS样式代码，具体代码如下：

项目代码

HTML代码：

	

		

			

                /!--text单行文本输入框--/
				姓名:
				
			
			

                /!--日期输入框--/
				出生日期:
				
			
			

                /!--单选框--/
				性别:
				

					
					男
						
						女
						
					
				
   
			
			

                /!--number数值输入域--/
				体重:
				

					kg
				
			
			

                /!--checkbox复选框--/
				兴趣:
				

					唱歌
					跳舞
					游泳
				
			
			
喜欢的颜色:
				
			
			

                /!--文本域--/
				上传头像:
				
			
			

                /!--您的建议--/
				您的建议:
				
			
			

                /!--submit提交按钮--/
				
			
		
	

CSS样式代码：

form {
	width: 343px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 5px;
	background: #eee;
}

ul,
li {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul li {
	height: 50px;
}

/*定义input元素向右浮动*/
.right {
	float: right;
	width: 180px;
}

/*当该input元素获得焦点时，设置背景颜色*/
input:focus {
	background-color: rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

/*定义表单提交按钮居中*/
form.footer {
	text-align: center;
}

/*设置当鼠标移动到type=submit按钮上时，鼠标指针变为一只小手形状*/
input[type=submit] {
	width: 100px;
	height: 30px;
	margin-top: 10px;
	cursor: pointer;
}

.advise {
	height: 150px;
}

/*设置文本域宽度为100%，高度为100px*/
textarea {
	width: 100%;
	height: 100px;
}