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

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

PAGE

PAGE5

长春大学

2015—2016学年第二学期

Web前端开发技术课程

实验报告

学院：计算机科学技术

专业：软件工程

班级：软件14402

学号：041440210

姓名：王悦

任课教师：车娜

创建表单：form/form标记被用于创建一个表单，action、method、name为表单标记form的常用属性。action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。post方式的保密性好，并且无数据量的限制，使用method=post可以大量的提交数据。

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

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

textarea控件：定义的多行文本输入框。cols和rows为textarea标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。

CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。

四、实验步骤

1、结构分析

“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子div进行整体控制，然后通过form标记定义表单，并在其中嵌套相应的表单控件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过p标记嵌套表单控件使其独占一行。

2、样式分析

(1)通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背景图片等。

(2)通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。

(3)定义表单标题的样式，主要控制其文本样式及内外边距。

(4)定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边距等。

3、制作页面结构

根据上面的分析，可以使用相应的HTML标记来搭建网页结构。使用background属性设置背景图片和设置颜色了。使用hn设置标题。用了div标签设置了一个盒子，同时根据width、height设置盒子的大小。还应用了from标签，来定义表单。

4、定义CSS样式

(1)定义基础样式，应用body等标签全局控制。

(2)整体控制页面，定义div的样式，以及添加背景图片。

(3)整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制。

(4)控制表单标题，应用h2标题来定义

(5)控制姓名、年龄文本框

(6)控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。

五、实验代码及网页效果图

1．搭建基本结构

关键代码如下：

body

divclass=all

formclass=listaction=#method=post

h2传智播客学员档案/h2

p

inputtype=textvalue=本人真实姓名class=txt/

/p

p

inputtype=textvalue=请填写实际年龄class=age/

/p

pclass=choose

labelinputtype=radioname=sex/男/label

labelinputtype=radioname=sex/女/label

/p

pclass=choose

labelinputtype=checkbox/传智老学员/label

labelinputtype=checkbox/朋友推荐/label

labelinputtype=checkbox/视频教程/label

labelinputtype=checkbox/CSDN讨论/label

/p

p

selectclass=course

optionJAVA就业班/option