《中文DreamWeaverMX 网页制作教程》课件第11章.pptVIP

“关于我们”页面展示的是购物网站中与客服的联系方式以及建议、意见或需求反馈的表单，如图11-11所示。本节就以此页面为例，讲解表单的具体应用。制作“关于我们”页面的具体步骤如下：11.4实例讲解——“关于我们”页面1．新建网页，制作表格。这一步概括了包括页面设置、文本输入、表格设置等操作。需要注意的是，应为表单留下一个单独的行，且考虑到表单的位置，在此行应设置为两个列，如图11-11所示。图11-11插入表单前的“关于我们”页面2．在图11-11最后一行第二列中添加表单域，并在表单域中添加一个10行1列的表格。

(1)在第1行中输入文字后，单击“插入”面板“表单”分类中的 (文本字段)按钮插入文本域，鼠标单击选中文本域并修改名称为“yonghu”，设置“字符宽度”为15。

(2)在第2行输入文字后插入文本域，名称修改为“mima”，选中后在其“属性”面板中设置“字符宽度”为15且类型为“密码”。(3)在第3行中，单击“插入”面板“表单”分类中的

(单选按钮)按钮输入单选按钮，在出现的 后添加“批发客户”文本，选中 后，在“属性”面板的“初始状态”中选择“已勾选”，用同样方法添加“零售客户”单选按钮和选项。

(4)第4行“电子信箱：”后面的文本域有一个初始值，因此添加文本域后在其“属性”面板的“初始值”一栏应输入123@，并将文本域名称修改为“email”。(5)第5行是一个复选框按钮，单击“插入”面板“表单”分类中的 (复选框)按钮，此时将出现一个方形的复选框按钮 ，在其右边输入“回复后通过邮件通知我”文本。

(6)第6行“留言主题：”后是一个下拉菜单，单击“插入”面板“表单”分类中的 (列表/菜单)按钮，在设计视图中用鼠标单击选中此空白下拉菜单 后，在“属性”面板的“列表值”中添加留言主题选项，如图11-12所示，属性中“初始化时选定”为“建议”。(7)第7行“联系电话：”后添加的是默认的文本域，插入后修改名称为“tel”。

(8)在第8行输入左对齐文字内容。

(9)第9行是一个文本区域，在“插入”面板“表单”分类中单击 (文本区域)按钮，选中添加的文本区域后，在“属性”面板中修改文本区域名称为“content”并将“字符宽度”设置为40，“行数”设置为8。(10)在第10行中单击“插入”面板“表单”分类中的

(按钮)按钮，添加一个“提交”按钮后输入空格，用同样的方法添加按钮，并在“属性”面板中将按钮动作设置为“重置”。图11-12列表值设置3．选中表单域或任意表单对象，然后在“行为”面板中单击浮动面板上的“+”下拉菜单，选择“检查表单”，在弹出的“检查表单”对话框中作如下设置：文本“yonghu”、“mima”在表单“form1”中是“必需的”，文本“email”在表单“form1”中可接受“电子邮件地址”，文本“tel”在表单“form1”中可接受“数字”，如图11-13所示。单击“确定”按钮后结束此步骤。图11-13检查表单*第11章表单交互——“关于我们”页面制作11.1认识表单11.2创建表单11.3表单的处理11.4实例讲解——“关于我们”页面表单是沟通网站与访问者之间的桥梁，也是访问者之间互相交流的工具。表单的应用非常广泛，如我们经常上的论坛、注册登录时填写信息的页面、网上交易系统等都是使用表单制作的页面，如图11-1所示的“关于我们”页面(见本书配套电子文档中的root/guanyu.htm文件)就是一个反馈表单页面，用于收集访问者的投诉建议等反馈信息，页面的制作将在本章最后一节详细介绍。图11-1“关于我们”页面

表单一般分为两部分：前台显示程序和后台处理程序。

前台显示程序用于显示表单的内容，如图11-1中需要访问者填写的账号、密码等信息的页面属于前台显示程序部分的内容，其主要形式有文本输入框、单选按钮、复选按钮、提交按钮和重置按钮等。11.1认识表单后台处理程序是用来处理用户提交的内容的程序，一般用CGI或者ASP来处理表单的内容。在访问者填好了在页面上显示的信息后，单击“提交”按钮，所有信息将被送往后台处理程序进行处理。

关于后台处理程序的编写方法，读者可参照相关书籍，本章只对前台显示程序中添加与处理表单的方法进行讲解。

11.2.1插入表单域

在创建文本输入框、单选按钮、复选按钮、提交按钮和重置按钮等表单对象之前，我们必须先创建表单域。表单域是存放各种表单对象的区域，它的作用是用来采集用户输入或选择的数据。当访问者填写好表单对象信息后，