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

1、web前端开发技术实验报告,实验五 长 春 大 学 0 1 0 6 学年第 二 学期 w b 前端 开发 技术 课程 实 验 验 报 告 学 学 院: 计算机科学技术 专 专 业： 软件工程 班 班 级: 软件 1402 学 号： 04420 姓 姓 名: 王 悦 任课教师： 车 娜 实验 五 h h l ml 表单 一、实验目得 1、理解表单得构成，可以快速创立表单. 、掌握表单相关标记，能够创立具有相应功能得表单控件. 3、掌握表单样式得控制，能够美化表单界面。 二、内容及要求 使用表单控件，并通过ss 控制表单样式制作一个学员档案，其效果如图61 所示,满足以下要求： 1、学员档案上面得

2、标题与下面得表单两局部构成。 2、标题局部通过标题标记定义。 3、表单局部通过相关得表单控件进行定义 图 6-1 “学员档案"css 样式效果 三、实验原理 表单:就是网页上用于输入信息得区域,它得主要功能就是收集用户信息，并将这些信息传递给后台效劳器,实现网页与用户得沟通。表单由表单控件、提示信息与表单域构成。 创立表单:/frm>标记被用于创立一个表单,actio、meto、name 为表单标记得常用属性。acion 属性用于指定接收并处理表单数据得效劳器程序得 url 地址。meho属性用于设置表单数据得提交方式，其取值为 get 或 post。其中,gt 为默认值,这种

3、方式提交得数据将显示在浏览器得地址栏中，保密性差，且有数据量得限制。post 方式得保密性好，并且无数据量得限制，使用 method=pst可以大量得提交数据. ut 控件：定义单行文本输入框、单项选择按钮、复选框、提交按钮、重置按钮等控件. elct 控件:可以定义下拉菜单效果.其中,sect/slect标记用于在表单中添加一个下拉菜单，opton/elct>中至少应包含一对/option>. txtare控件:定义得多行文本输入框。col与 ro为textara标记得必须属性，其中ols 用来定义多行文本输入框每行中得字符数，ows用来定义多行文本输入框显示得行数,它们得取值均

4、为正整数。 css 控制表单样式：使用 css 可以轻松地控制表单控件得样式，主要表达在控制表单控件得字体、边框、背景与内边距等。 四、实验步骤 1、结构分析 “传智学员档案"由多个表单控件构成。整个页面可以使用一个大盒子dv进行整体控制，然后通过标记嵌套表单控件使其独占一行。 2、样式分析 （） 通过最外层得 di对页面进行整体控制,需要对其设置宽度与高度以及背景图片等。 （) 通过 fom 对表单进行整体控制,需要对其设置宽度与内外边距样式。 （3） 定义表单标题得样式，主要控制其文本样式及内外边距。 （4） 定义各个表单控件得样式，主要控制她们得宽度、高度、文本、背景及边距等。

5、 、制作页面结构 根据上面得分析，可以使用相应得t标记来搭建网页结构。使用 bacrnd 属性设置背景图片与设置颜色了。使用hn设置标题。用了div标签设置了一个盒子，同时根据 wt、hegt 设置盒子得大小。还应用了fom>标签，来定义表单。 4、定义 cs样式 （1) 定义根底样式，应用 boy 等标签全局控制。 （2) 整体控制页面，定义 （) 整体控制表单,定义表单得宽度、内边距样式来对表单进行整体控制。 (4） 控制表单标题,应用 h标题来定义 （5) 控制姓名、年龄文本框 （6） 控制单项选择按钮及复选框，控制薪资积及多行文本框,控制按钮提交。 五、实验代码 及网页效果图 1

6、。搭建根本结构 关键代码如下: bdy frm lass=lt” acin="# method="ps” h2传智播客学员档案h inu typ=”text” lue本人真实姓名” cls=”t" / /p p inut tye=”et" vu=”请填写实际年龄" las="ae" > /p> p lass="hoose” label> 传智老学员/b label><np tye=”ccbox” />朋友推荐 < slct cass=”course> oio>v

7、a 就业班pin ptn sleedselected">网页平面 ui 设计就业班opin> ios 就业班<optio /slct / inut tye=text" alue=工作薪资 clss="money” />span>元/月(收入) 图2 tml 页面结构效果图 2. 定义 s s 样式 关键代码如下： yl tpe"ext/c" dyfontsize:1px； ontfaily:微软雅黑” boy,h2，form，ig，inpu，select,ttreaadig：0; agn:0; listtyle：n

8、one; er:0； 、ll id:024px； hight：863p; mrgi：0 auto; bckrond:url（bg、png） no-rpeat; 、listwidh：685x； adding：10px 0 0 40p； pmin-p:2px； hfontze:38px； color:6211e; marn-bom:60； padig-left：0px; 、txt，、wit:360p； eiht:30px； ineight：30x； adiglef:40; lor：； 、txackground：fff url(icn2、pn) no-rt x 5x； 、agebakround：ff

9、 url （con、png) no-reea 5p 5px; 、coewidh：30px； hegt:25px; ieheight：2px; bakgroudcolo:ff; paddin:5p 0 0 10px; 、course，、moeywth:190； eight：2px; paddineft：10px; 、ocolor：ddd; 、oybox snfosi：8x; otweght:bold; clo：ff； 、messewith:0p； hight：80x； pading:5px 0 0 0px; font-sze：1px; colo：#cc; 、btwidt：30x； gt：30px； bcgoucoor:b6854; coor