web前端开发技术实验报告实验五.pdf

长 春 大 学 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 — 2 精选文档 或 post 。其中，get 为默认值，这种方式提交的数据将显示在浏览器的地址栏中， 必威体育官网网址性差，且有数据量的限制。 post 方式的必威体育官网网址性好，并且无数据量的限制， 使用 method=post 可以大量的提交数据。 input 控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置 按钮等控件。 select 控件：可以定义下拉菜单效果。其中， select/select 标记用 于 在 表 单 中 添 加 一 个 下 拉 菜 单 ， option/option 标 记 嵌 套 在 select/select 标 记 中 ， 用 于 定 义 下 拉 菜 单 中 的 具 体 选 项 ， 每 对 select/select 中至少应包含一对 option/option 。 textarea 控件：定义的多行文本输入框。 cols 和 rows 为textarea 标记 的必须属性，其中 cols 用来定义多行文本输入框每行中的字符数， rows 用来定 义多行文本输入框显示的行数，它们的取值均为正整