网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第11章 网页表单的应用.pptVIP

第11章 网页表单的应用 11.1 网页中的表单知识 11.2 插入文本域 11.3插入单选按钮和单选按钮组 11.4 插入复选框和复选框组 11.5 插入列表和菜单 11.6 插入按钮和文件域 11.7 验证表单内容 11.8 上机练习 小结 11.1 网页中的表单知识 大家平时注册时所看到的页面中注册项就我们所说的“表单”。如图11-1所示。 图11-1 注册126邮箱表单 11.1.1 网页中表单概述 表单是一种标签，而且是一种特殊的网页容器标签。 表单支持客户端/服务器关系中的客户端。 表单可以多种类型的技术来实现。 表单也包含了文本域、列表域以及按钮等多个表单对象。 11.1.2 创建表单域 表单是各种网页表单对象的容器，主要包括文本域、密码域、隐藏域、单选按钮、复选框、弹出菜单、按钮等表单对象。 用Dreamweaver CS5可以为网页插入表单，方法如下。 11.2 插入文本域 文本域是最基本的表单对象，在文本域中，网页程序可以获得用户输入的各种文本信息，同时将将这些信息传送给服务器。文本域可分为文本字段和文本区域。 11.2.1 文本字段 文本字段是单行的文本域表单对象，也就是说这些文本信息不会发生换行。 插入文本字段的具体操作如下。 11.2.2 创建文本区域 11.3插入单选按钮和单选按钮组 11.3.2 插入单选按钮组 11.4 插入复选框和复选框组 复选框又称选择框，它和单选按钮不同，单选按钮只能在多数的选项中选择其中的一项，但是复选框却可以在一组选项中选择多个选项，而且每个复选框之间都是相互独立的，因此每一个复选框都必须要有一个唯一的名称。 复选框的状态：如果打开复选框，那么复选框中就会出现一个“√”，这就表示用户选择了这个复选框；如果在单击一下复选框，此时那个对号就会消失，这就代表关闭了复选框，此时复选框中就没有任何标志了。 11.4.1.插入单个复选框 11.4.2 插入复选框组 11.5 插入列表和菜单 列表/菜单，用来在一个滚动列表中显示选项值，用户此时就可以从该滚动列表中选择多个选项。“列表”选项通常在一个菜单中显示选项值，而且用户只能从中选择单个选项。但是可以在以下情况下使用菜单：在页面只有有限的空间但是还必须要显示多个内容项时，或者想要控制返回给服务器的值时都可以使用菜单。其实菜单和文本域不相同，在文本域中用户可以随心所欲输入自己的任何信息，甚至可以输入无效的数据。但是对于菜单而言，用户就只能具体设置某个菜单返回的确切值。 11.5.1 菜单表单 11.5.2 列表表单 列表表单的功能与菜单表单类似，其区别主要在于，列表表单可以设置默认显示的内容数量，而无需用户单击弹出。如果列表菜单的项目数量超出列表的高度，则可以滚动条进行调节。 11.5.3 跳转菜单 跳转菜单是网页文档内的弹出菜单，跳转菜单对站点浏览者都可见，并且可以列出链接到文档或者文件的选项。跳转菜单不仅可以创建到整个Web站点内文档的链接到其它Web站点上文档的链接、电子邮件链接、图形的链接，而且也可以创建到可在浏览器中打开的任何文件类型的链接。 通常跳转菜单包含的三个基本部分如下所示： （可选）菜单选择提示：例如菜单项的类别说明，或者说是一些提示信息等。 （必需）所链接菜单项的列表：表示用户选择某个选项，那么链接到的文档或者文件就会被打开。 （可选）“前往”按钮。 11.6 插入按钮和文件域 11.6.1 按钮表单 通常按钮是网页中最常见的表单对象，一般用按钮来控制表单动作，而且表单按钮可以将输入表单的数据提交到服务器，或者选择重新输入该表单中的数据。 11.6.2 插入文件域 文件域是一种特殊的表单。如果需要将整个文件传送到服务器上，那么可以在表单中建立文件域来完成这个任务。若要使用文件域，表单的方式必须设置为POST。访问者可以将文件上载到你在表单的action属性中所指定的URL地址。 在文本域，用户可以调用本地操作系统的“选择要加载的文件”对话框，选择本地的文件，并将该文件的URL路径添加到表单中。这样，在提交表单时，就可以将该URL路径传输给服务器，并将相应的文件也一起上传。 11.7 验证表单内容 在Dreamweaver CS5中将表单插入网页后，还可以对表单作进一步的处理，检测表单中的内容，并根据这些内容反馈信息，帮助用户正确地完成表单。如果作到这些，就要用到Spry表单验证技术。 11.7.1 Spry表单验证技术 以前在动态网页中，一般是通过ASP、ASP.NET、PH