web前端开发技术实验报告实验五_第1页
web前端开发技术实验报告实验五_第2页
web前端开发技术实验报告实验五_第3页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

3、="post"可以大量的提交数据。input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。select控件：可以定义下拉菜单效果。其中，<select></select>标记用于在表单中添加一个下拉菜单，<option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的具体选项，每对<select></select>中至少应包含一对<option></option>。textarea控件：定义

4、的多行文本输入框。cols和rows为<textarea>标记的必须届性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。四、实验步骤1、结构分析“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子<div>进行整体控制，然后通过<form>标记定义表单，并在其中嵌套相应的表单控件。另外，由于表单控件届于内块元素，不会单独占据一行，可以通过<p>标记嵌套表单控件

5、使其独占一行。2、样式分析(1) 通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背景图片等。(2) 通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。(3) 定义表单标题的样式，主要控制其文本样式及内外边距。(4) 定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边距等。3、制作页面结构根据上面的分析，可以使用相应的HTMLB记来搭建网页结构。使用background届性设置背景图片和设置颜色了。使用<hn>设置标题。用了<div>标签设置了一个盒子，同时根据width、height设置盒子的大小。还应用了<from&

6、gt;标签，来定义表单。4、定义CSS羊式(1) 定义基础样式，应用body等标签全局控制。(2) 整体控制页面，定义<div>的样式，以及添加背景图片。(3) 整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制。(4) 控制表单标题，应用h2标题来定义(5) 控制姓名、年龄文本框(6) 控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。五、实验代码及网页效果图1.搭建基本结构关键代码如下：<body><divclass="all"><formclass="list"action="

7、#"method="post"><h2>传智播客学员档案</h2><p><inputtype="text"value="本人真实姓名"class="txt"/></p><p><inputtype="text"value="请填写实际年龄"class="age"/></p><pclass="choose"><l

8、abel><inputtype="radio"name="sex"/>男</label><label><inputtype="radio"name="sex"/>女</label></p><pclass="choose"><label><inputtype="checkbox"/><label><inputtype="checkbox&

9、quot;/><label><inputtype="checkbox"/><label><inputtype="checkbox"/>CSDN传智老学员</label>朋友推荐</label>视频教程</label>讨论</label></p><p><selectclass="course"><option>JAVA就业班</option><optionselected

10、="selected">网页平面UI设计就业班</option><option>IOS就业班</option></select></p><pclass="money_box"><inputtype="text"value=</span></p>工作薪资"class="money"/><span>元/月（收入）<p><textareacols="50&qu

11、ot;rows="5"class="message">什么选择来传智新播客学习？请简述您有没有基础以及为</p></textarea><p><inputtype="submit"class="btn"value="提交"/></p></form></div></body>效果如图6-2所示。履智布客著弹案Js!:本人真实姓名i请填写实际年聚|；"男°女i；口传智老学员朋友推荐

12、视频教程LICSDN讨论：ii网页平面ui设计就业班七i；工作薪资:元/月(收入)!'蒲商值看技篇淳砸质疫为布么误暮莱荏海薪寤营孥另T；1，提交|!土'图6-2HTML页面结构效果图2. 定义CSS羊式关键代码如下：<styletype="text/css">bodyfont-size:12px;font-family:"微软雅黑"body,h2,form,img,input,select,textareapadding:0;margin:0;list-style:none;border:0;.allwidth:1024px;

13、height:863px;margin:0auto;background:url(bg.png)no-repeat;.listwidth:685px;padding:180px00340px;pmargin-top:20px;h2font-size:38px;color:#26211e;margin-bottom:60px;padding-left:50px;.txt,.agewidth:360px;height:30px;line-height:30px;padding-left:40px;color:#ccc;.txtbackground:#fffurl(icon2.png)no-repe

14、at5px5px;.agebackground:#fffurl(icon3.png)no-repeat5px5px;.choosewidth:390px;height:25px;line-height:25px;background-color:#FFF;padding:5px0010px;.course,.moneywidth:190px;height:25px;padding-left:10px;.moneycolor:#ddd;.money_boxspanfont-size:18px;font-weight:bold;color:#fff;.messagewidth:390px;height:80px;padding:5px0010px

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论