欢迎来到天天文库
浏览记录
ID:57088391
大小:397.50 KB
页数:7页
时间:2020-08-01
《web前端开发技术实验报告 实验五.doc》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、长春大学2015—2016学年第二学期Web前端开发技术课程实验报告学院:计算机科学技术专业:软件工程班级:软件14402学号:041440210姓名:王悦任课教师:车娜实验五HTML表单一、实验目的1.理解表单的构成,可以快速创建表单。2.掌握表单相关标记,能够创建具有相应功能的表单控件。3.掌握表单样式的控制,能够美化表单界面。二、内容及要求使用表单控件,并通过CSS控制表单样式制作一个学员档案,其效果如图6-1所示,满足以下要求:1.学员档案上面的标题和下面的表单两部分构成。2.标题部分通过标题标记定义。3.表单部分通过相关的表单控件进行定义图6-1“学员档案”CSS样式效果三、实
2、验原理表单:是网页上用于输入信息的区域,它的主要功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。创建表单:
3、可以大量的提交数据。input控件:定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。select控件:可以定义下拉菜单效果。其中,标记用于在表单中添加一个下拉菜单,标记嵌套在标记中,用于定义下拉菜单中的具体选项,每对中至少应包含一对。textarea控件:定义的多行文本输入框。cols和rows为标记的必须属性,其中cols用来定义多行文本输入框每行中的字符数,rows用来定义多行文本
4、输入框显示的行数,它们的取值均为正整数。CSS控制表单样式:使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。四、实验步骤1、结构分析“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子
标记嵌套表单控件使其独占一行。2、样式分析(1)通过最外层的div对页面进行整体控制,需要对其设置宽度和高度以及背景图片等。(2)通过form对表单进行整体控制,需要对其设置宽度和内外边距样式。(3)定义表
5、单标题的样式,主要控制其文本样式及内外边距。(4)定义各个表单控件的样式,主要控制他们的宽度、高度、文本、背景及边距等。3、制作页面结构根据上面的分析,可以使用相应的HTML标记来搭建网页结构。使用background属性设置背景图片和设置颜色了。使用设置标题。用了标签设置了一个盒子,同时根据width、height设置盒子的大小。还应用了标签,来定义表单。4、定义CSS样式(1)定义基础样式,应用body等标签全局控制。(2)整体控制页面,定义的样式,以及添加背景图片。(3)整体控制表单,定义表单的宽度、内边距样式来对表单进行整体控制。(4)控制6、表单标题,应用h2标题来定义(5)控制姓名、年龄文本框(6)控制单选按钮及复选框,控制薪资积及多行文本框,控制按钮提交。五、实验代码及网页效果图1.搭建基本结构关键代码如下:传智播客学员档案7、puttype="radio"name="sex"/>男女传智老学员朋友推荐 当前文档最多预览五页,下载文档查看全文 侵权申诉 举报 1 1 2 3 4 5 / 7 此文档下载收益归作者所有 下载文档 当前文档最多预览五页,下载文档查看全文 点击下载本文档 版权提示 下载文档 举报 温馨提示: 1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。 2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。 3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。 4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
6、表单标题,应用h2标题来定义(5)控制姓名、年龄文本框(6)控制单选按钮及复选框,控制薪资积及多行文本框,控制按钮提交。五、实验代码及网页效果图1.搭建基本结构关键代码如下:
7、puttype="radio"name="sex"/>男
此文档下载收益归作者所有