Dreamweaver网页设计制作表单页面.ppt
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
域 2. “替换”：设置替换文本。
当图像无法下载时，图像位置会插入 替换文本；当图像下载完整，鼠标移 至图像上方，替换文字会显示出来， 起到说明作用。
第2讲 插入各种表单元素
7.2.11
跳转菜单是创建链接的一种形式,
插入 但比真正的链接，跳转菜单可以节省
跳转 很大的空间。
菜单
第2讲 插入各种表单元素
7.2.11 要点：
插入 1.插入： “快捷工具栏” →“表单 跳转 ”→“跳转菜单” 菜单
第2讲 插入各种表单元素
7.2.11 2. “文本”：显示在页面上的选项内
插入 容。 跳转 3. “选择时，转到URL”：选择文本 菜单 时，跳转到的地址。
4. “菜单之后插入前往按钮”：在页 面跳转菜单后插入一个“前往”按钮 ，浏览者选择项目后，需要点击“前 往”按钮进行跳转。
符也会被传出。
第2讲 插入各种表单元素
7.2.5 复选框(checkbox)：可以提供浏览者进 插入 行多项选择的选择框。
复选
框
要点： 1. 插入：“快捷工具栏” →“表单”
→“单选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分复
选框内容。同一组复选框应使用统一
的名称。建议采用驼峰式命名方式。
第2讲 插入各种表单元素
7.2.9 按钮的作用： 插入 1. 激发提交表单的动作(表单域的动作) 按钮 2. 将表单恢复到初始状态
第2讲 插入各种表单元素
7.2.9 要点： 插入 1. 插入： “快捷工具栏” →“表单 按钮 ”→“按钮”
2. “动作”：设置单击按钮时触发的 动作。
提交表单：将动作提交到表单属性的 “动作”所指定的路径。 重置表单：清楚表单中现有的内容。
例如：txtUsername、txtPassword。
第2讲 插入各种表单元素
7.2.2 3. “字符宽度”：文本框显示在页面
插入 上的长度。长度单位为英文字符数(2
单行 个英文字符＝1个中文字符)。
文本 域
4. “最大字符数”：文本框内所能填 写的最多的字符数。长度单位为英文 字符数。
5. “初始值”：默认状态下填写在文
框 4. “初始状态”：页面载入时，单选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
Байду номын сангаас7.2.7
列表和菜单可以将多个项目以特
插入 殊的方式罗列在网页上，但又节省了
列表 网页的空间。
/ 菜单
列表：可以显示一定数量的选项，如 果超出了这个数量，会自动出现滚动 条，浏览者可以拖动滚动条来观看各
Dreamweaver 网页设计 第7章 制作表单页面
本章内容
了解表单的工作原理 制作表单 插入各种表单元素
第1讲 表单的概念
表单的作用就是收集用户的信息 用于调查、注册、定购等 在使用搜索引擎查找信息时，查找 的关键字也是通过表单提交到服务器 上
利用表单，可以帮助Internet服务 器从用户处收集信息
单选 要点：
按钮
1. 插入：“快捷工具栏”表单→“单 选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分单
选框内容。同一组单选按钮应具有相
同的名称。建议采用驼峰式命名方式
。
第2讲 插入各种表单元素
7.2.6 3. “选定值”：单选框选项的值。单 插入 选框所提交的内容为单选框的值，而 单选 不是单选框的名称。
第2讲 插入各种表单元素
7.2.2 要点：
插入 1. 插入：“快捷工具栏” →“表单”
单行 →“文本字段”
文本 域
2. 文本字段接受任何类型单字母、数 字、文本。 3. “表单名”应尽量使用英文，不应
含有空格(建议使用驼峰式的规范命名
方法)。文本域的名称是程序处理时的
依据，因此应尽量与收集内容一致。
域
第2讲 插入各种表单元素
7.2.8 要点： 插入 1. 插入： “快捷工具栏” →“表单 文件 ”→“文件域”
域 2. “文件域名称”：以英文命名，并
于文件域内容相关，建议使用驼峰式 命名方法。 3.“字符宽度”：设定文件域文本框的 宽度，单位是英文字符。 4. “最多字符数”：设定文件域文本 框中所能添加的最多字符数。
表单 位地处理用户输入的数据，但占用服
数据 务器的资源
处理 的优 缺点
客户端方式：优点是不占用服务器 资源，反馈结果快，但只能对用户输 入的数据进行有限的处理。
第2讲 插入各种表单元素
7.2.1 表单的组成： 插入 一个表单域 表单 若干个表单元素(文本框、单选按钮
、下拉菜单、多选按钮等)
第1讲 表单的概念
工作 表单的工作过程如下：
过程
访问者在浏览有表单的网页时，可 填写必须的信息，然后单击“提交”
按钮。
这些信息通过Internet传送到服务器
上。
服务器上专门的程序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
当数据完整无误后，服务器反馈一
个输入完成信息。
第1讲 表单的概念
表单
交互式表单收集用户信息，将其
的 提交到服务器，从而实现与客户的交
组成 互，一个完整的表单应该包含两个部
分：
在网页中进行描述的表单对象
应用程序，它可以是服务器端的，
也可以是客户端的，用于对客户信息
进行分析处理。
第1讲 表单的概念
浏览器处理表单的过程一般是： 1. 用户在表单中输入数据，然后提交 表单 2. 浏览器根据表单体中的设置处理用 户输入的数据
选项。
菜单：一种最节省空间的罗列选项的 方式，正常状态只能看到一个选项， 单击按钮打开才能看到全部选项。
第2讲 插入各种表单元素
7.2.7 插入 列表
/ 菜单
第2讲 插入各种表单元素
7.2.7 要点：
插入 列表
1. 插入：“快捷工具栏” →“表单” →“列表/菜单” 2. “类型”：在属性中选择使用“菜
第1讲 表单的概念
表单 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 服务器端方式：主要优点是能全方
无：单击无动作，可以通过脚本语言 赋予按钮的新功能。
第2讲 插入各种表单元素
7.2.10
使用默认的按钮形式往往让人觉
插入 得单调。网页可以使用插入图像按钮
图像 功能，创建和网页整体效果相统一的
域 图像提交按钮。
第2讲 插入各种表单元素
7.2.10 要点：
插入 1. 插入： “快捷工具栏” →“表单 图像 ”→“按钮”
/ 单”或“列表”
菜单 3. “列表值”：项目标签是页面上显
示的内容，值是项目传递时的内容。
4. “选定范围”：“列表”可以设置
该参数，勾选“允许多项”以同时选
定多个选项。浏览者按Ctrl或Shift实现
多选.
第2讲 插入各种表单元素
7.2.8 文件域：实现将文件从客户端提交到 插入 服务器(网站)，文件域的外观由一个“ 文件 文本框”和一个“浏览按钮”构成。
练习思考
简答 1. 简述表单的处理过程。
答：当用户填写了表单并单击“提交 ”按钮后，填写的信息会被发送到服 务器上，服务器端脚本或应用程序对 信息进行处理，并将成功结果反馈浏 览者，或执行某些特定的程序。
练习思考
简答 2. 制作表单页面的第一步是什么？
答：每个表单都是由一个表单域和若 干个表单元素组成的，所有的表单元 素要放到表单域中才会有效，因此， 制作表单页面的第一步是插入表单域 。
第2讲 插入各种表单元素
7.2.4 3. “换行(wrap)”：是否允许文字换
插入 行。
多行 关(off)：不允许使用换行
文本 域
虚拟(virtual)：当文本超过文本框宽度 时，自动换行，但传送数据时不会将 换行符传出。
实体(physical)：当文本超过文本框宽
度时，自动换行，当传送数据时换行
本框的文字，即页面载入时显示在文
本框中的内容。
第2讲 插入各种表单元素
7.2.3 要点：
插入 1. 插入：“快捷工具栏” →“表单”
密码 →“文本字段”→类型选择“密码”
域
2. 用于填写秘密等机密内容时使用 3. 密码框中的内容将以特殊字符显示
，默认为“*”或“●”
4. 密码框的属性与单行文本框的属性
练习思考
简答 3. 表单提交有哪两种方法？
答：两种方法是Post和Get。 Post表单信息将以文件的形式提交 Get将浏览者提供的信息附加在URL 地址的后面提交到服务器
练习思考
选择 4. 如果需要获取登录的用户输入的密
码，在表单文本字段的“属性”面板
上应选择（
）。
A
B
C
D
答：B
制作 如右 图所 示的 表单 页面
第2讲 插入各种表单元素
7.2.5 3. “选定值”：复选框选项的值。复 插入 选框所提交的内容为复选框的值，而 复选 不是复选框的名称。
框 4. “初始状态”：页面载入时，复选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
7.2.6 单选按钮：用于在多个选项中选择一
插入 个项目。
所有的表单元素要放到表单域中 才有效。
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
完全一致。
第2讲 插入各种表单元素
7.2.4 多行文本域(textarea)：可输入多行文 插入 本的文本域，相当于一个属性为多行 多行 的单行文本域。 文本
域
第2讲 插入各种表单元素
7.2.4 要点：
插入 1. 插入：“快捷工具栏” →“表单”
多行 →“文本区域”
文本 域
2. 基本属性同单行文本框相同（“命 名”、“字符宽度”、“初始值”） 3. “行数(rows)”：文本域的行数。
当图像无法下载时，图像位置会插入 替换文本；当图像下载完整，鼠标移 至图像上方，替换文字会显示出来， 起到说明作用。
第2讲 插入各种表单元素
7.2.11
跳转菜单是创建链接的一种形式,
插入 但比真正的链接，跳转菜单可以节省
跳转 很大的空间。
菜单
第2讲 插入各种表单元素
7.2.11 要点：
插入 1.插入： “快捷工具栏” →“表单 跳转 ”→“跳转菜单” 菜单
第2讲 插入各种表单元素
7.2.11 2. “文本”：显示在页面上的选项内
插入 容。 跳转 3. “选择时，转到URL”：选择文本 菜单 时，跳转到的地址。
4. “菜单之后插入前往按钮”：在页 面跳转菜单后插入一个“前往”按钮 ，浏览者选择项目后，需要点击“前 往”按钮进行跳转。
符也会被传出。
第2讲 插入各种表单元素
7.2.5 复选框(checkbox)：可以提供浏览者进 插入 行多项选择的选择框。
复选
框
要点： 1. 插入：“快捷工具栏” →“表单”
→“单选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分复
选框内容。同一组复选框应使用统一
的名称。建议采用驼峰式命名方式。
第2讲 插入各种表单元素
7.2.9 按钮的作用： 插入 1. 激发提交表单的动作(表单域的动作) 按钮 2. 将表单恢复到初始状态
第2讲 插入各种表单元素
7.2.9 要点： 插入 1. 插入： “快捷工具栏” →“表单 按钮 ”→“按钮”
2. “动作”：设置单击按钮时触发的 动作。
提交表单：将动作提交到表单属性的 “动作”所指定的路径。 重置表单：清楚表单中现有的内容。
例如：txtUsername、txtPassword。
第2讲 插入各种表单元素
7.2.2 3. “字符宽度”：文本框显示在页面
插入 上的长度。长度单位为英文字符数(2
单行 个英文字符＝1个中文字符)。
文本 域
4. “最大字符数”：文本框内所能填 写的最多的字符数。长度单位为英文 字符数。
5. “初始值”：默认状态下填写在文
框 4. “初始状态”：页面载入时，单选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
Байду номын сангаас7.2.7
列表和菜单可以将多个项目以特
插入 殊的方式罗列在网页上，但又节省了
列表 网页的空间。
/ 菜单
列表：可以显示一定数量的选项，如 果超出了这个数量，会自动出现滚动 条，浏览者可以拖动滚动条来观看各
Dreamweaver 网页设计 第7章 制作表单页面
本章内容
了解表单的工作原理 制作表单 插入各种表单元素
第1讲 表单的概念
表单的作用就是收集用户的信息 用于调查、注册、定购等 在使用搜索引擎查找信息时，查找 的关键字也是通过表单提交到服务器 上
利用表单，可以帮助Internet服务 器从用户处收集信息
单选 要点：
按钮
1. 插入：“快捷工具栏”表单→“单 选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分单
选框内容。同一组单选按钮应具有相
同的名称。建议采用驼峰式命名方式
。
第2讲 插入各种表单元素
7.2.6 3. “选定值”：单选框选项的值。单 插入 选框所提交的内容为单选框的值，而 单选 不是单选框的名称。
第2讲 插入各种表单元素
7.2.2 要点：
插入 1. 插入：“快捷工具栏” →“表单”
单行 →“文本字段”
文本 域
2. 文本字段接受任何类型单字母、数 字、文本。 3. “表单名”应尽量使用英文，不应
含有空格(建议使用驼峰式的规范命名
方法)。文本域的名称是程序处理时的
依据，因此应尽量与收集内容一致。
域
第2讲 插入各种表单元素
7.2.8 要点： 插入 1. 插入： “快捷工具栏” →“表单 文件 ”→“文件域”
域 2. “文件域名称”：以英文命名，并
于文件域内容相关，建议使用驼峰式 命名方法。 3.“字符宽度”：设定文件域文本框的 宽度，单位是英文字符。 4. “最多字符数”：设定文件域文本 框中所能添加的最多字符数。
表单 位地处理用户输入的数据，但占用服
数据 务器的资源
处理 的优 缺点
客户端方式：优点是不占用服务器 资源，反馈结果快，但只能对用户输 入的数据进行有限的处理。
第2讲 插入各种表单元素
7.2.1 表单的组成： 插入 一个表单域 表单 若干个表单元素(文本框、单选按钮
、下拉菜单、多选按钮等)
第1讲 表单的概念
工作 表单的工作过程如下：
过程
访问者在浏览有表单的网页时，可 填写必须的信息，然后单击“提交”
按钮。
这些信息通过Internet传送到服务器
上。
服务器上专门的程序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
当数据完整无误后，服务器反馈一
个输入完成信息。
第1讲 表单的概念
表单
交互式表单收集用户信息，将其
的 提交到服务器，从而实现与客户的交
组成 互，一个完整的表单应该包含两个部
分：
在网页中进行描述的表单对象
应用程序，它可以是服务器端的，
也可以是客户端的，用于对客户信息
进行分析处理。
第1讲 表单的概念
浏览器处理表单的过程一般是： 1. 用户在表单中输入数据，然后提交 表单 2. 浏览器根据表单体中的设置处理用 户输入的数据
选项。
菜单：一种最节省空间的罗列选项的 方式，正常状态只能看到一个选项， 单击按钮打开才能看到全部选项。
第2讲 插入各种表单元素
7.2.7 插入 列表
/ 菜单
第2讲 插入各种表单元素
7.2.7 要点：
插入 列表
1. 插入：“快捷工具栏” →“表单” →“列表/菜单” 2. “类型”：在属性中选择使用“菜
第1讲 表单的概念
表单 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 服务器端方式：主要优点是能全方
无：单击无动作，可以通过脚本语言 赋予按钮的新功能。
第2讲 插入各种表单元素
7.2.10
使用默认的按钮形式往往让人觉
插入 得单调。网页可以使用插入图像按钮
图像 功能，创建和网页整体效果相统一的
域 图像提交按钮。
第2讲 插入各种表单元素
7.2.10 要点：
插入 1. 插入： “快捷工具栏” →“表单 图像 ”→“按钮”
/ 单”或“列表”
菜单 3. “列表值”：项目标签是页面上显
示的内容，值是项目传递时的内容。
4. “选定范围”：“列表”可以设置
该参数，勾选“允许多项”以同时选
定多个选项。浏览者按Ctrl或Shift实现
多选.
第2讲 插入各种表单元素
7.2.8 文件域：实现将文件从客户端提交到 插入 服务器(网站)，文件域的外观由一个“ 文件 文本框”和一个“浏览按钮”构成。
练习思考
简答 1. 简述表单的处理过程。
答：当用户填写了表单并单击“提交 ”按钮后，填写的信息会被发送到服 务器上，服务器端脚本或应用程序对 信息进行处理，并将成功结果反馈浏 览者，或执行某些特定的程序。
练习思考
简答 2. 制作表单页面的第一步是什么？
答：每个表单都是由一个表单域和若 干个表单元素组成的，所有的表单元 素要放到表单域中才会有效，因此， 制作表单页面的第一步是插入表单域 。
第2讲 插入各种表单元素
7.2.4 3. “换行(wrap)”：是否允许文字换
插入 行。
多行 关(off)：不允许使用换行
文本 域
虚拟(virtual)：当文本超过文本框宽度 时，自动换行，但传送数据时不会将 换行符传出。
实体(physical)：当文本超过文本框宽
度时，自动换行，当传送数据时换行
本框的文字，即页面载入时显示在文
本框中的内容。
第2讲 插入各种表单元素
7.2.3 要点：
插入 1. 插入：“快捷工具栏” →“表单”
密码 →“文本字段”→类型选择“密码”
域
2. 用于填写秘密等机密内容时使用 3. 密码框中的内容将以特殊字符显示
，默认为“*”或“●”
4. 密码框的属性与单行文本框的属性
练习思考
简答 3. 表单提交有哪两种方法？
答：两种方法是Post和Get。 Post表单信息将以文件的形式提交 Get将浏览者提供的信息附加在URL 地址的后面提交到服务器
练习思考
选择 4. 如果需要获取登录的用户输入的密
码，在表单文本字段的“属性”面板
上应选择（
）。
A
B
C
D
答：B
制作 如右 图所 示的 表单 页面
第2讲 插入各种表单元素
7.2.5 3. “选定值”：复选框选项的值。复 插入 选框所提交的内容为复选框的值，而 复选 不是复选框的名称。
框 4. “初始状态”：页面载入时，复选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
7.2.6 单选按钮：用于在多个选项中选择一
插入 个项目。
所有的表单元素要放到表单域中 才有效。
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
完全一致。
第2讲 插入各种表单元素
7.2.4 多行文本域(textarea)：可输入多行文 插入 本的文本域，相当于一个属性为多行 多行 的单行文本域。 文本
域
第2讲 插入各种表单元素
7.2.4 要点：
插入 1. 插入：“快捷工具栏” →“表单”
多行 →“文本区域”
文本 域
2. 基本属性同单行文本框相同（“命 名”、“字符宽度”、“初始值”） 3. “行数(rows)”：文本域的行数。