文档库

最新最全的文档下载
当前位置:文档库 > web前端开发技术实验报告 实验五

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

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

长春大学

20 15 —2016学年第二学期Web前端开发技术课程

实验报告

学院:计算机科学技术专业:软件工程

班级:软件14402

学号:041440210

姓名:王悦

任课教师:车娜

实验五 HTML表单

一、实验目的

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

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

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

二、内容及要求

使用表单控件,并通过CSS控制表单样式制作一个学员档案,其效果如图6-1所示,满足以下要求:

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

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

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

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

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

三、实验原理

表单:是网页上用于输入信息的区域,它的主要功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。

创建表单:

标记被用于创建一个表单,action、method、name 为表单标记
的常用属性。action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性用于设置表单数据的提交方式,其取值为get

或post。其中,get为默认值,这种方式提交的数据将显示在浏览器的地址栏中,保密性差,且有数据量的限制。post方式的保密性好,并且无数据量的限制,使用method="post"可以大量的提交数据。

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

select控件:可以定义下拉菜单效果。其中,标记用于在表单中添加一个下拉菜单,标记嵌套在标记中,用于定义下拉菜单中的具体选项,每对中至少应包含一对

textarea控件:定义的多行文本输入框。cols和rows为

效果如图6-2所示。

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

图6-2 HTML页面结构效果图

2.定义CSS样式

关键代码如下:

效果如图6-3所示。

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

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

六、实验总结

1.掌握了盒子模型相关属性,能够使用他们熟练的控制网页元素。

2.理解了块元素与行内元素的区别,能够对他们进行转换。

3.知道如何运用表单。