Dreamweaver网页设计 表单
Dreamweaver 网页设计 表单
【学习概述】 表单的作用是非常重要的。比如获得 Web站点用户的信息，访问者可以在表单 对象中输入信息，然后提交这些信息。其 他的如在站点内加入搜索引擎等也必须利 用表单技术。本章重点内容是：文本域、 复选框、单选按钮、列表/菜单的使用。难 点内容是：制作发送电子邮件表单、制作 跳转菜单和在网页中加入搜索引擎等较为 高级的内容
【学习概述】 表单的作用是非常重要的。比如获得 Web站点用户的信息，访问者可以在表单 对象中输入信息，然后提交这些信息。其 他的如在站点内加入搜索引擎等也必须利 用表单技术。本章重点内容是：文本域、 复选框、单选按钮、列表/菜单的使用。难 点内容是：制作发送电子邮件表单、制作 跳转菜单和在网页中加入搜索引擎等较为 高级的内容
12.1 【课堂讲解】表单概述 12.1.1什么是表单 表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以 实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Wb浏览 器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送 到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将 处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cg、 asp/asp.net、jsp、PHP等。 处理表单分为3个步骤进行： (1)执行【客户端填写表单内容并提交表单】->【服务器端调用脚本处理表 单内容】->【服务器端将处理结果返回给客户端】命令，如图12-1所示。 图12-1处理表单流程图
12.1 【课堂讲解】表单概述 12.1.1 什么是表单 表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以 实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览 器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送 到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将 处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括cgi、 asp/asp.net、jsp、PHP等。 处理表单分为3个步骤进行： （1）执行【客户端填写表单内容并提交表单】->【服务器端调用脚本处理表 单内容】->【服务器端将处理结果返回给客户端】命令，如图12-1所示。 图12-1处理表单流程图
12.1.2表单对象 Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复 选框、单选按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、 标签、字段集等。可以通过执行【插入】->【表单】命令来插入表单对象（如 图122所示)，也可以单击“插入”栏的“表单”类别中的表单对象按钮（如 图12-3所示)。 表单) 列康/桌单 程 图12-2表单子菜单 ,插入常用布局表单、文本L应用程序1ah元漆收裤夹坛 国口西目☑回国固团回回口凸 图123表单工具栏
12.1.2 表单对象 Dreamweaver提供的表单对象包括表单、文本字段、隐藏域、文本区域、复 选框、单选按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、 标签、字段集等。可以通过执行【插入】->【表单】命令来插入表单对象（如 图12-2所示），也可以单击“插入”栏的“表单”类别中的表单对象按钮（如 图12-3所示）。 图12-2 表单子菜单 图12-3 表单工具栏
12.2.1创建表单 (1)新建一个网页，将光标定位在希望表单出现的位置上。 (2)执行【插入】>【表单】>【表单】命令，或选择“插入”栏上的“表 单”类别，然后单击“表单”按钮。 (3)这时文档中将插入一个空的表单，如图125所示。在“设计”视图中， 红色的虚轮廓线表示表单。 注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化 助理】->【不可见元素】选项。 图12-5红色的虚轮廓线表示表单 (4)选定上面的表单，显示表单属性面板，如图126所示。 表单名称 fornl 肛配类型 图126表单属性面板
12.2.1 创建表单 （1）新建一个网页，将光标定位在希望表单出现的位置上。 （2）执行【插入】->【表单】->【表单】命令，或选择“插入”栏上的“表 单”类别，然后单击“表单”按钮。 （3）这时文档中将插入一个空的表单，如图12-5所示。在“设计”视图中， 红色的虚轮廓线表示表单。 注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化 助理】->【不可见元素】选项。 图12-5红色的虚轮廓线表示表单 （4）选定上面的表单，显示表单属性面板，如图12-6所示。 图12-6表单属性面板
表单属性： ·表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如 JavaScript或VBScript)引用或控制该表单。 动作：指定处理该表单的动态网页或脚本的路径（如asp/asp.net、php、jsp 等)。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选 择一个动态网页或脚本。 ·方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌 入表单数据：GET方法是将值附加到请求该页面的URL中：默认方法是使用 浏览器的默认设置将表单数据发送到服务器， MIME类型：指定对提交给服务器进行处理的数据使用MME编码类型，默认 设置为“application/x-w-form-urlencode”通常与POST方法协调使用。如 果要创建文件上传域，需指定“multipart/form-data MIME”类型。 ·目标：设置提交表单后的目标浏览器。 12.2.2插入文本字段 文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码 域的方式显示。 插入文本字段步骤如下： (1)定位光标在表单中，在表单中插入表格，并填充内容，如图127所示
表单属性： •表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如 JavaScript 或VBScript）引用或控制该表单。 •动作：指定处理该表单的动态网页或脚本的路径（如asp/asp.net、php、jsp 等）。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选 择一个动态网页或脚本。 •方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌 入表单数据；GET方法是将值附加到请求该页面的URL中；默认方法是使用 浏览器的默认设置将表单数据发送到服务器。 •MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型，默认 设置为 “application/x-www-form-urlencode”通常与POST方法协调使用。如 果要创建文件上传域，需指定“multipart/form-data MIME”类型。 •目标：设置提交表单后的目标浏览器。 12.2.2 插入文本字段 文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码 域的方式显示。 插入文本字段步骤如下： （1）定位光标在表单中，在表单中插入表格，并填充内容，如图12-7所示
用卢注宝册 图12-7在表单中插入表格 (2)将光标定位在“用户名”右边的单元格中，执行【插入】>【表单】> 【文本域】命令，或选择“插入”栏上的“表单”类别，然后单击“文本字 段”图标，显示“输入标签辅助功能属性”对话框，如图12-8所示。 给入标答铺助功能框性 标答名字 确定 ⊙无标签标记 位⊙在表单项 器甄下生维入此信息，通聪维 单击醛墙更改选项 图12-8“输入标签辅助功能属性”对话框
图12-7 在表单中插入表格 （2）将光标定位在“用户名”右边的单元格中，执行【插入】->【表单】-> 【文本域】命令，或选择“插入”栏上的“表单”类别，然后单击“文本字 段”图标，显示“输入标签辅助功能属性”对话框，如图12-8所示。 图12- 8 “输入标签辅助功能属性”对话框
(3)若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框， 单击对话框下面的链接文字“请更改‘辅助功能’首选参数”，显示“首 选参数”对话框，如图12-9所示，取消“表单对象选项”。 口n口 图12-9取消“表单对象选项” (4)单击“确定”按钮，保持“输入标签辅助功能属性” 对话框中的值不变，单击“确定”按钮，文本字段被插入 文档中，如图12-10所示 图12-10文本字段被插入文档中
（3）若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框， 单击对话框下面的链接文字“请更改‘辅助功能’首选参数”，显示“首 选参数”对话框，如图12-9所示，取消“表单对象选项”。 图12-9 取消“表单对象选项” （4）单击“确定”按钮，保持“输入标签辅助功能属性” 对话框中的值不变，单击“确定”按钮，文本字段被插入 文档中，如图12-10所示。 图12-10文本字段被插入文档中
(5)选择该文本域，显示文本域属性面板，如图12-11所示。 文本城 字将宽度☐类型⊙单行多行密码 :多字特初始值 丝行 图12-11文本域属性面板 文本域属性： 文本域：指定该文本域惟一的名称。 ·字符宽度：设置文本域中最多可显示的字符数。 最多字符数：设置单行文本域中最多可输入的字符数 换行：选中了“多行”选项，指定当用户输入的信息较多时如何换行显示。 ,类型：指定文本域为单行、多行还是密码域。 ·初始值：指定在载入表单时文本域中要显示的内容。 (6)为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右 边的单元格中，然后执行【插入】>【表单】>【文本字段】命令，插入一个文本字 段。选中该文本字段，在属性面板中将“类型”由“单行”改为“密码”，则创建一 个密码域。 (7)为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右 边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字 段。选中该文本字段，在属性面板中将“类型”由“单行”改为“多行”，则创建 个多行文本域。此时文档中页面效果如图12-2所示
（5）选择该文本域，显示文本域属性面板，如图12-11所示。 图12-11 文本域属性面板 文本域属性： •文本域：指定该文本域惟一的名称。 •字符宽度：设置文本域中最多可显示的字符数。 •最多字符数：设置单行文本域中最多可输入的字符数。 •换行：选中了“多行”选项，指定当用户输入的信息较多时如何换行显示。 •类型：指定文本域为单行、多行还是密码域。 •初始值：指定在载入表单时文本域中要显示的内容。 （6）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右 边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字 段。选中该文本字段，在属性面板中将“类型”由“单行”改为“密码”，则创建一 个密码域。 （7）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右 边的单元格中，然后执行【插入】->【表单】->【文本字段】命令，插入一个文本字 段。选中该文本字段，在属性面板中将“类型”由“单行”改为“多行”，则创建一 个多行文本域。此时文档中页面效果如图12-12所示
用注册 个人简介： 图12-12插入多行文本字段文档中页面效果 (8)保存，按快捷键F12预览，在文本字段中输入文字，效果如图12 13所示。 用户注册 用户名 yourname 宠码 一个好人。1 人简介： 图1213预览并在文本字段中输入文宁 注意：要插入多行文本字段也可以直接执行【插入】>【表单】>【文本区 域】命令，效果和插入多行文本字段一样
图12-12 插入多行文本字段文档中页面效果 （8）保存，按快捷键F12预览，在文本字段中输入文字，效果如图12- 13所示。 图12-13 预览并在文本字段中输入文字 注意：要插入多行文本字段也可以直接执行【插入】->【表单】->【文本区 域】命令，效果和插入多行文本字段一样