《网页交互设计基础与实例教程》 基础入门篇 第 6 章 表单
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
是单行文本域、多行文本域或密码域。 • ● 隐藏域：存储用户输入的信息，如姓名、电子邮件地址或购买意
向，然后在该用户下次访问此站点时使用这些数据。 • ● 文本区域：创建一个多行文本域，可以指定可输入的文本行数。 • ● 复选框：在表单中插入复选框。复选框允许在一组选项中选择多
项，用户可以选择任意多个适用的选项。 • ● 复选框组：在表单中插入多个复选框，并可以进行分别设置。
第 6 章 表单
• 6.1 表单概述 • 6.2 创建表单 • 6.3 添加文本域
返回
6.1 表单概述
• 表单是一个由文本和表单域组成的集合，它的使用完全实现了站点管 理员与访问者之间的信息交换。使用传统的电子邮件方式与站点管理 员进行信息交互时，访问者提供的信息不可能具有统一的格式，对于 站点管理员而言，这些信息是很难整理的。在网页中使用表单功能后，
地址等。 • ● 多行文本域：被用于填写较长的内容。该文本域的行数和字数都
可由浏览者自己定义。 • ● 密码域：它是一种特殊的文本域。当输入文本时，文本会被星号
或其他符号代替。 • 在网页中创建表单之后，就可以在其中添加表单对象。站点的访问者
正是通过表单对象中的数据与站点实现互动的。向表单中添加表单对 象的操作步骤如下： • （1）在表单中输入文本“访问者信息反馈”，并调整文本的大小和 位置。
单中添加表单对象后，才能发挥表单的作用。 • 创建一个表单后，文档中会出现红色的虚线框。如果看不到该虚线框，
可以选择“查看”|“可视化助理”|“不可见元素”命令。 • 将插入点置于表单的内部时，“属性”面板如图6-2所示。
返回
6.3 添加文本域
• 文本域是用来输入信息的表单对象。文本域的形式有3种： • ● 单行文本域：通常被用来填写单个字符或者简短的回答，如姓名、
菜单相同。 • ● 图像域：在表单中插入图像。图像域还可用于生成图形化按钮。 • ● 文件域：在文档中插入空白文本域和“浏览”按钮，以便让用户
浏览自己的硬盘，选择所需的文件，并将该文件上传到服务器端。 • ● 按钮：在表单中插入文本按钮。单击按钮后即执行相应的任务，
如提交或重置表单。
上一页 下一页 返回
上一页 下一页 返回
6.3 添加文本域
• ● 单选按钮：在表单中插入单选按钮。单选按钮代表互相排斥的选 择。在一组选项中选择了某项后，就会取消其他选项的选择。
• ● 单选按钮组：插入共享同一名称的单选按钮的集合。 • ● 选择（列表/菜单）：把一组选项罗列在一个列表中供选择。 • ● 跳转菜单：采用下拉列表框的方式实现链接跳转，外观上与列表/
• 6.3.4 添加单选按钮
• 在表单中使用单选按钮可以设置预定义的选项。访问者可以单击单选 按钮选择答案。单选按钮通常成组使用，提供彼此排斥的选项值。用 户在单选按钮组内只能选择一个选项。
下一页 返回
6.3 添加文本域
• （2）为了便于输入相关文本和插入表单对象，先在表单中插入一个7 行2列的表格，然后保存网页文件。
• （3）将插入点置于表格中要插入表单对象的位置。 • （4）根据需要，单击“表单”面板中适当的表单对象图标： • ● 文本字段：在网页中加入一个文本域，供输入数据。文本域可以
• 不仅可以为网页提供交互功能，而且可以按照统一的格式，收集访问 者的反馈信息（如登录注册、图书订购等信息），提高信息统计的效 率。
• 表单的工作原理很简单，站点访问者在被称为“表单域”的特定网页 元素中，根据自己的意愿输入或选择相关的信息，然后将指定的信息 提交给服务器。服务器会根据指定的表单处理程序，将这些信息保存 到特定的文件中，以便站点管理员查看。
• 6.3.2 添加多行文本域
• 如果要在表单中添加多行文本域，可以按照下述步骤进行操作： • （1）将插入点置于“留言”右侧的单元格中。 • （2）单击“表单”面板中的“文本区域”按钮，插入一个文本域。 • （3）选定刚插入的文本域，在其“属性”面板中对各个选项进行设
置，如图6-6所示。
上一页 下一页 返回
下一页 返回
6.1 表单概述
• 表单处理程序是Web服务器上的一个程序，站点访问者向服务器提交 一个表单时，它就开始执行指定的程序。因此，只有将网页中的表单 与某个表单处理程序相关联，才可以实现该表单的功能。
• 本章介绍的是简单表单的制作，关于如何编写表单处理程序，请参阅 相关资料。
上一页
返回
6.2 创建表单
• 要在网页中创建表单，用户可以选择下列方法之一： • ● 将插入点置于要插入表单的位置，然后选择“插入”|“表单”|“表
单”命令，即可看到表单被插入到当前的位置。 • ● 将插入点置于要插入表单的位置，然后在“插入”工具栏的“表
单”面板中单击“表单”按钮 ，如图6-1所示。 • 注意： • 按以上方法创建的只是一个表单框架，它不具备任何功能。只有在表
6.3 添பைடு நூலகம்文本域
• 6.3.3 添加密码域
• 如果要在表单中添加密码域，可以按照下述步骤进行操作： • （1）将插入点置于“密码”右侧的单元格中。 • （2）单击“表单”面板中的“文本字段”按钮，插入一个文本域。 • （3）选定刚插入的文本域，在其“属性”面板中对各个选项进行设
置，如图6-7所示。
6.3 添加文本域
• ● 标签：提供了一种在结构上将域的文本标签和该域关联起来的方 法。
• ● 字段集：它是表单元素逻辑组的容器标签。
• 6.3.1 添加单行文本域
• 如果要添加单行文本域，可以按照下述步骤进 • 行操作： • （1）在表格的第1个单元格中输入“姓名”，接着将插入点置于第1
行第2列的单元格中，然后单击“表单”面板中的“文本字段”按钮 ， 在弹出的“输入标签辅助功能属性”对话框中，单击“取消”按钮， 即可插入一个文本域，如图6-3所示。
上一页 下一页 返回
6.3 添加文本域
• （2）选定刚插入的文本域，在其“属性”面板中对各个选项进行设 置，如图6-4所示。
• （3）在第2～6行的第1列中输入相应的文本，在第3行第2列中输入 “年 月 日”，在“年”之前插入一个文本字段，如图6-5所示，将该 文本域命名为Year，并将其初始值设置为19。
向，然后在该用户下次访问此站点时使用这些数据。 • ● 文本区域：创建一个多行文本域，可以指定可输入的文本行数。 • ● 复选框：在表单中插入复选框。复选框允许在一组选项中选择多
项，用户可以选择任意多个适用的选项。 • ● 复选框组：在表单中插入多个复选框，并可以进行分别设置。
第 6 章 表单
• 6.1 表单概述 • 6.2 创建表单 • 6.3 添加文本域
返回
6.1 表单概述
• 表单是一个由文本和表单域组成的集合，它的使用完全实现了站点管 理员与访问者之间的信息交换。使用传统的电子邮件方式与站点管理 员进行信息交互时，访问者提供的信息不可能具有统一的格式，对于 站点管理员而言，这些信息是很难整理的。在网页中使用表单功能后，
地址等。 • ● 多行文本域：被用于填写较长的内容。该文本域的行数和字数都
可由浏览者自己定义。 • ● 密码域：它是一种特殊的文本域。当输入文本时，文本会被星号
或其他符号代替。 • 在网页中创建表单之后，就可以在其中添加表单对象。站点的访问者
正是通过表单对象中的数据与站点实现互动的。向表单中添加表单对 象的操作步骤如下： • （1）在表单中输入文本“访问者信息反馈”，并调整文本的大小和 位置。
单中添加表单对象后，才能发挥表单的作用。 • 创建一个表单后，文档中会出现红色的虚线框。如果看不到该虚线框，
可以选择“查看”|“可视化助理”|“不可见元素”命令。 • 将插入点置于表单的内部时，“属性”面板如图6-2所示。
返回
6.3 添加文本域
• 文本域是用来输入信息的表单对象。文本域的形式有3种： • ● 单行文本域：通常被用来填写单个字符或者简短的回答，如姓名、
菜单相同。 • ● 图像域：在表单中插入图像。图像域还可用于生成图形化按钮。 • ● 文件域：在文档中插入空白文本域和“浏览”按钮，以便让用户
浏览自己的硬盘，选择所需的文件，并将该文件上传到服务器端。 • ● 按钮：在表单中插入文本按钮。单击按钮后即执行相应的任务，
如提交或重置表单。
上一页 下一页 返回
上一页 下一页 返回
6.3 添加文本域
• ● 单选按钮：在表单中插入单选按钮。单选按钮代表互相排斥的选 择。在一组选项中选择了某项后，就会取消其他选项的选择。
• ● 单选按钮组：插入共享同一名称的单选按钮的集合。 • ● 选择（列表/菜单）：把一组选项罗列在一个列表中供选择。 • ● 跳转菜单：采用下拉列表框的方式实现链接跳转，外观上与列表/
• 6.3.4 添加单选按钮
• 在表单中使用单选按钮可以设置预定义的选项。访问者可以单击单选 按钮选择答案。单选按钮通常成组使用，提供彼此排斥的选项值。用 户在单选按钮组内只能选择一个选项。
下一页 返回
6.3 添加文本域
• （2）为了便于输入相关文本和插入表单对象，先在表单中插入一个7 行2列的表格，然后保存网页文件。
• （3）将插入点置于表格中要插入表单对象的位置。 • （4）根据需要，单击“表单”面板中适当的表单对象图标： • ● 文本字段：在网页中加入一个文本域，供输入数据。文本域可以
• 不仅可以为网页提供交互功能，而且可以按照统一的格式，收集访问 者的反馈信息（如登录注册、图书订购等信息），提高信息统计的效 率。
• 表单的工作原理很简单，站点访问者在被称为“表单域”的特定网页 元素中，根据自己的意愿输入或选择相关的信息，然后将指定的信息 提交给服务器。服务器会根据指定的表单处理程序，将这些信息保存 到特定的文件中，以便站点管理员查看。
• 6.3.2 添加多行文本域
• 如果要在表单中添加多行文本域，可以按照下述步骤进行操作： • （1）将插入点置于“留言”右侧的单元格中。 • （2）单击“表单”面板中的“文本区域”按钮，插入一个文本域。 • （3）选定刚插入的文本域，在其“属性”面板中对各个选项进行设
置，如图6-6所示。
上一页 下一页 返回
下一页 返回
6.1 表单概述
• 表单处理程序是Web服务器上的一个程序，站点访问者向服务器提交 一个表单时，它就开始执行指定的程序。因此，只有将网页中的表单 与某个表单处理程序相关联，才可以实现该表单的功能。
• 本章介绍的是简单表单的制作，关于如何编写表单处理程序，请参阅 相关资料。
上一页
返回
6.2 创建表单
• 要在网页中创建表单，用户可以选择下列方法之一： • ● 将插入点置于要插入表单的位置，然后选择“插入”|“表单”|“表
单”命令，即可看到表单被插入到当前的位置。 • ● 将插入点置于要插入表单的位置，然后在“插入”工具栏的“表
单”面板中单击“表单”按钮 ，如图6-1所示。 • 注意： • 按以上方法创建的只是一个表单框架，它不具备任何功能。只有在表
6.3 添பைடு நூலகம்文本域
• 6.3.3 添加密码域
• 如果要在表单中添加密码域，可以按照下述步骤进行操作： • （1）将插入点置于“密码”右侧的单元格中。 • （2）单击“表单”面板中的“文本字段”按钮，插入一个文本域。 • （3）选定刚插入的文本域，在其“属性”面板中对各个选项进行设
置，如图6-7所示。
6.3 添加文本域
• ● 标签：提供了一种在结构上将域的文本标签和该域关联起来的方 法。
• ● 字段集：它是表单元素逻辑组的容器标签。
• 6.3.1 添加单行文本域
• 如果要添加单行文本域，可以按照下述步骤进 • 行操作： • （1）在表格的第1个单元格中输入“姓名”，接着将插入点置于第1
行第2列的单元格中，然后单击“表单”面板中的“文本字段”按钮 ， 在弹出的“输入标签辅助功能属性”对话框中，单击“取消”按钮， 即可插入一个文本域，如图6-3所示。
上一页 下一页 返回
6.3 添加文本域
• （2）选定刚插入的文本域，在其“属性”面板中对各个选项进行设 置，如图6-4所示。
• （3）在第2～6行的第1列中输入相应的文本，在第3行第2列中输入 “年 月 日”，在“年”之前插入一个文本字段，如图6-5所示，将该 文本域命名为Year，并将其初始值设置为19。