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

前端开发技术实验报告表单一实验目的理解表单的构成可以快速创建表单掌握表单相关标记能够创建具有相应功能的表单控件掌握表单样式的控制能够美化表单界面二内容及要求使用表单控件并通过控制表单样式制作一个学员档案其效果如图所示满足以下要求学员档案上面的标题和下面的表单两部分构成标题部分通过标题标记定义表单部分通过相关的表单控件进行定义图学员档案样式效果三实验原理表单是网页上用于输入信息的区域它的主要功能是收集用户信息并将这些信息传递给后台服务器实现网页与用户的沟通表单由表单控件提示信息和表单域构成创建表单标记被用于创建一个表单为表单标记的常用属性属性用于指定接收并处理表单数据的服务器程序的地址属性用于设置表单数据的提交方式其取值为或其中为默认值这种方式提交的数据将显示在浏览器的地址栏中保密性差且有数据量的限制方式的保密性好并且无数据量的限制使用可以大量的提交数据控件定义单行文本输入框单选按钮复选框提交按钮重置按钮等控件控件可以定义下拉菜单效果其中标记用于在表单中添加一个下拉菜单标记嵌套在标记中用于定义下拉菜单中的具体选项每对中至少应包含一对控件定义的多行文本输入框和为标记的必须属性其中用来定义多行文本输入框每行中的字符数用来定义多行文本输入框显示的行数它们的取值均为正整数控制表单样式使用可以轻松地控制表单控件的样式主要体现在控制表单控件的字体边框背景和内边距等四实验步骤结构分析传智学员档案由多个表单控件构成整个页面可以使用一个大盒子进行整体控制然后通过标记定义表单并在其中嵌套相应的表单控件另外由于表单控件属于内块元素不会单独占据一行可以通过标记嵌套表单控件使其独占一行样式分析通过最外层的对页面进行整体控制需要对其设置宽度和高度以及背景图片等通过对表单进行整体控制需要对其设置宽度和内外边距样式定义表单标题的样式主要控制其文本样式及内外边距定义各个表单控件的样式主要控制他们的宽度高度文本背景及边距等制作页面结构根据上面的分析可以使用相应的标记来搭建网页结构使用属性设置背景图片和设置颜色了使用设置标题用了标签设置了一个盒子同时根据设置盒子的大小还应用了标签来定义表单定义样式定义基础样式应用等标签全局控制整体控制页面定义的样式以及添加背景图片整体控制表单定义表单的宽度内边距样式来对表单进行整体控制控制表单标题应用标题来定义控制姓名年龄文本框控制单选按钮及复选框控制薪资积及多行文本框控制按钮提交五实验代码及网页效果图搭建基本结构关键代码如下传智播客学员档案本人真实姓名请填写实际年龄男女传智老学员朋友推荐视频教程讨论就业班网页平面设计就业班就业班工作薪资元月收入请简述您有没有基础以及为什么选择来传智新播客学习提交效果如图所示图页面结构效果图定义样式关键代码如下微软雅黑效果如图所示图学员档案样式效果六实验总结掌握了盒子模型相关属性能够使用他们熟练的控制网页元素理解了块元素与行内元素的区别能够对他们进行转换知道如何运用表单