web前端开发技术实验报告-实验五长春大学20 15 —2016学年第二学期Web前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：软件14402学号：041440210姓名：王悦任课教师：车娜实验五 HTML表单一、实验目的1.理解表单的构成，可以快速创建表单。
2.掌握表单相关标记，能够创建具有相应功能的表单控件。
3.掌握表单样式的控制，能够美化表单界面。
二、内容及要求使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图6-1所示，满足以下要求：1.学员档案上面的标题和下面的表单两部分构成。
2.标题部分通过标题标记定义。
3.表单部分通过相关的表单控件进行定义图6-1 “学员档案”CSS样式效果三、实验原理表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。
表单由表单控件、提示信息和表单域构成。
创建表单：<form></form>标记被用于创建一个表单，action、method、name为表单标记<form>的常用属性。
action属性用于指定接收并处理表单数据的服务器程序的url地址。
method属性用于设置表单数据的提交方式，其取值为get或post。
其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。
post方式的保密性好，并且无数据量的限制，使用method="post"可以大量的提交数据。
input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。
select控件：可以定义下拉菜单效果。
其中，<select></select>标记用于在表单中添加一个下拉菜单，<option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的具体选项，每对<select></select>中至少应包含一对<option></option>。
textarea控件：定义的多行文本输入框。
cols和rows为<textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。
CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。
四、实验步骤1、结构分析“传智学员档案”由多个表单控件构成。
整个页面可以使用一个大盒子<div>进行整体控制，然后通过<form>标记定义表单，并在其中嵌套相应的表单控件。
另外，由于表单控件属于内块元素，不会单独占据一行，可以通过<p>标记嵌套表单控件使其独占一行。
2、样式分析(1) 通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背景图片等。
(2) 通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。
(3) 定义表单标题的样式，主要控制其文本样式及内外边距。
(4) 定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边距等。
3、制作页面结构根据上面的分析，可以使用相应的HTML标记来搭建网页结构。
使用background属性设置背景图片和设置颜色了。
使用<hn>设置标题。
用了<div>标签设置了一个盒子，同时根据width、height设置盒子的大小。
还应用了<from>标签，来定义表单。
4、定义CSS样式(1) 定义基础样式，应用body等标签全局控制。
(2) 整体控制页面，定义<div>的样式，以及添加背景图片。
(3) 整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制。
(4) 控制表单标题，应用h2标题来定义(5) 控制姓名、年龄文本框(6) 控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。
五、实验代码及网页效果图1．搭建基本结构关键代码如下：<body><div class="all"><form class="list" action="#" method="post"><h2>传智播客学员档案</h2><p><input type="text" value="本人真实姓名" class="txt" /></p><p><input type="text" value="请填写实际年龄" class="age" /></p><p class="choose"><label><input type="radio" name="sex" />男</label><label><input type="radio" name="sex" />女</label></p><p class="choose"><label><input type="checkbox" />传智老学员</label><label><input type="checkbox" />朋友推荐</label><label><input type="checkbox" />视频教程</label><label><input type="checkbox" />CSDN讨论</label></p><p><select class="course"><option>JAVA就业班</option><option selected="selected">网页平面UI设计就业班</option><option>IOS就业班</option></select></p><p class="money_box"><input type="text" value="工作薪资" class="money" /><span>元/月（收入）</span></p><p><textarea cols="50" rows="5" class="message">请简述您有没有基础,以及为什么选择来传智新播客学习？</textarea></p><p><input type="submit" class="btn" value="提交" /></p></form></div></body>效果如图6-2所示。
图6-2 HTML页面结构效果图2．定义CSS样式关键代码如下：<style type="text/css">body{font-size:12px; font-family:"微软雅黑"}body,h2,form,img,input,select,textarea{padding:0; margin:0;list-style:none; border:0;}.all{ width:1024px; height:863px; margin:0 auto;background:url(bg.png) no-repeat;}.list{width:685px; padding:180px 0 0 340px;}p{margin-top:20px;}h2{font-size:38px; color:#26211e; margin-bottom:60px;padding-left:50px;}.txt,.age{width:360px; height:30px; line-height:30px;padding-left:40px; color:#ccc;}.txt{background:#fff url(icon2.png) no-repeat 5px 5px;}.age{background:#fff url(icon3.png) no-repeat 5px 5px;}.choose{width:390px; height:25px; line-height:25px;background-color:#FFF; padding:5px 0 0 10px;}.course,.money{width:190px; height:25px; padding-left:10px;}.money{color:#ddd;}.money_box span{font-size:18px; font-weight:bold; color:#fff;} .message{width:390px; height:80px; padding:5px 0 0 10px;font-size:12px; color:#ccc;}.btn{width:390px; height:30px; background-color:#eb6854;color:#FFF; font-weight:bold;}</style>效果如图6-3所示。
图6-3 “学员档案”CSS样式效果六、实验总结1．掌握了盒子模型相关属性，能够使用他们熟练的控制网页元素。