《Dreamweaver网页设计》-第12章.ppt

1、Dreamweaver网页设计,第12章表单,【学习概述】,表单的作用是非常重要的。比如获得Web站点用户的信息，访问者可以在表单对象中输入信息，然后提交这些信息。其他的如在站点内加入搜索引擎等也必须利用表单技术。本章重点内容是：文本域、复选框、单选按钮、列表/菜单的使用。难点内容是：制作发送电子邮件表单、制作跳转菜单和在网页中加入搜索引擎等较为高级的内容。,12.1【课堂讲解】表单概述,12.1.1什么是表单表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击【提交】按钮时，

2、这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、asp/、jsp、PHP等。处理表单分为3个步骤进行：（1）执行【客户端填写表单内容并提交表单】-【服务器端调用脚本处理表单内容】-【服务器端将处理结果返回给客户端】命令，如图12-1所示。,图12-1处理表单流程图,12.1.2表单对象Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、标签、字段集等。可以通过执行【插入】-【表单】命令来插入表单对象（

3、如图12-2所示），也可以单击“插入”栏的“表单”类别中的表单对象按钮（如图12-3所示）。,图12-2表单子菜单,图12-3表单工具栏,12.2.1创建表单（1）新建一个网页，将光标定位在希望表单出现的位置上。（2）执行【插入】-【表单】-【表单】命令，或选择“插入”栏上的“表单”类别，然后单击“表单”按钮。（3）这时文档中将插入一个空的表单，如图12-5所示。在“设计”视图中，红色的虚轮廓线表示表单。注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】-【可视化助理】-【不可见元素】选项。,图12-5红色的虚轮廓线表示表单,（4）选定上面的表单，显示表单属性面板，如图12-6所示。,

4、图12-6表单属性面板,表单属性：表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如JavaScript或VBScript）引用或控制该表单。动作：指定处理该表单的动态网页或脚本的路径（如asp/、php、jsp等）。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选择一个动态网页或脚本。方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌入表单数据；GET方法是将值附加到请求该页面的URL中；默认方法是使用浏览器的默认设置将表单数据发送到服务器。MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型，默认设置为“application

5、/x-www-form-urlencode”通常与POST方法协调使用。如果要创建文件上传域，需指定“multipart/form-dataMIME”类型。目标：设置提交表单后的目标浏览器。,12.2.2插入文本字段文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。插入文本字段步骤如下：（1）定位光标在表单中，在表单中插入表格，并填充内容，如图12-7所示。,图12-7在表单中插入表格,（2）将光标定位在“用户名”右边的单元格中，执行【插入】-【表单】-【文本域】命令，或选择“插入”栏上的“表单”类别，然后单击“文本字段”图标，显示“输入标签辅助功能属性”对话

6、框，如图12-8所示。,图12-8“输入标签辅助功能属性”对话框,（3）若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框，单击对话框下面的链接文字“请更改辅助功能首选参数”，显示“首选参数”对话框，如图12-9所示，取消“表单对象选项”。,图12-9取消“表单对象选项”,（4）单击“确定”按钮，保持“输入标签辅助功能属性”对话框中的值不变，单击“确定”按钮，文本字段被插入文档中，如图12-10所示。,图12-10文本字段被插入文档中,（5）选择该文本域，显示文本域属性面板，如图12-11所示。,图12-11文本域属性面板,文本域属性：文本域：指定该文本域惟一的名称。字符宽度：设置文

7、本域中最多可显示的字符数。最多字符数：设置单行文本域中最多可输入的字符数。换行：选中了“多行”选项，指定当用户输入的信息较多时如何换行显示。类型：指定文本域为单行、多行还是密码域。初始值：指定在载入表单时文本域中要显示的内容。（6）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】-【表单】-【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“密码”，则创建一个密码域。（7）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】-【表单】-【文本字段】命令，插入

8、一个文本字段。选中该文本字段，在属性面板中将“类型”由“单行”改为“多行”，则创建一个多行文本域。此时文档中页面效果如图12-12所示。,图12-12插入多行文本字段文档中页面效果,（8）保存，按快捷键F12预览，在文本字段中输入文字，效果如图12-13所示。,图12-13预览并在文本字段中输入文字,注意：要插入多行文本字段也可以直接执行【插入】-【表单】-【文本区域】命令，效果和插入多行文本字段一样。,插入单选按钮使用单选按钮，只能在一组选项中选择一个选项，单选按钮通常成组出现，并且同一组中的所有单选按钮必须具有相同的名称。插入单选按钮步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元

9、格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】-【表单】-【单选按钮】命令，插入一个单选按钮。选中该单选按钮，属性面板如图12-14所示。,图12-14单选按钮属性面板,单选按钮属性：单选按钮：在文本框中，为该对象指定一个名称。选定值：设置在该单选按钮被选中时发送给服务器的值。初始状态：当在浏览器中载入表单时，该单选按钮是否被选中。（2）选中该单选按钮，在属性面板中将“初始状态”由“未选中”改为“已选中”，并在该单选按钮右边输入文字说明。（3）再插入一个单选按钮，并在该单选按钮右边输入文字说明，此时文档中页面效果如图12-15所示。,图12-15插入单选按钮,12.2.4插

10、入单选按钮组插入单选按钮可以一个一个地插入，也可以用插入单选按钮组的方法一次插入多个单选按钮。插入单选按钮组步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】-【表单】-【单选按钮组】命令，显示“单选按钮组”对话框，如图12-16所示。,图12-16“单选按钮组”对话框,（2）在“单选按钮组”对话框中各个参数如下：名称：指定该单选按钮组的名称。单选按钮：在单选按钮组列表中，显示了创建的单选按钮组中各个单选按钮的“标签”和“值”对。单击加号“+”按钮向组添加一个单选按钮，单击向上或向下箭头重新排序这些按钮。布局，使用：选择希

11、望Dreamweaver对这些按钮进行布局时使用的格式，可以使用换行符或表格来设置这些按钮的布局。在“单选按钮组”对话框中设置各选项如图12-17所示。,图12-17在“单选按钮组”对话框中设置各选项,（3）单击“确定”按钮，此时文档中页面效果如图12-18所示。,图12-18插入单选按钮组,（4）选中该行第一个单选按钮，在属性面板中将“初始状态”由“未选中”改为“已选中”。,插入复选框复选框可以让用户从一组选项中选择多个选项，每个复选框都是一个独立的元素，各自必须有一个惟一的名称。插入复选框步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格

12、中，然后执行【插入】-【表单】-【复选框】命令，这样就插入了一个复选框。（2）在该复选框右边输入文字说明。选中该复选框，设置复选框属性面板中的各项属性。,复选框属性：复选框：在文本框中为该对象指定一个名称。选定值：设置在该复选框被选中时发送给服务器的值。初始状态：确定在浏览器中载入表单时，该复选框是否被选中。（3）按照上面的方法再插入几个复选框，并输入必要的文字。此时文档中页面效果如图12-19所示。,图12-19插入复选框,12.2.6插入列表/菜单列表/菜单在一个列表中显示选项值，用户可以从该列表中选择多个选项。插入列表/菜单步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入

13、说明文字。将光标定位在该行右边的单元格中，然后执行【插入】-【表单】-【列表/菜单】命令，列表/菜单被插入文档中。（2）选中该列表/菜单，在属性面板中单击“列表值”按钮。显示“列表值”对话框，如图12-20所示。,图12-20“列表值”对话框,（3）在“列表值”对话框中，设置如图12-21所示的“项目标签-值”对,图12-21编辑“项目标签-值”对,（4）单击“确定”按钮，选中列表/菜单，属性面板如图12-22所示。,图12-22列表/菜单属性面板,列表/菜单属性：列表/菜单：为该列表/菜单指定一个惟一的名称。类型：指定为“菜单”选项，还是显示“列表”选项。高度：设置“列表”类型要显示的项数。选定范围：用户是否可以从“列表”类型列表中选择多个项。列表值：打开一个对话框，可以在该对话框中向菜单中添加菜单项。初始化选定：设置列表中默认选择的菜单项。（5）此时文档中页面效果如图12-23所示。,图12-23插入列表/菜单,（6）若在列表/菜单属性面板中选择“类型”为“列表”，如图12-24所示设置各个选项。,图12-24列表/菜单属性面板,文件域属性：文件域名称：指定该文件域对象的名称。字符宽度：指定该域最多可显示的字符数。最多字符数：指定域中最多可容纳的字符数。（3）保存，按快捷键F12预览，网页效果如图12-27