长春大学２01５—２0１6学年第二学期Wｅb前端开发技术课程实验报告学院:计算机科学技术专业：软件工程班级:软件14４02学号：0４１44０2１0姓名:王悦任课教师：车娜实验五HＴML表单一、实验目得1、理解表单得构成，可以快速创建表单.２、掌握表单相关标记，能够创建具有相应功能得表单控件.3、掌握表单样式得控制，能够美化表单界面。二、内容及要求使用表单控件，并通过ＣSS控制表单样式制作一个学员档案，其效果如图6—1所示,满足以下要求：1、学员档案上面得标题与下面得表单两部分构成。2、标题部分通过标题标记定义。3、表单部分通过相关得表单控件进行定义图6-1“学员档案"CSS样式效果三、实验原理表单:就是网页上用于输入信息得区域,它得主要功能就是收集用户信息，并将这些信息传递给后台服务器,实现网页与用户得沟通。表单由表单控件、提示信息与表单域构成。创建表单:<form>＜/fｏrm>标记被用于创建一个表单,actioｎ、metｈoｄ、name为表单标记<form>得常用属性。acｔion属性用于指定接收并处理表单数据得服务器程序得url地址。meｔhoｄ属性用于设置表单数据得提交方式，其取值为get或post。其中,gｅt为默认值,这种方式提交得数据将显示在浏览器得地址栏中，保密性差，且有数据量得限制。post方式得保密性好，并且无数据量得限制，使用method=＂pｏst＂可以大量得提交数据.ｉｎｐut控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件.ｓelｅct控件:可以定义下拉菜单效果.其中,〈sｅｌect＞〈/sｅlect＞标记用于在表单中添加一个下拉菜单，＜optｉon〉</opｔioｎ〉标记嵌套在〈selｅcｔ〉</seｌecｔ＞标记中，用于定义下拉菜单中得具体选项，每对〈ｓeleｃt>〈/ｓelｅct>中至少应包含一对<oｐtiｏn>〈/option>.tｅxtareａ控件:定义得多行文本输入框。colｓ与roｗｓ为＜textarｅa〉标记得必须属性，其中ｃols用来定义多行文本输入框每行中得字符数，ｒows用来定义多行文本输入框显示得行数,它们得取值均为正整数。CSS控制表单样式：使用CSS可以轻松地控制表单控件得样式，主要体现在控制表单控件得字体、边框、背景与内边距等。四、实验步骤1、结构分析“传智学员档案"由多个表单控件构成。整个页面可以使用一个大盒子＜dｉv＞进行整体控制，然后通过<forｍ〉标记定义表单,并在其中嵌套相应得表单控件。另外,由于表单控件属于内块元素，不会单独占据一行,可以通过〈ｐ>标记嵌套表单控件使其独占一行。2、样式分析（１）通过最外层得diｖ对页面进行整体控制,需要对其设置宽度与高度以及背景图片等。（２)通过foｒm对表单进行整体控制,需要对其设置宽度与内外边距样式。（3）定义表单标题得样式，主要控制其文本样式及内外边距。（4）定义各个表单控件得样式，主要控制她们得宽度、高度、文本、背景及边距等。３、制作页面结构根据上面得分析，可以使用相应得ＨTＭＬ标记来搭建网页结构。使用bacｋｇrｏｕnd属性设置背景图片与设置颜色了。使用〈hn＞设置标题。用了＜div＞标签设置了一个盒子，同时根据wｉｄtｈ、heｉgｈt设置盒子得大小。还应用了〈fｒom>标签，来定义表单。4、定义CSＳ样式（1)定义基础样式，应用boｄy等标签全局控制。（2)整体控制页面，定义<diｖ〉得样式，以及添加背景图片。（３)整体控制表单,定义表单得宽度、内边距样式来对表单进行整体控制。(4）控制表单标题,应用h２标题来定义（5)控制姓名、年龄文本框（6）控制单选按钮及复选框，控制薪资积及多行文本框,控制按钮提交。五、实验代码及网页效果图1。搭建基本结构关键代码如下:〈bｏdy＞<divｃlaｓs="ａlｌ"〉〈fｏrmｃlass=＂lｉｓt”acｔiｏn="#＂method="pｏsｔ”〉＜h2〉传智播客学员档案〈／h２＞<p>〈inｐuｔtypｅ=”text”ｖａlue＝＂本人真实姓名”clａsｓ=”tｘｔ"/＞〈/p〉〈p〉〈inｐuttyｐe=”ｔeｘt"vａｌuｅ=”请填写实际年龄"ｃlaｓs="aｇe"／>＜/p>〈pｃlass="ｃhoose”＞＜label><inputtype=＂raｄio"ｎaｍｅ="sex＂/＞男＜/labeｌ＞〈lａｂel>〈inpｕttｙpe="radio"namｅ=＂sex＂/＞女<／labｅl></p＞〈pｃｌaｓｓ="ｃhooｓｅ”〉＜lａｂｅl〉<inputtyｐe=＂ｃheckboｘ"/>传智老学员〈/ｌａbｅｌ〉〈labe