《网页设计实用教程》第08章

《《网页设计实用教程》第08章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章表单操作第八章网校在线报名表单.htm学习目的：插入表单插入文本或文本域插入单选按钮和复选框插入图像域与隐藏域插入“列表/菜单域”与跳转菜单本章概述：本章将介绍一个网上在线报名表单制作的实例，通过该实例的学习，读者可以学会DreamweaverMX关于表单的基本操作，以此为驱动，进一步全面地介绍表单对象面板上的10个表单域对象的使用及其属性，通过这些知识的学习，可帮助读者在网页上轻松地设计出各种类型的表单。8.1制作一个网上报名表单表单，是一个专业网站必不可少的内容，它是一个网站是否具有交互功能的重要体现。通过表单，可以得到用户的反馈信息，如进行

2、各种网上调查、进行注册登记、收到用户订货单等。本小节介绍一个网上报名表单的实例。如图8-1所示，是读者经常在网上看到的一种表单形式，通过客户端的信息输入并通过“提交”按钮来完成，可以把用户输入的信息发送到服务器端或网页设计者指定的信箱中。本小节要完成的任务，既包括该表单的制作，也包括该表单在网上提交直到完成接收的全过程。图8-1网上报名表单的效果图8.1.1制作网上在线报名表单制作上述网上报名表单的操作步骤。动作：mailto:jszx3@hlju.edu.cn?subject=网上报名enctype="text/plain“编码类型enc=ENCod

3、e,编码图8-2图8-3图8-4图8-6图8-51、文本字段（文本域）图8-8图8-72、单选按钮3、列表/菜单域图8-10图8-11图8-94、复选框图8-13图8-125、文本区域6、按钮图8-148.1.2预览网上在线报名表单制作好网上报名表单后，现在可通过浏览器来预览效果了，具体操作步骤请参见书的介绍。图8-15图8-18图8-17图8-16密码：jszx03上一节介绍了一个网上在线报名表单制作的例子，本小节将在此基础上，对表单在网页设计中的应用进一步介绍，这样可以较系统了解表单应用的知识。在表单对象面板上，共包括10个表单域对象，如图8-19

4、所示，接下来对此逐一进行讲解。插入表单插入按钮单选按钮隐藏域文本字段复选框列表/菜单域图像域文本域单选按钮组跳转菜单域标签文件字段字段集图8-19表单对象面板8.2知识要点8.2.1插入表单插入表单是创建表单的第一步，表单对象面板中的其他对象都只有依赖它才能存在。插入表单有三种方法：通过主菜单“插入/表单”来实现。单击“表单”面板中的“插入表单”按钮来实现。拖动“表单”面板中的“插入表单”按钮到文档中的插入点来实现。表单名称动作mailto:电子邮件?subject=主题表单属性面板上的“方法”共有（默认）、（POST）、（GET）三个选项。图8-20

5、8.2.2插入文本对象表单与Dreamweaver以前的版本不同的是DreamweaverMX所提供的表单工具既可以直接插入“文本字段”，也可以插入“文本区域”。其插入的方法同样有三种：通过主菜单“插入”/“表单对象”/“文本字段（文本区域）”命令来实现。单击“表单”面板中的“插入文本字段”、“文本域”按钮等来实现。拖动“表单”面板中的相应按钮到表单中的插入点来实现。图8-21图8-22插入按钮与插入文本域一样，有三种方法，这里不再介绍，当按钮被插入后，按钮的属性面板会出现，可以通过该属性面板方便地对按钮属性进行修改，如图8-23所示。图8-23按钮属

6、性面板8.2.3插入按钮8.2.4插入复选框插入复选框也有三种方法，这里不再介绍，当复选框被插入后，复选框的属性面板会出现，可以通过该属性面板方便地对复选框属性进行修改，如图8-24所示。8.2.5插入单选按钮插入单选按钮也有三种方法，这里不再介绍，当单选按钮被插入后，单选按钮的属性面板会出现，可以通过该属性面板方便地对单选按钮属性进行修改，如图8-25所示。8.2.6插入列表/菜单域插入列表/菜单域也有三种方法，这里不再介绍，当列表/菜单域被插入后，列表/菜单域的属性面板会出现，可以通过该属性面板方便地对列表/菜单域属性进行修改，如图8-26所示。图

7、8-24复选框的属性面板图8-25单选按钮的属性面板图8-26列表/菜单域的属性面板表单其他元素练习第八章文件域图像域隐藏域跳转菜单.htm隐藏域值为2005-05-248.2.7插入文件域有时，需要获取一些来自访问者的信息，这些信息也许太复杂，无法在文本区域中处理。这时，借助于文件域，可以让用户将整个文件传送到服务器上，例如，一份个人简历文件、一个图片文件等。插入文件域也有三种方法，这里不再介绍，当文件域被插入后，文件域的属性面板会出现，可能通过该属性面板方便地对文件域属性进行修改，如图8-27所示。图8-27文件域的属性面板图8-28如果对文字形式

8、的提交按钮不太满意，可以通过使用“插入图像域”命令在表单中插入图像，从而制作一个更加吸引人的“