网页制作精品教程第8章课件.ppt

1、8.1 8.1 表单的应用表单的应用 8.1.1 8.1.1 认识表单认识表单 在在DreamweaverDreamweaver的的“插入插入”栏中有一个栏中有一个“表表单单”类别，选择该类别，可插入的表单对象类别，选择该类别，可插入的表单对象快捷按钮将显示在快捷按钮将显示在“插入插入”栏中。栏中。8.1.2 8.1.2 插入表单插入表单 表单对象只有添加到表单中才能正常运行，表单对象只有添加到表单中才能正常运行，所以在应用表单对象前需要先在页面中插入所以在应用表单对象前需要先在页面中插入表单，下面我们就来学习如何在页面中插入表单，下面我们就来学习如何在页面中插入表单。表单。单击单击“表单表单

2、”插入栏中的插入栏中的“表单表单”按钮按钮 插入插入表单表单 8.2 8.2 表单对象的应用表单对象的应用 8.2.1 8.2.1 文本字段文本字段 文本字段是最常见的表单对象之一，在文本字文本字段是最常见的表单对象之一，在文本字段中可输入任何类型的文本内容，像姓名、地段中可输入任何类型的文本内容，像姓名、地址、址、E-mailE-mail或稍长一些的个人介绍等字段。或稍长一些的个人介绍等字段。8.2.2 8.2.2 隐藏域隐藏域 隐藏域用来存储非用户输入信息。例如，当用隐藏域用来存储非用户输入信息。例如，当用户登录某些页面时需输入用户名和密码，登录户登录某些页面时需输入用户名和密码，登录成功

3、后，会在其他页面显示用户名，此时即可成功后，会在其他页面显示用户名，此时即可使用隐藏域来显示用户名。使用隐藏域来显示用户名。8.2.3 8.2.3 按钮按钮 对表单而言，按钮是不可缺少的元素，它能够对表单而言，按钮是不可缺少的元素，它能够控制表单的内容，如控制表单的内容，如“提交提交”或或“重设重设”。单。单击击“提交提交”按钮可将表单中的内容发送到服务按钮可将表单中的内容发送到服务器，单击器，单击“重设重设”按钮可清除表单中现有的内按钮可清除表单中现有的内容。容。范例范例1 1 制作留言页面制作留言页面 本例通过制作一个包含表单、文本域和按钮的本例通过制作一个包含表单、文本域和按钮的留言页面

4、，来练习和巩固一下表单对象在网页留言页面，来练习和巩固一下表单对象在网页制作中的应用（具体操作见视频制作中的应用（具体操作见视频8-18-1）。）。8.2.4 8.2.4 复选框复选框 复选框允许用户在一组选项中选择一个或多个复选框允许用户在一组选项中选择一个或多个选项，常用于制作调查类栏目。选项，常用于制作调查类栏目。“复选框复选框”的应用的应用 “复选框复选框”的属性面板的属性面板8.2.5 8.2.5 单选按钮和单选按钮组单选按钮和单选按钮组 单选按钮允许用户在多个选项中选择一个，不单选按钮允许用户在多个选项中选择一个，不能进行多项选择。能进行多项选择。有时候需要一次添加多个单选按钮，此

5、时可用有时候需要一次添加多个单选按钮，此时可用单选按钮组来代替，单选按钮组相当于多个名单选按钮组来代替，单选按钮组相当于多个名称相同的单选按钮，除创建方法不同外，它们称相同的单选按钮，除创建方法不同外，它们之间没有任何区别。之间没有任何区别。单击单击“单选按单选按钮组钮组”按钮按钮 ，弹出弹出“单选按单选按钮组钮组”对话框对话框8.2.6 8.2.6 列表和菜单列表和菜单 除复选框和单选按钮外，在遇到需要制作选项除复选框和单选按钮外，在遇到需要制作选项时，还可以使用时，还可以使用“列表列表/菜单菜单”。在拥有较多。在拥有较多选项，且网页空间又比较有限的情况下，选项，且网页空间又比较有限的情况下

6、，“列列表表/菜单菜单”将是最好的选择。将是最好的选择。“列表列表/菜菜单单”对象的对象的属性面板属性面板8.2.7 8.2.7 图像域图像域 使用图像域可以用一些漂亮的图像按钮来代使用图像域可以用一些漂亮的图像按钮来代替替DreamweaverDreamweaver自带的按钮，从而使网站更美自带的按钮，从而使网站更美观。观。单击单击“图像域图像域”按钮，弹出按钮，弹出“选择图像源选择图像源文件文件”对话框对话框选择要添加的图选择要添加的图像，然后单击像，然后单击“确定确定”按钮，添按钮，添加图像域加图像域图像域属图像域属性面板性面板8.2.8 8.2.8 文件域文件域 “文件域文件域”可以使

7、浏览者选择本地计算机上可以使浏览者选择本地计算机上的文件，并将该文件上传到服务器上。的文件，并将该文件上传到服务器上。“文文件域件域”的外观与文本域类似，只是后面多了的外观与文本域类似，只是后面多了一个一个“浏览浏览”按钮。浏览者可以单击该按钮按钮。浏览者可以单击该按钮来选择要上传的文件，或者直接在文本框中来选择要上传的文件，或者直接在文本框中输入要上传文件的路径。输入要上传文件的路径。范例范例2 2 制作制作“商品订购商品订购”页面页面 至此，前面已介绍了所有表单对象，在实际制至此，前面已介绍了所有表单对象，在实际制作网页时，这些表单对象很少单独使用，一个作网页时，这些表单对象很少单独使用，

8、一个表单中通常会包含各种类型的表单对象。本节表单中通常会包含各种类型的表单对象。本节我们来制作一个完整的表单网页实例（具体操我们来制作一个完整的表单网页实例（具体操作见视频作见视频8-28-2）。）。8.3 8.3 验证表单数据验证表单数据 使用使用DreamweaverDreamweaver中的行为可以添加用于检查中的行为可以添加用于检查指定文本域中内容的指定文本域中内容的JavaScriptJavaScript代码，以确保代码，以确保浏览者输入了符合要求的数据。浏览者输入了符合要求的数据。添加添加行为行为打开打开“检查表单检查表单”对话框，设置各项对话框，设置各项后单击后单击“确定确定”按按钮即可添加行为钮即可添加行为