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

《web前端开发技术实验报告实验五.docx》由会员分享，可在线阅读，更多相关《web前端开发技术实验报告实验五.docx（9页珍藏版）》请在三一办公上搜索。

1、长春大学20 15 2016学年第二学期可协前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：-软件14402学号：041440210姓名：王悦任课教师：车娜实验五HTML表单、实验目的1. 理解表单的构成，可以快速创建表单。2. 掌握表单相关标记，能够创建具有相应功能的表单控件。3. 掌握表单样式的控制，能够美化表单界面。二、内容及要求使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图6-1所示，满足以下要求：1. 学员档案上面的标题和下面的表单两部分构成。2. 标题部分通过标题标记定义。3. 表单部分通过相关的表单控件进行定义图6-1 “学员档案” CSS样式

2、效果三、实验原理表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这 些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示信息和表 单域构成。仓U建表单：Vformv/form标记被用于创建一个表单，action、method、 name为表单标记vform的常用属性。action属性用于指定接收并处理表单数据的服 务器程序的url地址。method属性用于设置表单数据的提交方式，其取值为get或posto其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密 性差，且有数据量的限制。post方式的保密性好，并且无数据量的限制，使用 method=

3、post可以大量的提交数据。input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等 控件。select控件：可以定义下拉菜单效果。其中，标记用于在 表单中添加一个下拉菜单，标记嵌套在 标记中，用于定义下拉菜单中的具体选项，每 对 中至少应包含一对 。textarea控件：定义的多行文本输入框。cols和rows为标记的必须 属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本 输入框显示的行数，它们的取值均为正整数。CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控 制表单控件的字体、边框、背景和内边距等。四、实验步骤1、结

4、构分析“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子进行整体控制，然后通H标记定义表单，并在其中嵌套相应的表单控 件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过标记嵌套表单控件使其独占一行。2、样式分析(1) 通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背 景图片等。(2) 通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。(3) 定义表单标题的样式，主要控制其文本样式及内外边距。(4) 定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边 距等。3、制作页面结构根据上面的分析，可以使用相应的HTML标记来搭建网页结

5、构。使用background属性设置背景图片和设置颜色了。使用设置标题。用了 标签 设置了一个盒子同时根据width、height设置盒子的大小。还应用了 标签，来定义表单。4、定义CSS样式(1)定义基础样式，应用body等标签全局控制。整体控制页面定y的样式，以及添加背景图片。(3) 整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制(4) 控制表单标题，应用h2标题来定义(5) 控制姓名、年龄文本框(6) 控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。五、实验代码及网页效果图1 .搭建基本结构 关键代码如下：传智播客学员档案/男/v/label女传智老学员 朋友推

6、荐 视频教程讨论 input type=radio name=sexinput type=radio name=sex CSDNJAVA 就业班 网页平面 UI 设计就业班 IOS 就业班 vinput type=text value=工作薪资class=money / 元/月（收入）v/spanvtextarea cols=50 rows=5 class=message请简述您有没有基础，以及为什么选择来传智新播客学习？ ,效果如图6-2所示。传暂播蓉蜜辟耋择人真实姓名请填写实际年龄Ij古男。女$传智老学员朋友推荐视频教程DCSDN讨论b:网页平面5设计就业班VII|工作薪资元/月（收入）濡

7、福逐克看彳爰看萤匚反艮禹应蓬瘙耒存僧厮箱蓉孳为予入A：口；IPI4展邑图6-2 HTML页面结构效果图2. 定义CSS羊式关键代码如下：body（font-size:12px; font-family:微软雅黑 body,h2,form,img,input,select,textarea(padding:0; margin:0;list-style: none; border:。；.all( width:1024px; height:863px; margi n:0 auto;backgro un d:url(bg.p ng) no-repeat;ist(width:685px; paddin

8、g:180px 0 0 340px; p(margin-top:20px;h2(fo nt-size:38px;color:#26211e;marg in-bottom:60px;padd in g-left:50px;.txt,.agewidth:360px; height:30px; lin e-height:30px;padd in g-left:40px; color:#ccc;.txtbackgro un d:#fff url(ic on 2.p ng) no-repeat 5px 5px;.agebackgro un d:#fff url(ic on 3.p ng) no-repe

9、at 5px5px; .choosewidth:390px; height:25px; li ne-height:25px;backgro un d-color:#FFF; paddi ng:5px 0 0 10px;.course,.m on eywidth:190px; height:25px; paddi ng-left:10px;.mon eycolor:#ddd;.mon ey_box spa nfon t-size:18px; fon t-weight:bold; color:#fff;.messagewidth:390px; height:80px;padd in g:5px 0010px;fon t-size:12px; color:#ccc;.btn width:390px; height:30px; backgrou nd-color:#eb6854;color:#FFF; fon t-weight:bold;v/style效果如图6-3所示。图6-3 “学员档案” CSS样式效果六、实验总结1 .掌握了盒子模型相关属性，能够使用他们熟练的控制网页元素2. 理解了块元素与行内元素的区别，能够对他们进行转换。3. 知道如何运用from表单。