web前端开发技术实验报告实验五.pdf

web前端开发技术实验报告实验五--第1页

长春大学

n

2015—2016学年第二学期

Web前端开发技术课程

实验报告

学院：计算机科学技术

专业：软件工程

班级：-软件14402

学号：041440210

姓名：王悦

任课教师：车娜

web前端开发技术实验报告实验五--第1页

web前端开发技术实验报告实验五--第2页

实验五HTML表单

、实验目的

1.理解表单的构成，可以快速创建表单。

2.掌握表单相关标记，能够创建具有相应功能的表单控件。

3.掌握表单样式的控制，能够美化表单界面。

二、内容及要求

使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图

6-1所示，满足以下要求：

1.学员档案上面的标题和下面的表单两部分构成。

2.标题部分通过标题标记定义。

3.表单部分通过相关的表单控件进行定义

图6-1“学员档案”CSS样式效果

三、实验原理

表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这

些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示信息和表

单域构成。

仓U建表单：＜form＞v/form＞标记被用于创建一个表单，action、method、

name

为表单标记＜form＞的常用属性。action属性用于指定接收并处理表单数据的服务器

2

web前端开发技术实验报告实验五--第2页

web前端开发技术实验报告实验五--第3页

程序的url地址。method属性用于设置表单数据的提交方式，其取值为get或

post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密

性差，且有数据量的限制。post方式的保密性好，并且无数据量的限制，使用

可以大量的提交数据。

input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等

控件。

select控件：可以定义下拉菜单效果。其中，select/select标记用于在

表单中添加一个下拉菜单，option/option标记嵌套在

select/select标记中，用于定义下拉菜单中的具体选项，每

对select