Lesson 9 表单对象的使用
第九章表单的使用
向表单添加对象
• 为了对象整齐排列，先向表单内插入表格。 为了对象整齐排列，先向表单内插入表格。
2011年2月25日星期五
王颂华 设计
10
美化表单
• 在表格外再加一个一行一列的表格，设置表格 在表格外再加一个一行一列的表格， 背景。边框。 背景。边框。
2011年2月25日星期五
王颂华 设计
11
行为面板
2011年2月25日星期五
王颂华 设计
3
重点难点
重点：表单的概念、 重点：表单的概念、作用 创建表单对象 表单的美化
难点： 难点：表单对应的后数据库处理台
2011年2月25日星期五 王颂华 设计 4
本章内容
表单面板介绍 表单的创建 表单对象的创建
2011年2月25日星期五
王颂华 设计
5
表单面板共有14个表单域对象。
2011年2月25日星期五
王颂华 设计
6
表单按钮
• 表单：一个表单中的其他对象必须放在表单标 表单： 签之间。 签之间。 • 文本域：一个接受文本的空白框，可输入文本、 文本域：一个接受文本的空白框，可输入文本、 数字。对于密码则显示为* 数字。对于密码则显示为* • 隐藏域：有时某些信息与用户无关，理需要在 隐藏域：有时某些信息与用户无关， 表单上显示， 表单上显示，但这些信息与处理表单的应用程 序有关，需要伟合服务器， 序有关，需要伟合服务器，因此把这些信息放 在隐藏区域中。 在隐藏区域中。
2011年2月25日星期五 王颂华 设计 8
建立表单
动 作：用于输入一个在服务器端处理表单信息 的应用程 序的URL。 序的 。 方 法：将表单中的数据传送给服务器的传送方 式。 GET： 将表单的数据附加到 ： 将表单的数据附加到URL后面传送给服 后面传送给服 务器， 务器，有 长度的限制。 长度的限制。 POST：用标准输入方式将表单内的数据传送给 ： 9 2011年2月25日星期五 王颂华 设计 服务器， 服务器， 服务器用读取标准输入的方式读取表单
[计算机]第9章 表单的使用
![[计算机]第9章 表单的使用](https://img.taocdn.com/s3/m/2cf970b433687e21ae45a9af.png)
9.7 实践技能训练----制作“注册页面”
本节将通过一个“注册页面”来联系前面所学的有关表单 的知识和操作。本实例的最终效果如图9-16所示。
图9-16 “注册页面”效果图 18
网页设计
1
第9章 表单的使用
9.1 表单的基本概念 9.2 表单的创建 9.3 创建文本域 9.4 创建按钮 9.5 插入单选按钮与复选框 9.6 列表与菜单 9.7 实践技能训练----制作“注册页面”
2
9.1 表单的基本概念
表单的应用非常广泛。例如常见的留言簿、讨论区、会员 注册/登陆、在线查询等，都需要通过表单才能将数据传送到 后台程序进行处理，实际上表单的作用就是收集信息和数据。 如图9-1所示的即为应用表单元素的调查问卷网页。
图9-12 列表与菜单元素
14
9.6 列表与菜单
1、创建列表 单击“表单”标签内的“列表/菜单”按钮，Dreamweaver
即会在网页中插入一个列表/菜单。其属性面板如图9-13所示。
图9-13 列表/菜单属性面板
15
9.6 列表与菜单
单击“列表值”按钮，打开如图9-14所示的对话框，在这 里可以添加、设置列表中的选项值。
9.3.3 创建密码文本域 密码文本域也是建立在单行文本域基础上的，选中文本域，
并在其“属性”面板上将“类型”设为“密码”。通常用于 用户登录时的密码文本框如图9-6所示。
图9-6 密码文本域
8
9.4 创建按钮
9.4.1 插入标准表单按钮 将插入点放在表单域内，然后单击“表单”标签中的“按
钮”按钮，或者选择“插入”→“表单”→“按钮”命令， Dreamweaver 8.0会在表单域中插入“按钮”元素，并显示 “按钮”的属性面板，如图9-7所示。
Dreamweaver cs5中文版入门与提高实例教程课件第9章表单的应用
9.2.5 按钮
表单中的按钮对象是用于触发服务器端脚本处理程序的工具。 HTML提供了三种基本类型的按钮：提交、重置、无。其中，“提交”按钮
会使用POST方法将表单提交给指定的动作进一步处理，通常是服务器端程 序的URL或者一个mailto地址；“重置”按钮会清除表单中所有的域，以便重 新输入表单数据；“无”按钮通常用于执行一些脚本操作。
当用户选择的单选按钮与none或 invalid 关联时，指定的值也相应地注册为 none或 invalid。如果用户选择具有空值的单选按钮，则浏览器将返回“请进 行选择”的错误消息。如果用户选择具有无效值的单选按钮，则浏览器将返 回“请选择一个有效值”的错误消息。
注意：单选按钮本身和单选按钮组构件都必须分配有 none 或 invalid 值，错 误消息才能正确显示。
9.2.6 图像域
“图像域”可以替代“提交”按钮来执行将表单数据提交给服务器端程序的功 能。而且使用图像域可以使文档更为美观。
在图像域代码末尾加上“value=Submit”，这时图像域代码成为：<input name=“imageField” type=“image” src=“mail.gif” width=“23” height=“16” border=“0” value=“Submit”>。
执行“查看”/“文件头内容”命令显示文档窗口的头部。在插入栏单击“常用”面板中 的插入脚本图标。
在 “脚本”对话框的“语言”分类中选择“JavaScript”，在“内容”文本框输入以下
JavaScript程序段：
function checkForm(){
if(.value==""){ alert("用户名不能为空！");
《表单控件的使用》课件
本PPT课件将介绍表单控件的使用，包括其意义、常见种类、布局与样式等 内容。
简介
表单控件的意义
解决用户输入和数据提交的需求，提供交互性和数据验证。
常见的表单控件种类
输入框、下拉列表框、单选框、复选框、按钮等。
表单控件的布局与样式
如何合理布局和美化表单控件，增强用户体验。
输入框
输入框的作用
单选框和复选框的样式及 自定义
通过CSS样式实现自定义的选择 框样式，提升界面美观和互动性。
按钮控件
1
按钮控件的作用
触发特定操作，如提交表单、保存数据
按钮控件的属性及常见使用场景
2
等。
包括按钮类型、图标、禁用等属性。常
用于交互界面中的操作按钮。
3
按钮控件的样画效 果，增强用户点击反馈。
表单控件的验证
表单控件的常见验证方式
如必填项、格式验证等，保证数据的准确性和完整性。
表单控件验证的实现方式
使用JavaScript进行前端验证，或通过后端验证实现数据的合法性检查。
表单控件验证的示例
展示验证失败时的错误提示和验证成功时的反馈方式。
总结与展望
表单控件的实际应用
了解表单控件在实际项目中的应 用场景和用法。
进一步了解表单控件及其 使用技巧
深入学习表单控件的高级功能和 实现技巧，提升表单交互设计水 平。
表单控件的未来发展方向
展望表单控件技术的新趋势和创 新方向，为下一代表单设计做准 备。
接收用户的文本输入，如用户名、 密码等。
输入框的属性及常见使用 场景
包括类型、最大长度、自动完成 等属性。常用于搜索、用户登录 等场景。
输入框的样式及自定义
表单控件的使用
控件的基本属性
6.Top属性 对于控件，指定相对父对象最顶端所在位置； 对于表单对象，确定表单顶端边缘与VFP主 窗口之间的距离 7.Left属性 对于控件，指定相对父对象的左边界；对于 表单对象，确定表单的左边界与性
8.Enabled属性 指定控件是否可用。 .T.—真(默认值)：为可用。 .F.—假：不可用，呈暗淡色,禁止用户 进行操作。 9.Visible属性 指定控件是否可见。 .T.—真(默认值)：为可见。 .F.—假：不可见，但控件本身存在。
控件的基本属性
23.SpecialEffect属性 指定控件不同样式选项。 0—3维：立体效果。 1—平面：平面效果。 对于页框控件SpecialEffect属性 0 — 凸起 ( 除容器对象之外的所有对象的缺省 值) 。 1—凹下。 2—平面(仅是容器对象的缺省值)。
控件的基本属性
24.Value属性
指定控件的当前状态。
适用于：复选框、列表框、组合框、命 令按钮组、编辑框、表格、文本框、选项 按钮组、微调按钮。
对于列表框、组合框、命令按钮组、编 辑框、表格、文本框、微调按钮，Value属 性的设置为当前所选的字符或数值。
控件的基本属性
25.InputMask属性 指定控件中数据的输入格式和显示方式。 应用于：微调、文本框、组合框。 26.Stretch属性 在一个控件内部，指定如何调整一幅图像以适应 控件的大小。 0—剪裁，剪裁图像以适应控件。 1 — 等比填充。调整图像大小以适合控件，同时 保持图像的原始比例。 2 — 变比填充。调整图像大小以适合控件，但是 不保持图像的原始比例。
9.3.1 文本框控件(TextBox)
2.常用事件 Change、KeyPress和LostFocus。 3.常用方法 文本框最常用的方法是： SetFocus ，该 方法是使指定的文本框获得焦点。 例如：ThisForm.Text1.SetFocus表示程 序开始时表单中的文本框首先得到光标。
第九章 面向对象与表单应用
运行表单时，在文本框TEXT1中输入10后，单击 CMD1，请问文本框TEXT2中显示内容为什么？
A.25 B.20 C.100 D.95
32
总
属性(property)
结
属性、事件、方法是面向对象编程的初学者常常容易混 淆的基本概念。为彻底弄清楚它们之间的区别，我们对这些 概念总结如下：
就是对象的性质，如长、宽、高的位置、颜色、标题、字体大小等。 为了达到软件编制的目的，也为了使软件在运行的时候界面看起来舒服， 我们必须在设计软件时对每个对象的有关属性做适当的设置。 事件(event) 就是可能会发生在对象上的事情，也就是我们对对象所做的操作（或 “方法”与“事件”有相似之处，都是为了完成某个任 者系统对某个对象的操作），如按钮被按动（单击）、对象被拖动、被改 务，但同一个事件可完成不同任务，取决于所编的代码是 变大小、被鼠标左键双击等等。为了使对象在某一事件发生时能够做出所 怎样的，而方法则是固定的，任何时候调用都是完成同一 需要的反应，就必须针对这一事件编出相应的程序代码来完成目标。
3
6.1 面向对象概念的引入
对象
（1）对象 对象（Object）是反映客观事物属性及行为特 例如：在VFP的应用程序中，窗口便是一个对象。它具有以 征的描述。每个对象都具有描述它的特征的属性， 下属性和行为特征： 及附属于它的行为。对象把事物的属性和行为封装 .窗口的标题及窗口的大小； 在一起，是一个动态的概念。对象是面向对象编程 .窗口的前景和背景颜色； 的基本元素，是“类”的具体实例。 .窗口中所显示信息的内容及格式； （2）对象的属性及行为 .窗口中提供了哪些控件； 对象的属性是描述对象特征的参数；对象的行 .窗口中每个控件在窗口的位置； 为特征描述了对象可执行的行为动作。
表单的使用
表单的使用插入表单；●表单：在文档中定义一个表单区域。
●文本字段：可以输入任意文本，包括字母、数字、其他字符。
该类型又分为单行文本框、多行文本框和密码文本框（可在“属性”面板中设置）。
●隐藏域：用于保存某些在网页中需连续传递的信息。
●文本区域：可以任意输入多行文本，包括字母、数字、其他字符。
●复选框：提供多个选项，即在一组选项中可同时选择多个项。
●单选按钮：提供多个选项，即在一组选项中可同时选择多个项。
●单选按钮组：一次可以选择一组（多个）单选项。
●列表/菜单：“列表”是普通列表框，供用户在列表框中选择一项或多项；“菜单”为菜单列表框，如果用户希望选择其中一项后能够打开指定的网页，则必须与跳转的菜单结合使用。
●跳转菜单：可以实现在页面中插入一个菜单列表框，并将菜单中的每一项链接到指定的网页。
当选择某项后，浏览器即打开该项链接的网页。
●图像域：可以使用图片替代提交按钮的作用。
●文件域：上载文件时使用。
●按钮：接受鼠标单击并执行指定的任务。
该类型又分为提交表单按钮、普通按钮和重置表单按钮。
●标签：使用标签来定义表单控制间的关系。
●字段集：将一群表单元素形成一个组。
1、选择“插入”工具栏中的“表单”插入栏2、单击插入栏中的“表单”按钮，表单框将出现在编辑窗口中光标所在的区域在“属性”面板中设置“表单名称”，默认为“form1”，动作为mailto:liangmx_116@，“方法”选择为“Post”选项，如图步骤2．插入文本域1、光标定位在表单的红色虚线框区域内，点击“常用”选项卡中的“表格”按钮。
2、把光标放置在添加文本域的位置上，单击“表单”选项卡中的“文本字段”按钮，如图9-5所示。
随即文本域被插入到页面中，如图在“属性”面板中的“文本域”下方的文本框中给单行文本命名将光标放置到要添加文本区域的位置上，单击“表单”选项卡中的“文本区域”按钮，随即文本区域被插入到页面中,如图在“属性”面板中“文本域”下方的文本框中输入该文本区域的名称插入复选框1、将光标放置到要添加复选框的位置上，单击“表单”选项卡中的“复选框”按钮，2、在“属性”面板中“复选框名称”下方的文本框中输入该复选框的名称插入单选按钮1、将光标放置到要添加单选按钮的位置上，单击“表单”选项卡中的“单选按钮”按钮2、在“属性”面板中“单选按钮”下方的文本框中输入该单选按钮的名称插入列表/菜单1、将光标放置到要添加列表/菜单的位置上，单击“表单”选项卡中的“列表/菜单”按钮2、在“属性”面板的“类型”选项中有“菜单”和“列表”选项，根据需要选择是插入“菜单”或是插入“列表”，3、在对话框中设定“来自哪里”为菜单中的项目4、设定完毕后单击“确定”按钮，回到“属性”面板，在“初始化选定”列表框中选择“北京”选项即可插入文件域2、在“属性”面板的“文件域名称”下方的文本框中输入文件域的名称，如“file”，其他使用默认值插入按钮1、将光标放置到要添加按钮的位置上，单击“表单”选项卡中的“按钮”按钮2、在“属性”面板的“值”后面文本框内输入“发表留言”，“动作”选项，设定“提交表单”，其他默认Spry表单验证插入Spry表单验证Spry验证文本域(1)单击“表单”选项卡中的“Spry验证文本域”按钮选框”按钮选中Spry验证文本域，在“属性”面板中的预览状态设置为“必填”，其他默认Spry表单验证的属性设置选框”按钮选中出生年月后的文本域，单击“表单”选项卡中的“Spry验证文本域”按钮，在此文本域中添加验证，然后在“属性”面板上设置“类型”为“日期”，“格式”为“yyyy/mm/dd”选中“专业”字样后面的菜单，单击“表单”选项卡中的“Spry验证选择”按钮随即Spry验证选择被插入到页面中选中Spry验证选择，把“属性”面板中的“不允许”设置为“空值”，“预览状态”设置为“初始”，其它项设置为默认Spry验证复选框单击“表单”选项卡中的“Spry验证复选框”按钮选中Spry验证复选框，“属性”面板中的所有项设置为默认Spry验证文本区域单击“表单”选项卡中的“Spry验证文本区域”按钮选中Spry验证复选框，在“属性”面板中的“最小字符数”设置为“0”，最大字符数设置为“100”，其他选项设置为默认Spry 验证文本域Spry 验证文本域用于在站点访问者输入文本时显示文本的状态是有效或无效Spry 验证文本域：设置Spry 验证文本域的名称。
应用表单和表单对象
单元二模板与表单的使用项目三应用表单和表单对象教学目标1．理解表单的概念、用途以及表单对象的注意事项；2．掌握表单的创建和设置，以及表单的检查；3．掌握各表单对象的插入和属性的设置，以及表单中数据的提交；4．掌握商品订购界面、留言板以及注册表界面的制作；教学要求1．认真听讲，专心操作, 操作规范，认真记录实验过程，总结操作经验和写好实验报告，在实验中培养严谨科学的实践操作习惯；2．遵守学校的实验室纪律，注意人身和设备的安全操作，爱护实验设备、及时上缴作业；3．教学环境： 50台计算机，并安装WindowsXP操作系统以及Dreamweaver8以上系统。
知识要点1．理解表单的概念、用途；2．认识表单对象及其注意事项；技术要点1．掌握表单的创建和设置，以及表单的检查；2．掌握各表单对象的插入和属性的设置，以及表单中数据的提交；3．掌握商品订购界面、留言板以及注册表界面的制作；技能训练一．讲授与示范正确启动计算机，在最后一个磁盘上建立以学号为名的文件夹，从指定的共享文件夹中将“实习指导书”和其他内容复制到该文件夹中。
(一) 表单的概念1．表单可以实现浏览者与服务器之间信息的交互传送，实现网络信息收集处理的一种重要的方式，表单是动态网页的灵魂。
2．用途通过表单可以从Internet服务器网络的用户端收集信息例如收集用户资料、获取用户订单，然后将收集来的信息经过服务器处理后再反馈给用户。
3．通常表单的工作过程1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮；2）通过Internet将信息传送到服务器上；3）服务器上专门的程序对这些数据进行处理，若有错误会返回错误信息，并要求纠正错误；4）当数据完整无误后，服务器反馈一个输入完成信息。
4．表单组成一个完整的表单设计包含两个部分1）表单对象部分指在网页中进行描述的表单对象，由网页设计师制作出，即看到的页面界面，并不具备工作能力；。
2）应用程序部分它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。
表单控件的使用
单选框控件的属性设置
name
用于标识单选框的名称，在提交表单时使用。
disabled
禁用单选框，用户无法选择该选项。
value
单选框的唯一标识符，当用户选择该选项并 提交表单时，该值会被发送到服务器。
checked
设置单选框为默认选中状态。
单选框控件的使用场景
调查问卷
在调查问卷中，可以使用 单选框让用户在一组选项 中选择一个答案。
表单控件的分类
总结词
表单控件可以根据其用途和功能进行分类。
详细描述
根据用途和功能，表单控件可以分为以下几类：输入框、选择器、开关、滑块、 上传控件等。每种类型的控件都有其特定的使用场景和功能特点，以满足用户的 不同需求。
表单控件的发展历程
总结词
表单控件的发展历程可以追溯到早期的Web开发。
详细描述
在早期的Web开发中，表单控件相对简单，主要用于简单的数据提交。随着Web技术的不断发展，表单控件的 功能和外观也日益丰富和多样化，支持更多的交互和定制化需求。如今，表单控件已经成为Web界面设计中不可 或缺的一部分，为提升用户体验和实现用户交互提供了强大的支持。
02
文本框控件
文本框控件的概述
文本框控件是一种常见的表单控件，用于获取用户输入的文本信息。 它通常用于表单中需要用户输入文本的场景，如填写姓名、地址、电话号码等。
复选框常用于多选调查问卷、表 单提交等场景，方便用户快速选
择多个选项。
复选框控件的属性设置
name
复选框的名称，用于标识该复选框的 唯一性。
value
复选框的值，当用户选中该复选框时， 该值会被提交给服务器。
disabled
是否禁用该复选框，禁用后的复选框 无法进行选择操作。
Visual FoxPro 9.0 基础教程第9章 使用表单控件
&&获得当前按钮编号 &&分别处理
&&设置当前工作区 &&获得当前表的字段个数 &&设置表格控件列数 &&设置表格控件数据源 &&刷新表格
(5) TextBox（文本框）控件
常用事件：
GetFocus LostFocus InteractiveChange Valid
常用方法：
SetFocus：用来将焦点移到指定的文本框控件上， 该方法可用来触发GetFocus事件。
(6) Command Button（命令按钮）控件
鼠标左键双击命令按钮启动代码编辑器，必须编写命令按 钮Click事件代码，才能对命令按钮Click事件进行响应。
控制类控件 ✓Command Botton控件 ✓Command Group控件 ✓Option Group控件 ✓Timer控件 容器类控件
✓Grid控件 ✓Page Frame控件 ✓Contanier控件 其他控件
✓Hyperlink控件 ✓ActiveX绑定控件
设计“说明”表单
(1) Labelp(命令组)控件
序号 属性
属性功能
1 ButtonCount 按钮数目
2 Value
指定命令组当前选定状
态。可为数值或字符型。若为数值n,表示
第n个按钮被选定。
常用事件：Click事件
命令按钮组的Click事件
Dreamweaver cs5标准实例课件第9章 应用表单
Spry 验证复选框构件是 HTML 表单中的一个或一组复选框。例如本 例中，表单要求用户至少选择一项，但不能多于两项。如果用户没有 进行选择，或选择的项多于两项，则该构件会自动返回一条消息，声 明不符合最小选择数或最大选择数要求。
注意：由于单选按钮是以组为单位的，因此 所有的单选按钮都必须拥有同一个名称，并且其 值均不能相同。
注意：与单选按钮不同， 由于每一个复选框都是独立的， 因此应为每个复选框设置唯一 的名称。
9.1.6 按钮
表单中的按钮对象是用于触发服务器端脚本处理程序的工具。 HTML提供了三种基本类型的按钮：提交、重置、无。其中，“提交”按钮
学习目的
通过本章的学习，您可以掌握：
创建表单网页 使用Spry表单验证控件 处理表单
9.1 创建表单网页
9.1.1 插入表单域
执行“插入”/“表单”/“表单”菜单命令。 提示：表单标记可以嵌套在其他 HTML标记中，其他HTML标记也可 以嵌套在表单中。但是，一个表单 不能嵌套在另一个表单中。
会使用POST方法将表单提交给指定的动作进一步处理，通常是服务器端程 序的URL或者一个mailto地址；“重置”按钮会清除表单中所有的域，以便重 新输入表单数据；“无”按钮通常用于执行一些脚本操作。
9.1.7 图像域
“图像域”可以替代“提交”按钮来执行将表单数据提交给服务器端程序的功 能。而且使用图像域可以使文档更为美观。
选择“窗口”/“属性”命令，打开表单属性面板，对表单参数进行设置。
技巧：不要使用GET方法发送长表单。URL的长度限制在8192个字符以内。如 果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。而且， 在发送机密用户名和密码、信用卡号或其他机密信息时，用GET方法传递信息不安 全。
html—表单对象
HTML——表单对象要想创建一个交互式的网页，就离不开控件。
表单的作用就是用于标识网页中包含控件的部分，表单中的控件用于网页中的输入控制，实现了用户与服务器的交互。
一、复选框和单选框当某一元素或对象可以有多个可选值，或者仅是一个简单的布尔型值时，可以用复选框（type=checkbox）。
在提交数据时，选择的每个复选框都产生一个单独的名字/值对。
复选框的默认值是on。
相反的，如果表单区中的一组值同时只能有一个有效，那么可以选用单选按钮（type=radio）。
但选按钮需要一个显式VALUE=属性。
说明：同一表单中的一组复选框或者单选框组中都要给出相同的名字。
例1：一个关于复选框的例子。
〈form method="POST" action="--WEBBOT-SELF--"〉〈p〉搜索你想要的商品：〈/p〉〈p〉〈input type="checkbox" name="chked" value="服饰"〉服饰〈input type="checkbox" name="chked" value="数码"〉数码〈input type="checkbox" name="chked" value="家居"〉家居〈input type="checkbox" name="chked" value="手机"〉手机〈/p〉〈p〉〈input type="submit" value="搜索" name="B1"〉〈/p〉〈/form〉页面效果：搜索你想要的商品：服饰数码家居手机搜索普通提交重置二、下拉列表框列表框用于列举一组可供选择的内容，点击按钮可显示所有选项。
表单_基础知识
表单表单form是Internet和服务器之间进行信息交流的一种重要工具。
包括按钮、文本框、单选按钮、复选按钮等，它们被称之为表单对象。
表单的使用包括两部分：一是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序而在浏览器执行，也可以是服务器程序，处理用户提交的数据，返回结果。
一.可插入的表单对象Dreamweaver中，在“插入”面板中，有一个“表单”分类，选择该分类，可插入的表单对象快捷按钮就会出现。
如下图：可插入的对象，从左至右，包括：∙表单∙文本字段∙隐藏域∙文本区域∙复选框∙单选按钮∙单选按钮组∙列表/菜单∙跳转菜单∙图像域∙文件域∙按钮1.插入表单域要在网页中插入表单对象，首先应该插入一个表单域，否则服务器将无法处理用户填写的信息。
操作步骤如下：步骤1：“插入”面板中，选择“表单”分类，单击左边第1个“表单”按钮，随即插入到网页中一个表单域，表单域在设计视图中显示为一个红色虚线框的范围。
如图所示：如果没有红色虚线框，执行菜单栏“查看/可视化助理/不可见元素”命令即可。
步骤2：设置表单域属性。
使用鼠标单击虚线的边框，此时虚线框内出现黑色区域，表示该表单域被选中，属性面板如下：表单域属性面板包括：∙表单名称：标识表单的唯一名称。
∙动作：指定处理该表单的动态页或脚本的路径。
可以键入完整的路径，也可以单击“浏览文件”按钮指定到同一站点中包含该脚本或应用程序页的相应文件夹。
如果没有相关程序支持的话，也可以使用E-mail的方式来传输表单信息，这种方式在动作文本框中键入：“mailto：电子邮件地址”。
表示提交的信息将会发送到作者的邮箱中。
比如∙方法：用于选择表单数据传输到服务器的方法。
可选择速度快但携带数据量小的GET方法，或者数据量大的POST方法。
一般使用POST方法。
∙目标：指定打开窗口的方式。
∙MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型。
∙类：定义好的CSS样式。
vfp第九章
多文档界面(MDI)：由单一的主窗口组成，其它应用程序窗口 ：由单一的主窗口组成， 多文档界面 在主窗口中或浮动在主窗口之上。 本身就是一个MDI的窗口， 的窗口， 在主窗口中或浮动在主窗口之上。VFP本身就是一个 本身就是一个 的窗口 包含了命令窗口，编辑窗口和设计窗口等。 包含了命令窗口，编辑窗口和设计窗口等。 单文档界面(SDI)：由一个或多个相互独立的窗口组成，这些窗 ：由一个或多个相互独立的窗口组成， 单文档界面 口单独显示。 口单独显示。 但也有一些应用程序综合了SDI和MDI的特性，需要将 和 的特性， 但也有一些应用程序综合了 的特性 需要将SDI和MDI 和 混合使用。例如， 将调试器显示为一SDI应用程序，而它本身 应用程序， 混合使用。例如，VFP将调试器显示为一 将调试器显示为一 应用程序 又包含了自己的MDI窗口 又包含了自己的 窗口
表单类型 主表单 子表单
ShowWindow属性 属性 2-作为顶层表单 作为顶层表单 0-在屏幕中 在屏幕中 1-在顶层表单中 在顶层表单中
MDIForm .F.
.T.最大化时子表单和父表单相连 最大化时子表单和父表单相连 .F.最大化时子窗口为分开窗口 最大化时子窗口为分开窗口
Desktop .F. .F.
浮动表单（ 浮动表单（Floating Form)：属于一主表单，但并不是包含在主表 ：属于一主表单， 单中，它可以移至屏幕的任何位置，但不能在主窗口后台移动。 单中，它可以移至屏幕的任何位置，但不能在主窗口后台移动。最 小化时，它将显示在桌面的底部。 最小化， 小化时，它将显示在桌面的底部。当MDI最小化，一同最小化。 最小化 一同最小化。
顶层表单（ 顶层表单（Top-leve form)：没有父表单的独立表单，用于创建一 ：没有父表单的独立表单， 应用程序， 应用程序中其它子表单的父表单。 个SDI应用程序，或用作 应用程序 或用作MDI应用程序中其它子表单的父表单。顶 应用程序中其它子表单的父表单 层表单与其他Windows应用程序同级，可出现在其前台或后台，并 应用程序同级， 层表单与其他 应用程序同级 可出现在其前台或后台， 且显示在Windows任务栏中。 任务栏中。 且显示在 任务栏中
Form_表单对象详解
1.2 设置表单对象
• 在javascript中，定义了一系列的属性和方法来设 置表单对象。其中name属性和elements属性已经 讲解过，name属性表示表单的名称，使用它可以 对相应的表单进行访问。Elements属性表示表单 中的元素，使用elements属性可以得到表单元素 数组。 • 表单对象还有一个和elements属性有关的属性， 那就是length属性。通过使用length属性可以得到 表单中表单元素的数量。
通过代码实例跟我学JavaScript ——表单及组成表单控件对象的应用实例
1.1表单及组成表单控件对象的应用实例1、表单Form对象表单Form对象其实是document文档对象的子对象，Javascript的运行时引擎（Runtime Engine）自动为每一个表单建立一个表单对象。
（1）格式document.forms[索引].属性document.forms[索引].方法（参数）document.表单名称.属性document.表单名称.方法（参数）document.getElementById("表单ID名").方法（参数）（2）表单对象的属性（3）表单对象的方法2、密码输入框组件对象（1）格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.密码对象名称.属性document.表单名称.密码对象名称.方法（参数） （2）属性（3）方法3、按钮对象、提交按钮对象、重置按钮对象 （1）格式document.forms[索引].elements[索引].属性 document.forms[索引].elements[索引].方法（参数） document.表单名称.按钮对象名称.属性document.表单名称.按钮对象名称.方法（参数） （2）属性（3）方法4、隐藏对象（1）格式document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.内部的对象名称.属性document.表单名称.内部的对象名称.方法（参数）（2）属性5、单选按钮对象（1）格式document.forms[索引].elements[索引](索引).属性document.forms[索引].elements[索引](索引).方法（参数）document.表单名称.单选对象名称[索引].属性document.表单名称.单选对象名称[索引].方法（参数）（2）属性（3）方法6、复选框对象（1）格式document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.单选对象名称[索引].属性document.表单名称.单选对象名称[索引].方法（参数）（2）属性（3）方法7、选择对象（1）属性（2）方法（3）示例<Script>function getText() {sel = document.forms[0].weekdayans = sel.options[sel.selectedIndex].textreturn ans;}</Script><FORM>请选择...<SELECT name=weekday><OPTION V ALUE="Monday">星期一<OPTION V ALUE="Tuesday">星期二<OPTION V ALUE="Wednesday">星期三<OPTION V ALUE="Thursday">星期四<OPTION V ALUE="Friday">星期五<OPTION V ALUE="Saturday">星期六<OPTION V ALUE="Sunday">星期日</SELECT><P><INPUT TYPE="button" V ALUE="取出选项的文字" onClick="alert(getText())"><INPUT TYPE="button" V ALUE="取出选项的值" onClick="alert(this.form.weekday.value)"><BR></FORM>（4）示例<FORM NAME="form1">你最喜欢哪一种水果?<INPUT TYPE="text" NAME="fruit"><A HREF="#" onClick="javascript:open('1.htm','','width=100')">查询</A></FORM>而1.htm页面的内容如下：<Script>function choice() {sel = document.forms[0].elements[0];opener.document.form1.fruit.value = sel.options[sel.selectedIndex].text;self.close();}</Script><FORM><SELECT onChange="choice()"><OPTION>请选择<OPTION>西瓜<OPTION>香蕉</SELECT></FORM>（5）覆盖示例<Script>function createOptions(){var option = new Option(document.form1.select1.value) document.form1.select2.options[2] = option;}</script><form name="form1"><select name="select1" size="10"><option>可选择项目<option>---------------<option value="香蕉">香蕉<option value="葡萄">葡萄<option value="苹果">苹果<option value="梨子">梨子</select><input type="button" value="-->" onClick="createOptions()"> <select name="select2" size="10"><option>选择项目<option>---------------</select></form>（6）追加的示例<Script>function createOptions(){sel1 = document.form1.select1;sel2 = document.form1.select2;var num = sel1.selectedIndex;if (num > 1) {var option = new Option(sel1.options[num].text);var item = sel2.options.length;sel2.options[item] = option;}}function delOptions() {var num = document.form1.select2.selectedIndex;if (num>1)document.form1.select2.options[num] = null;}</script><form name="form1"><select name="select1" size="10" onDblClick="createOptions()"> <option>可选择项目<option>---------------<option value="香蕉">香蕉<option value="葡萄">葡萄<option value="苹果">苹果<option value="梨子">梨子</select><input type="button" value="选择" onClick="createOptions()"> <select name="select2" size="10"><option>选择项目<option>---------------</select><input type="button" value="删除" onClick="delOptions()"></form>8、选项对象：它是选择对象的子对象（1）格式：<option value="值" selected>文字</option>new Option([文字[,值[,defaultSelected[,selected]]]]) （2）属性杨教授工作室精心创作的优秀程序员职业提升必读系列资料9、文本区域对象（1）属性（2）方法杨教授工作室，版权所有，盗版必究，11/11页。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Lesson 9 表单对象的使用一、form对象的属性、方法和事件∙在程序中，如果创建的表单有一个名字(如myform)，那么就可通过这个表单名访问它，如:document.myform。
∙获取了form对象之后，就可以通过使用其属性、方法和事件来实现各种功能。
格式：document.forms[索引].属性document.forms[索引].方法（参数）document.表单名称.属性document.表单名称.方法（参数）属性说明action 表单动作elements 以索引表示的所有表单元素encoding 表单数据的编码类型length 表单元素的个数method 方法name 表单名称target 目标方法说明handleEvent(事件) 使事件处理程序生效reset() 重置submit() 提交二、表单处理∙表单验证是指确定用户提交的表单数据是否合法，例如填写的身份证号码是否有意义、年龄和学历是否相符等问题。
∙由于在表单正式提交到服务器之前，需要onSubmit的值为true(如果不设置事件处理函数，则该值默认为true)，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。
三、表单元素对象的属性、方法和事件∙表单可以有很多表单元素，称之为表单元素对象。
∙表单元素对象可以分为文本框(Text)、文本区(TextArea)、密码(Password)、按钮(Button)、重置按钮(Reset)、提交按钮(Submit)、单选框(Radio)、复选框(Checkbox)、列表(Select)、列表选项(Option)和隐藏(Hidden)对象等。
∙文本对象：o格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.文本对象名称.属性document.表单名称.文本对象名称.方法（参数）o属性：∙defaultValue 该对象的value属性form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性∙o方法：blur()focus()handleEvent(事件)select() 该对象设置为选取状态o事件处理程序：onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelecto例1：<FORM>姓名：<INPUT TYPE="text" NAME="name"><INPUT TYPE="button" VALUE="请单击" onClick=alert("谢谢你，"+.value)> </FORM>o例2：<Script>function getFocus(obj) {???? obj.style.color='red';???? obj.style.background='#DBDBDB';}function getBlur(obj) {???? obj.style.color='black';???? obj.style.background='white';}</Script><BODY onLoad=.focus()><FORM NAME="form1">姓名：<INPUT TYPE="text" NAME="name"onFocus=getFocus(this) onBlur=getBlur(this)><BR>电话：<INPUT TYPE="text" NAME="tel"onFocus=getFocus(this) onBlur=getBlur(this)><BR></FORM></BODY>o例3：<Script>var i = 0;function movenext(obj,i) {if(obj.value.length==4){document.forms[0].elements[i+1].focus();}}function result() {fm = document.forms[0];num = fm.elements[0].value +fm.elements[1].value +fm.elements[2].value +fm.elements[3].value ;alert("你输入的信用卡号码是"+ num);}</Script><BODY onLoad=document.forms[0].elements[i].focus()>请输入你的信用卡号码：<form><input type=text size=3 maxlength=4 onKeyup=movenext(this,0)> - <input type=text size=3 maxlength=4 onKeyup=movenext(this,1)> - <input type=text size=3 maxlength=4 onKeyup=movenext(this,2)> - <input type=text size=3 maxlength=4 onKeyup=movenext(this,3)> <input type=button value=显示 onClick=result()></form></BODY>密码对象：o格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.密码对象名称.属性document.表单名称.密码对象名称.方法（参数）o属性：defaultValue 该对象的value属性form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性o方法：blur()focus()handleEvent(事件)select() 该对象设置为选取状态o事件处理程序：onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelecto例1：Script>function checkPw() {fm = document.form1;if (fm.pw2.value != fm.pw1.value) {alert("密码不符，请重新输入");document.form1.pw2.select();}elsealert("谢谢你，"+.value);}</Script><BODY onLoad=.focus()><FORM NAME="form1">姓名：<INPUT TYPE="text" NAME="name"><BR>输入密码：<INPUT TYPE="password" NAME="pw1"><BR>重新输入：<INPUT TYPE="password" NAME="pw2"><BR><INPUT TYPE="button" VALUE="填好了" onClick=checkPw()><INPUT TYPE="reset" VALUE="重填"></FORM></BODY>o例2：<Script>function isInt(elm) {if (isNaN(elm)) {alert("你输入的是" + elm + "\n不是数字！");document.forms[0].pw.value = "";return false;}if (elm.length != 4) {alert("请输入四位数数字！");document.forms[0].pw.value = "";return false;}}</Script><form action="test.asp" onSubmit="return isInt(this.pw.value)"> 请输入四位数数字密码：<BR><input type="password" name="pw"><input type="submit" value="检查"></form>按钮对象、提交按钮对象、重置按钮对象：o格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.按钮对象名称.属性document.表单名称.按钮对象名称.方法（参数）o属性：form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性o方法：blur()click()focus()handleEvent(事件)o事件处理程序：onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove隐藏对象：o格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.隐藏对象名称.属性document.表单名称.隐藏对象名称.方法（参数）o属性：form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性单选按钮对象：o格式：document.forms[索引].elements[索引](索引).属性document.forms[索引].elements[索引](索引).方法（参数）document.表单名称.单选对象名称[索引].属性document.表单名称.单选对象名称[索引].方法（参数）o属性：checked 设置该对象为选定状态defaultChecked 对应该对象的默认选定状态form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性o方法：blur()click()focus()handleEvent(事件)o事件处理程序：onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMoveo例：<Script>function show() {var x = "先生";if (document.form1.sex[1].checked)x = "小姐";alert(.value + x);}</Script><FORM NAME=form1>姓名：<INPUT TYPE="text" NAME="name"><BR>你是：<INPUT TYPE="radio" NAME="sex" CHECKED>帅哥<INPUT TYPE="radio" NAME="sex">美女<BR><INPUT TYPE="button" VALUE="请单击" onClick=show()></FORM>复选框对象：o格式：document.forms[索引].elements[索引].属性document.forms[索引].elements[索引].方法（参数）document.表单名称.单选对象名称[索引].属性document.表单名称.单选对象名称[索引].方法（参数）o属性：∙checked 设置该对象为选定状态defaultChecked 对应该对象的默认选定状态form 该对象所在的表单name 该对象的name属性type 该对象的type属性value 该对象的value属性∙o方法：blur()click()focus()handleEvent(事件)o事件处理程序：onBlur onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMoveo例：<Script>function count() {var checkCount=0;var num = document.form1.elements.length;for (var i=0; i<num; i++) {if (document.form1.elements[i].checked)?? checkCount++;}alert ("你喜欢 "+ checkCount + "种颜色。