表单与特殊对象

1、第第5 5章章 表单与特殊对象表单与特殊对象 5.1 5.1 创建表单创建表单 5.2 5.2 创建表单控件创建表单控件5.3 5.3 设置控件的标签设置控件的标签5.4 5.4 网页中的特殊对象网页中的特殊对象 5.1 5.1 创建表单创建表单5.1.1 5.1.1 什么是表单什么是表单 表单是用于实现网页浏览者与服务器（或者说表单是用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在网页所有者）之间信息交互的一种页面元素，在 WWW WWW 上它被广泛用于各种信息的搜集和反馈。例如，上它被广泛用于各种信息的搜集和反馈。例如，图图 5-1 5-1 显示了一个用于进行电

2、子邮件系统登录的显示了一个用于进行电子邮件系统登录的表单（图中椭圆标记的位置）。表单（图中椭圆标记的位置）。 图 5-1 表单示例 1 图图 5-2 显示了一个稍微复杂的表单，其中包显示了一个稍微复杂的表单，其中包含更多种类的表单控件：文本框、口令框、单选含更多种类的表单控件：文本框、口令框、单选按钮、下拉菜单等。按钮、下拉菜单等。图 5-2 表单示例 25.1.2 表单控件的类型表单控件的类型 5.1.3 FORM 标记符标记符 5.2 5.2 创建表单控件创建表单控件5.2.1 5.2.1 文本框与口令框文本框与口令框 以下以下 HTML HTML 代码显示了单行文本框和口令框的代码显示了

3、单行文本框和口令框的用法（也包含了表单中必须有的提交按钮），显示用法（也包含了表单中必须有的提交按钮），显示效果如图效果如图 5-3 5-3 所示。所示。图 5-3 单行文本框和口令框示例 单 行 文 本 框 和 口 令 框 示 例单 行 文 本 框 和 口 令 框 示 例表单表单单行文本框和口令框单行文本框和口令框请输入您的姓名：请输入您的姓名：请输入您的密码：请输入您的密码：5.2.2 5.2.2 复选框与单选框复选框与单选框 以下以下 HTML 代码显示了如何在表单中包含多个复代码显示了如何在表单中包含多个复选框和单选框，效果如图选框和单选框，效果如图 5-4 所示。所示。图 5-4 复

4、选框与单选框示例 复选框与单选框示例复选框与单选框示例表单表单-复选框与单选框复选框与单选框请输入您的姓名：请输入您的姓名：请选择您的性别：请选择您的性别：男男女女东方不败东方不败不告不告诉你诉你请选择您的年龄：请选择您的年龄：20岁以下岁以下203030以上以上您喜欢什么运动：您喜欢什么运动：篮球篮球足球足球排球排球其他球其他球5.2.3 5.2.3 文件选择框文件选择框 以下以下 HTML 代码显示了如何在表单中包含文件代码显示了如何在表单中包含文件选择框，效果如图选择框，效果如图 5-5 所示。所示。图 5-5 文件选择框示例文件选择框示例文件选择框示例表单表单文件选择框文件选择框请选择

5、文件：请选择文件：5.2.4 5.2.4 按钮按钮图图 5-6 按钮示例按钮示例 以下以下 HTML 代码显示了如何在表单中包含各种按钮，效果如代码显示了如何在表单中包含各种按钮，效果如图图 5-6 所示。所示。图 5-6 按钮示例按钮示例按钮示例表单表单按钮按钮 以下以下 HTML 代码显示了如何使用一个图形化的代码显示了如何使用一个图形化的提交按钮，显示效果如图提交按钮，显示效果如图 5-7 所示。所示。图 5-7 图形化提交按钮示例图形化提交按钮图形化提交按钮表单表单图形化提交按钮图形化提交按钮请输入您的姓名：请输入您的姓名：5.2.5 5.2.5 多行文本框多行文本框 以下以下 HTM

6、L 代码显示了如何在表单中使用多代码显示了如何在表单中使用多行文本框，显示效果如图行文本框，显示效果如图 5-8 所示。所示。图 5-8 多行文本框示例多行文本框示例多行文本框示例表单表单多行文本框多行文本框请输入您的姓名：请输入您的姓名：请在下框内输入您的宝贵意见：请在下框内输入您的宝贵意见：请多指教请多指教！5.2.6 5.2.6 选项菜单选项菜单 以下以下 HTML 代码显示了如何在表单中使用选项代码显示了如何在表单中使用选项菜单，效果如图菜单，效果如图 5-9 所示。所示。图 5-9 选项菜单示例选项菜单示例选项菜单示例表单表单选项菜单示例选项菜单示例请输入您的姓名：请输入您的姓名：请

7、选择您最喜欢的影视明星：请选择您最喜欢的影视明星： 周星驰周星驰 周润发周润发 刘德华刘德华 其他其他请选择您喜欢的周星驰作品（按住请选择您喜欢的周星驰作品（按住 Ctrl 或或 Shift 可可以多选）：以多选）： 鹿鼎记鹿鼎记 少林足球少林足球 大话西大话西游游 喜剧之王喜剧之王大内密探大内密探008 九品芝麻官九品芝麻官 武状元苏乞儿武状元苏乞儿 百变金刚百变金刚 其他其他5.3 5.3 设置控件的标签设置控件的标签 以下以下 HTML HTML 代码显示了如何为控件指定标代码显示了如何为控件指定标签，效果如图签，效果如图 5-10 5-10 所示。所示。图 5-10 控件标签示例 控件

8、的标签示例控件的标签示例表单表单-控件标签控件标签 请输入您的姓名：请输入您的姓名： 请输入您的密码：请输入您的密码： 请选择您要订阅的内容（可以多选）：请选择您要订阅的内容（可以多选）： 娱乐新闻娱乐新闻 影视预告影视预告 最新游戏最新游戏   5.4 5.4 网页中的特殊对象网页中的特殊对象 5.4.1 5.4.1 多媒体对象多媒体对象 OBJECT OBJECT 标记符和标记符和 PARAM PARAM 标记符标记符 Flash Flash 对象对象 插入插入 Flash Flash 对象之后，对象之后，Dreamw

9、eaver Dreamweaver 自自动生成的代码如下：动生成的代码如下： 插入插入 Flash 对象的网页效果如图对象的网页效果如图 5-11 所示。所示。图 5-11 插入 Flash 对象的网页 Shockwave 对象对象 如果说如果说 Flash 对象还常常被人称为动画的话，对象还常常被人称为动画的话，那么那么 Shockwave 对象则真正是不折不扣的多媒体对象则真正是不折不扣的多媒体对象。对象。Shockwave 对象由对象由 Director 开发，相比开发，相比 Flash 对象而言具有更为强大多媒体表现力，读对象而言具有更为强大多媒体表现力，读者可以到者可以

10、到 http:/ 上领略一下上领略一下 Shockwave 的震撼力（首先需要下载相应的的震撼力（首先需要下载相应的 Shockwave 插件），如图插件），如图 5-12 所示。所示。图 5-12 http:/ 如果要制作如果要制作 Shockwave 对象，应使用对象，应使用 Director 软件，图软件，图 5-13 显示了显示了 Director8.0 的用户的用户界面，读者如果需要了解进一步的信息，请参见界面，读者如果需要了解进一步的信息，请参见软件的联机帮助或其他相关书籍。软件的联机帮助或其他相关书籍。 图 5-13 Director8.0 界面 在在 Director 中制作好

11、了电影（与中制作好了电影（与 Flash 一样，一样，Director 作品也称为电影）之后，应该使用作品也称为电影）之后，应该使用“Publish”（发布）命令将其导出为（发布）命令将其导出为 Web 能够显能够显示的格式（示的格式（Director 编辑的源文件为编辑的源文件为 .dir 格式，格式，最后导出的最后导出的 Shockwave 格式为格式为 .dcr 格式），然后格式），然后就可以用就可以用 Dreamweaver 对象面板中的对象面板中的“Insert Shockwave”按钮按钮 将将 Shockwave 对象插入到网页对象插入到网页中了，代码如下所示：中了，代码如下所示

12、： 插入插入 Shockwave 对象的网页效果如图对象的网页效果如图 5-14 所示。所示。图 5-14 插入 Shockwave 对象的网页 5.4.2 Java 小应用程序对象小应用程序对象 APPLET APPLET 标记符标记符 自动生成自动生成 Java Java 小应用程序效果小应用程序效果 1 1使用使用 Anfy Anfy 自动生成自动生成 Java Java 小应用程序特效小应用程序特效 AnfyAnfy 是最著名的是最著名的 Java Java 特效工具之一，使用它特效工具之一，使用它可以制作出多达可以制作出多

13、达 40 40 种种 Java Java 特效。如果要使用该特效。如果要使用该软件，首先应到软件，首先应到 http:/www.anfyhttp:/（或（或 http:/anfyteamhttp:/）上下载。安装并启动）上下载。安装并启动 Anfy Anfy 之后，它的界面如图之后，它的界面如图 5-15 5-15 所示。所示。 图 5-15 Anfy 的界面 使用使用 Anfy 制作制作 Java 特效非常简单，只要特效非常简单，只要按照对话框的提示一步一步操作即可。做到最按照对话框的提示一步一步操作即可。做到最后一步，总是显示类似如图后一步，总是显示类似如图 5-16 所示的对话所示的对话

14、框，单击其中的框，单击其中的“Copy into clipboard”按钮，按钮，则可以把自动生成的则可以把自动生成的 HTML 代码复制到剪贴代码复制到剪贴板中，然后就可以将其直接插入到网页源文件板中，然后就可以将其直接插入到网页源文件中。中。图 5-16 复制 Anfy 自动生成的 HTML 代码 需要特别注意的是，如果要让需要特别注意的是，如果要让 Java 小应用小应用程序正确工作，必须将相应的程序正确工作，必须将相应的 .class 文件（也就文件（也就是是 Java 的可执行文件）复制到网页所在目录。的可执行文件）复制到网页所在目录。比较简便的方法是：单击图比较简便的方法是：单击图

15、 5-16 所示对话框中所示对话框中的的“Copy all files to”按钮，将所有相关文件都按钮，将所有相关文件都复制到网页所在目录（之后可以删除不需要的文复制到网页所在目录（之后可以删除不需要的文件）。件）。 例如，图例如，图 5-17 显示了插入显示了插入 Anfy 特效的一个特效的一个网页（其中显示的是图像的马赛克切换效果）。网页（其中显示的是图像的马赛克切换效果）。图 5-17 插入 Anfy 特效的网页2使用使用 FrontPage 自动生成自动生成 Java 小应用程序特效小应用程序特效 在所见即所得的网页编辑软件在所见即所得的网页编辑软件 FrontPage 中，中，也提供了若干种也提供了若干种 Java 小应用程序特效。选择小应用程序特效。选择“插插入入”菜单菜单“组件组件”命令，其中的命令，其中的“横幅广告管理器横幅广告管理器”和和“悬停按钮悬停按钮”都是比较常用的都是比较常用的