web前端开发关键技术实验报告实验五.docVIP

长 春 大 学 20 15 — 第 二 学期 Web前端开发技术 课程 实 验 报 告 学 院： 计算机科学技术 专 业： 软件工程 班 级： 软件14402 学 号： 姓 名： 王 悦 任课老师： 车 娜 试验五 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 labelinput type=radio name=sex /男/label labelinput type=radio name=sex /女/label /p p class=choose labelinput type=che