web前端开发技术实验报告实验五
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
长春大学
20 15—2016学年第二学期
Web前端开发技术课程
实验报告
学 院：计算机科学技术
专业：软件工程
班级：软件14402
学 号：_0
姓 名：王悦
任课教师：
实验五HTML表单
一、
1.理解表单的构成，可以快速创建表单。
2.掌握表单相关标记，能够创建具有相应功能的表单控件。
3.掌握表单样式的控制，能够美化表单Biblioteka Baidu面。
四、实验步骤
1、结构分析
“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子
<div>进行整体控制，然后通过<form>标记定义表单，并在其中嵌套相应的表单 控件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过<p>标
记嵌套表单控件使其独占一行。
2、样式分析
(1)通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以
或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可以轻松地控制表单控件的样式，主要体现 在控制表单控件的字体、边框、背景和内边距等。
将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示
信息和表单域构成
创建表单：<form></form>标记被用于创建一个表单，action、method、name
为表单标记<form>的常用属性。action属性用于指定接收并处理表单数据的服 务器程序的url地址。method属性用于设置表单数据的提交方式，其取值为get
二、
使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图
6-1所示，满足以下要求：
1.学员档案上面的标题和下面的表单两部分构成。
2.标题部分通过标题标记定义。
3.表单部分通过相关的表单控件进行定义
图6-1“学员档案”CSS样式效果
三、实验原理
表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并
20 15—2016学年第二学期
Web前端开发技术课程
实验报告
学 院：计算机科学技术
专业：软件工程
班级：软件14402
学 号：_0
姓 名：王悦
任课教师：
实验五HTML表单
一、
1.理解表单的构成，可以快速创建表单。
2.掌握表单相关标记，能够创建具有相应功能的表单控件。
3.掌握表单样式的控制，能够美化表单Biblioteka Baidu面。
四、实验步骤
1、结构分析
“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子
<div>进行整体控制，然后通过<form>标记定义表单，并在其中嵌套相应的表单 控件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过<p>标
记嵌套表单控件使其独占一行。
2、样式分析
(1)通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以
或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可以轻松地控制表单控件的样式，主要体现 在控制表单控件的字体、边框、背景和内边距等。
将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示
信息和表单域构成
创建表单：<form></form>标记被用于创建一个表单，action、method、name
为表单标记<form>的常用属性。action属性用于指定接收并处理表单数据的服 务器程序的url地址。method属性用于设置表单数据的提交方式，其取值为get
二、
使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图
6-1所示，满足以下要求：
1.学员档案上面的标题和下面的表单两部分构成。
2.标题部分通过标题标记定义。
3.表单部分通过相关的表单控件进行定义
图6-1“学员档案”CSS样式效果
三、实验原理
表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并