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;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！