网页制作,清华大学出版社第17章.pptVIP

图17-9【列表值】对话框 17.2.4 创建表单的提交和重置按钮 在网页中的表单必须添加【提交】按钮，才能将浏览者填写的信息上传到服务器。在Dreamweaver 8另外还设置了一个用于清除表单中填写数据的【重置】按钮。几乎所有网页中的表单都包含【提交】和【重置】按钮。在表单中创建【提交】和【重置】按钮的操作步骤如下： （1）在表单合适的位置上确定插入点，然后2次单击【表单】选项卡中的按钮 。 （2）在表单中就会生成2个按钮，如图17-10所示。 （3）选中第一个按钮，在按钮的【属性】面板中设置参数。输入【按钮名称】为“Submit”；在【标签】文本框中输入该按钮上的文字“提交”；在【动作】选项区中选择【提交表单】单选项。 （4）选中第二个按钮，在按钮的【属性】面板中设置参数。输入【按钮名称】为“Reset”；在【标签】文本框中输入该按钮上的文字“重置”；在【动作】选项区中选择【重设表单】单选项。添加按钮后的表单如图17-10所示。 图17-10 表单按钮的【属性】面板 17.2.5其它表单域的应用 1．表单的图像域 图像域是一个比较有用的表单域，它的主体是一个图片。在浏览时单击这个图片时，表单就会向服务器发送表单中各个表单域的值。图像域可以代替【提交】按钮，一个图像域有两个值，分别表示单击图像域时鼠标指针的纵坐标和横坐标。在表单中创建图像域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单击【表单】选项中的按钮。 （2）在打开的【选择图像源】对话框中，选择一个图片将其插入到表单中。 （3）选中该图像，在图像的【属性】面板中可以设置表单的图像属性，如图17-11所示，设置方法同操作普通图像类似。 表单图像域【属性】面板的基本参数的意义如下。 在【图像区域】文本框中可输入图像域的名称。 在【源文件】文本框中输入要选定图像的路径和文件名。 在【替代】文本框中可输入图像的替换文字。当浏览器不能显示图像时，输入的文字将代替图像，显示在浏览器中。 在【对齐】下拉式列表框中设置图像的对齐方式。 单击【编辑图像】按钮，可以启动外部图像编辑器Fireworks 8，编辑该图像。 图17-11 表单图像域的【属性】面板 2．表单的隐藏域 隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。 在表单中，插入隐藏表单域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单击【表单】选项中的按钮。 （2）在网页文档窗口的插入点处可以看到一个图标。 （3）双击图标，选中表单的隐藏域，在表单隐藏域的【属性】面板中可以设置表单隐藏域的属性，如图17-12所示。 图17-12表单隐藏域的【属性】面板 隐藏表单域【属性】面板的基本参数意义如下。 在【隐藏区域】文本框中，输入表单隐藏域的名称。 在【值】文本框中输入隐藏表单域的初始值。 3．表单的文件域 利用表单的文件域可以从本地计算机向服务器上传文件。表单的文件域包括一个文本框和一个浏览按钮。在浏览器中单击浏览按钮，打开选择文件的对话框，在对话框中选择相应的文件，然后单击表单中的提交按钮便可将文件发送到服务器上。 在表单中，插入文件表单域的操作步骤如下。 （1）在表单合适的位置上确定插入点，然后再单击【表单】选项中的按钮 。 （2）在网页文档窗口的插入点处可以创建一个文本框和浏览按钮，如图17-13所示。 （3）选中表单的文件域，在表单的文件域的【属性】面板中可以设置表单文件域的属性。 文件表单域【属性】面板的基本参数意义如下。 图17-13 表单的文件域 在【文件域名称】文本框中输入文件表单域的名称。 在【字符宽度】文本框中输入文件域最大字符宽度。 在【最多字符数】文本框中输入文件域最多字符数。 （4）按F12键预览Web 页面，单击【浏览】按钮，系统弹出【选择文件】对话框，浏览者可选择确定本地计算机重要上传的文件，完成文件上传的操作。 在Web 页面中若要插入表单的转跳菜单，可单击表单子面板的按钮。 17.3表单的应用实例 例17.1创建一个如图17-14所示的信息反馈的表单，并根据输入的数据类型设置表单域的验证行为，使得当在表单中输入了无效数据后，递交表单时会显示错误提示信息。 制作分析： 本例是一个常规的表单网页，制作时应该注意所有表单元素都必须放在表单的红色虚线框内。对重要的数据区域可添加行为来验证数据的正确性。操作步骤见教材341-342页。 图 17-14 信息反馈的表单 17.4本章小结 在本章中，主要介绍了网络信息交互工具——表单，表单技术是建立动态网站的重要工具之一，利用表单技术能充分发挥网络的有利条件，使信息能够及时得到交互反馈。 本章