第6章 表格与表单_补充案例(1)
第6章 表格与表单
总结:间距cellspacing的作用
再设置填充为10
<table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
可见：设置表格边框为0时，会使单元格边框也变为0象素， 而设置表格边框为其他数值时，不会影响单元格边框的宽
再设置背景颜色为玫瑰色
<table border="20" bgcolor="#9933CC" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
表格标记
表格是由<table>定义的，行由<tr>定义，单元格 由<td>定义，因此<table>、<tr>、<td>是表格中 三个最基本的标记，必须一起出现。 表格中的单元格<td>能容纳网页中的任何元素，如 图像，文本，列表，表单，表格等。
表单示例讲解.ppt
thisform.text4.value="Ｙ"+str(thisform.text3.value*0.3,5,2)+"元"
说明: 第二句计算是将现在时间减去刚才时间,
具体是 时间差=(现在小时-刚才小时)*60+现在分钟-刚才分钟+(现在秒种-刚才秒钟)/60
4、运行：记时开始，text1中出现当前时间。鼠标点text2后，出现现在的时间
10
制作要领
首先设置数据环境，添加表学生.dbf 1、修改text1文本框的controlsource属性为：学生.学号 （学
生就是学生.dbf的别名） 2、"上一条"和"下一条"按钮大家看看就行了（click事件）。主
要是对文本框操作 3、"添加"按钮作用：将文本框text1中的数据添加到列表框中 click事件代码中重点掌握：
15
微调按钮控件举例
制作一个带有微调按钮控件的表单，通过上下微调按 钮，调整文本框中显示的数值。微调以2为单位
16
制作要领
1、放置一文本框和一微调按钮
2、微调按钮spinner1的属性修改：
调整量 Increment:
2.00
最大值 SpinnerHighValue: 100.00
最小值 SpinnerLowValue: 0.00
mand1.caption="hello2" mand1.caption="hello3"
注意：thisformset就是表单集（相对引用）
1
通讯费用计算
设计一个简单的通讯费用计算器。通讯开始时时间显示在“通讯 开始时间”文本框中，当鼠标焦点移到“通讯时间”文本框时， 显示当前时间，同时显示通讯时长（以分钟为单位表示）以及通 讯费用（每分钟0.30元）
表格、表单和框架基础知识讲义PPT(18张)
-10-
文件上传框、下拉选择框
• 文件上传框 文件上传框用于让用户上传自己的文件，文件上传框与其他文本域类 似，但它还包含了一个浏览按钮。访问者可以通过输入需要上传的文 件的路径或者点击浏览按钮选择需要上传的文件。 语法格式如下：
<frame src="引入网页的路径或地址" /> <frame src="引入网页的路径或地址" /> …… </frameset> </html>
-13-
框架结构
• 基本结构
通过标签<frameset>来定义如何划分框架，通过设置<frameset>的 “cols/rows”属性来确定<frameset>的列/行数以及所占窗口的比例。
<input type="password" name="..." size="..." maxlength="..." />
• 隐藏域 隐藏域是用来收集或发送信息的不可见元素，网页的访问者无法看到 隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交。 语法格式如下：
<input type="hidden" name="..." value="..." />
<input type="button" name="..." value="..." onclick="..." />
网页设计与制作第6章 表单的使用
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
第6章习题答案
第6章习题答案一、填空题1、单击文档窗口左下角的“（）”标签可以选择表格。
正确答案：＜table＞2、单击文档窗口左下角的“（）”标签可以选择单元格。
正确答案：3、一个包括n列表格的宽度＝2×（）＋（n＋1）×单元格间距＋2n×单元格边距＋n×单元格宽度+2n×单元格边框宽度（1个像素）。
正确答案：表格边框4、设置表格的宽度可以使用两种单位，分别是“像素”和“（）”。
正确答案：%5、将光标置于开始的单元格内，按住（）键不放，单击最后的单元格可以选择连续的单元格。
正确答案：Shift 二、选择题1、下列操作不能实现拆分单元格的是（）。
A、在主菜单中选择／／【拆分单元格】命令B、单击鼠标右键，在其快捷菜单中选择／【拆分单元格】命令C、单击单元格面板左下方的按钮D、单击单元格面板左下方的按钮正确答案：D2、一个3列的表格，表格边框宽度是2像素，单元格间距是5像素，单元格边距是3像素，单元格宽度是30像素，那么该表格的宽度是（）像素。
A、138 B、148 C、158 D、168 正确答案：A3、下列关于表格的说法错误的是（）。
A、插入表格时可以定义表格的宽度B、表格可以嵌套，但嵌套层次不宜过多C、表格可以导入但不能导出D、数据表格可以排序正确答案：C4、下列关于单元格的说法错误的是（）。
A、单元格可以删除B、单元格可以合并C、单元格可以拆分D、单元格可以设置边框颜色正确答案：A5、下列关于表格属性的说法错误的是（）。
A、表格可以设置背景颜色B、表格可以设置背景图像C、表格可以设置边框颜色D、表格可以设置单元格边框粗细正确答案：D三、问答题1、选择表格的方法有哪些？答：选择表格的方法如下。
? 单击表格左上角或者单击表格中任何一个单元格的边框线。
? 将光标移至欲选择的表格内，单击文档窗口左下角对应的“＜table＞”标签。
? 将光标置于表格的边框上，当光标呈形状时单击鼠标。
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
《表格和表单》课件
表格和表单是 Web 开发中重要的组成部分，本课程将深入讲解表格和表单的 概念、创建、格式调整和使用等各个方面。
什么是表格
定义
表格是一种通过行和列形成的矩阵结构，用于展示和组织数据。
表格的组成部分
表帮助我们更清晰地展示和比较数据，提供更好的可视化效果。
表单的使用
1 表单的提交
通过点击提交按钮或者按下回车键，将表单数据发送到服务器进行处理。
2 表单的验证
可以使用 JavaScript 或 HTML5 表单验证来验证用户输入的数据的合法性。
表格和表单实例分析
示例分析
通过分析销售报表的表格和客户调查的表单，深入 理解表格和表单的实际应用场景。
实际应用
探索在电子商务和在线调查等领域中如何使用表格 和表单来提供更好的用户体验。
总结
通过本课程的学习，我们了解了表格和表单的概念、创建、格式调整和使用等方面的知识，并在实际应用中获 得了进一步的体验。
1 总体回顾
从定义表格和表单开始，逐步学习了创建和 调整表格、创建和使用表单的方法。
2 下一步行动建议
继续深入研究表格和表单的高级技术，如表 单验证、表格排序和筛选等。
表单的作用
通过表单，我们可以与用户 进行互动，获取用户的输入 数据以便后续处理和使用。
常用表单
常见的表单包括文字输入框、 单选按钮、复选框和下拉列 表等。
如何创建表单
表单的组成部分
表单由表单标签(<form>)、输入控件和表单操作控 件组成。
表单的输入控件
常见的表单输入控件有、和等。</p> </div> </columns> </section>
第6讲 表格与表单
复选框checkbox
• 作用
用于在一组选项中进行多项选择
• 语法格式
<input type=“checkbox” name=“file_name” value=“field_value” checked>
• 语法解释
• “value”属性值表示选中项目后传到 服务器端的值，checked 表示此项被 默认选中，在同一组中可对多个选项框 设置为checked，各复选框的name属 性可以设置为相同或不同的值
描述
设置文字域 设置密码域 设置文件域 设置隐藏域 设置单选框 设置复选框 设置普通按钮 设置提交按钮 设置重置按钮 设置图像域(图像提交按钮)
文本框text
作用
设置单行输入文本框，用于访问者在其中输入 文本信息，输入的信息将以明文显示
• 属语性法格式
描述
nam<einput 设ty置p文e字=域“t的e名x称t”，在脚本中用于获取域的 name=数据“field_name”
• GET方法只能传送ASCII码的字符；而POST方法没 有字符码的限制，它可以传送包含在ISO10646中的 所有字符。
• 表单默认的提交方法是GET，当数据涉及到保密问题 或所传送的数据是用于执行插入或更新数据库操作时， 必须使用POST方法；否则可以使用GET方法。
3) 输入标记<input>
设置MIME类型，默认值为 application/x-www-formurlencoded。需要上传文件到服务器时， 应将该属性设置为multipart/form-data
数据发送形式
• 数据从浏览器向服务器发送时，会分成HTTP 头和HTTP正文体两部分来发送。
• HTTP头包含有关用户代理、服务器信息、内 容类型等信息，这些信息通常以纯文本发送， 因而不安全；
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第六章补充案例
案例6-6 简单的用户登陆界面
一、案例描述
1、考核知识点
input控件
2、练习目标
➢熟悉表单的构成
➢掌握<form>标记的用法
➢理解<form>标记相关属性
➢掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性
3、需求分析
在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。
同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。
为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。
4、案例分析
1)最终实现效果，如图6-11所示。
图6-1登陆界面
2）分析效果图，具体实现步骤如下：
a)定义表单域。
b)定义用于输入用户名的单行文本输入框。
c)定义密码输入框。
d)定义用于输入验证码的单行文本输入框。
e)定义登陆按钮。
二、案例实现
图6-2简单的登陆界面
案例6-7 简单的交规考试答卷
一、案例描述
1、考核知识点
input控件
2、练习目标
➢熟悉表单的构成
➢掌握<form>标记的用法
➢掌握input控件属性中单选框和复选框属性
➢熟悉<label>标记的使用方法
3、需求分析
浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。
虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。
因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。
4、案例分析
1)最终实现效果，如图6-13所示。
图6-3交规考试答卷效果
2）分析效果图，具体实现步骤如下：
a)定义一个名为“交通考试选择题”的<h3>标题。
b)定义表单域
c)使用<p>标记定义单选题的题干。
d)使用<input>标记的单选按钮属性定义选项。
e)使用<p>标记定义多选题的题干。
f)使用<input>标记的复选框属性定义选项。
二、案例实现
案例6-8 制作字符批量替换工具界面
一、案例描述
1、考核知识点
<textarea>控件
2、练习目标
➢掌握<textarea>控件的使用方法
➢掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性
3、需求分析
当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的<textarea></textarea>控件，来创建多行文本输入框。
为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的案例做具体演示。
4、案例分析
1)最终实现效果，如图6-15所示。
图6-4字符批量替换工具界面效果
2）分析效果图，具体实现步骤如下：
a)定义表单域。
b)通过<p>标记定义标注文本“查找”。
c)通过<textarea>控件定义多行文本框。
d)通过<p>标记定义标注文本“替换为”。
e)通过<textarea>控件定义第二个多行文本框。
f)使用<input>标记的复选框属性定义三个复选框。
g)定义提交按钮、重置按钮和普通按钮。
二、案例实现
新建HTML页面，代码如下：
案例6-9 制作简单的游戏选区界面
一、案例描述
1、考核知识点
<select>控件
2、练习目标
➢掌握<select>控件的使用方法
➢掌握下拉菜单分组选项的制作方法
➢掌握input控件属性中的按钮属性
3、需求分析
在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。
为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的案例，对下拉菜单的用法做具体演示。
4、案例分析
1)最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。
图6-5游戏选区界面效果图6-6点击下拉菜单图6-7点击下拉菜单2）分析效果图，具体实现步骤如下：
a)定义表单域
b)定义用于游戏选区的下拉菜单
c)定义用于选择线路的下拉菜单
d)使用<input>标记的按钮属性定义确定和取消按钮
二、案例实现
新建HTML页面，代码如下：
案例6-10 CSS美化表单
一、案例描述
1、考核知识点
CSS控制表单样式
2、练习目标
➢熟悉表格布局的基本原理
➢掌握input控件的常用属性
➢熟悉<fieldset>标记的用法
➢复习CSS基本样式属性
3、需求分析
制作网页时，为了让页面更加美观、便于维护，经常会使用CSS对表单样式进行控制。
为了便于初学者的理解和掌握，接下来，通过一个案例演示CSS美化表单的具体方法。
4、案例分析
1)最终实现效果，如图6-21所示。
图6-8简单的邮箱选区界面
2）分析效果图，具体实现步骤如下：
A.定义表单域，并填充大的背景图片。
B.定义表单内容分组，并确定分组名称为“个人注册”。
C.定义一个3行2列的表格换份表单结构。
D.在第一行第一列和第二行第一列输入提示信息。
E.在第一行第二列和第二行第二列各定义一个单行文本，用于输入用户信息。
F.在第三行第二列设置按钮，并填充背景图片。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
图6-9CSS美化表单
在本案例中，通过<filedset></filedset>标记可以将表单内容分组，并且使用其配套标记
<legend></legend>为各个表单组定义名称。