《网页设计与制作 第3版 第12章 网页表单的应用》由会员分享，可在线阅读，更多相关《网页设计与制作 第3版 第12章 网页表单的应用（40页珍藏版）》请在金锄头文库上搜索。
1、第12章网页表单的应用网页表单的应用第12章本书编写组网页设计与制作（微课版第3版）第12章网页表单的应用12.1网页中的表单知识12.2插入文本域12.3插入单选按钮和单选按钮组12.4插入复选框和复选框组12.5插入列表和菜单12.6插入按钮和文件域12.7验证表单内容12.8综合实训案例：用户注册表单第12章网页表单的应用学习目标 理解表单在网页中的作用；理解表单在网页中的作用； 学会在网页中建立表单；学会在网页中建立表单； 能够熟练应用各种表单元素；能够熟练应用各种表单元素； 能够应用能够应用SprySpry表单验证技术表单验证技术。设计者在设计和制作网页时，以人工的方式更新网页费时费
2、力，需要构设计者在设计和制作网页时，以人工的方式更新网页费时费力，需要构建大量的页面，且会占用服务器的很多存储空间；通过各种编程语言，建大量的页面，且会占用服务器的很多存储空间；通过各种编程语言，以数据库的方式存储数据，动态地更新网页，提高了更新页面的效率。以数据库的方式存储数据，动态地更新网页，提高了更新页面的效率。本章本章将介绍网页的表单技术，帮助用户了解动态网页的制作基础。将介绍网页的表单技术，帮助用户了解动态网页的制作基础。第12章网页表单的应用12.1网页中的表单知识12.1.1 12.1.1 表单表单概述概述当当用户在用户在WebWeb浏览器（客户端）显示的表单中输入信息，然后单击
3、具有浏览器（客户端）显示的表单中输入信息，然后单击具有提交功能的按钮时，这些信息将被发送到服务器端，服务器中的服务提交功能的按钮时，这些信息将被发送到服务器端，服务器中的服务器端脚本或应用程序会对这些信息进行处理。服务器端向客户端返回器端脚本或应用程序会对这些信息进行处理。服务器端向客户端返回所请求的信息或基于该表单内容执行某些操作，以此作为响应。表单所请求的信息或基于该表单内容执行某些操作，以此作为响应。表单处理数据的过程如处理数据的过程如图所图所示示。第12章网页表单的应用12.1网页中的表单知识12.1.2 12.1.2 创建表单创建表单域域新建新建一个网页，最好先将该网页一个网页，最好
4、先将该网页文档保存。文档保存。在在菜单栏中选择菜单栏中选择“插入插入”“表表单单”命令，或在命令，或在“插入插入”面板中面板中单击单击“表单表单”下的下的“表单表单”，为，为网页添加一个表单，如网页添加一个表单，如图所图所示。示。在在“设计设计”视图中，可以看到表视图中，可以看到表单以红色虚线框为标记。如果看单以红色虚线框为标记。如果看不到红色虚线框，可在菜单栏中不到红色虚线框，可在菜单栏中选择选择“查看查看”“可视化助理可视化助理”“不可见元素不可见元素”命令。命令。第12章网页表单的应用12.2插入文本域12.2.1 12.2.1 文本文本字段字段文本字段是单行的文本域表单对象，也就是说这
5、些文本信息不会发文本字段是单行的文本域表单对象，也就是说这些文本信息不会发生换行。文本字段通常用于填写用户名、电话号码、电子邮件、密生换行。文本字段通常用于填写用户名、电话号码、电子邮件、密码等较短的信息码等较短的信息。单击单击将光标定位在表单虚线框内，选择将光标定位在表单虚线框内，选择“插入插入”“表单表单”命命令，在弹出的子菜单中选择令，在弹出的子菜单中选择“文本域文本域”命令。或者在命令。或者在“插入插入”面板中单击面板中单击“表单表单”下的下的“文本字段文本字段”，打开，打开“输入标签辅助输入标签辅助功能属性功能属性”对话框，如对话框，如图所图所示。示。在在“输入标签辅助功能属性输入标
6、签辅助功能属性”对话框中，可为文本字段的表单对话框中，可为文本字段的表单对象添加标签文本，以及设置标签文本的位置。对象添加标签文本，以及设置标签文本的位置。第12章网页表单的应用12.2插入文本域12.2.1 12.2.1 文本文本字段字段第12章网页表单的应用12.2插入文本域12.2.2 12.2.2 文本区域文本区域1 1创建文本区域的创建文本区域的两种方法两种方法方法一：先为表单插方法一：先为表单插入一个文本字段的对入一个文本字段的对象，然后在象，然后在“属性属性”面板中的面板中的“类型类型”中中选中选中“多行多行”单选按单选按钮，如钮，如图所图所示。示。第12章网页表单的应用12.2
7、插入文本域12.2.2 12.2.2 文本区域文本区域1 1创建文本区域的两种方法创建文本区域的两种方法方法二：单击方法二：单击“插入插入”面板面板“表单表单”下的下的“文本区域文本区域”（不是（不是“文本字文本字段段”），在弹出的），在弹出的“输入标签辅助功能属性输入标签辅助功能属性”对话框中进行各种属性的对话框中进行各种属性的设置，也可得到图设置，也可得到图12-1012-10所示的结果。所示的结果。选择相应的文本区域，可以在选择相应的文本区域，可以在“属性属性”面板中设置其属性。与文本字段面板中设置其属性。与文本字段属性不同的是，文本区域将属性不同的是，文本区域将“最大字符数最大字符数”
8、属性改成了属性改成了“行数行数”，用来，用来设置在文本区域中显示文本的行数设置在文本区域中显示文本的行数。第12章网页表单的应用12.2插入文本域12.2.2 12.2.2 文本区域文本区域2 2文本区域的属性设置文本区域的属性设置 overflowoverflow：用来设置内容溢出（设置被设定对象是否显示滚动条）：用来设置内容溢出（设置被设定对象是否显示滚动条）。 overflow-xoverflow-x：用来设置水平方向内容溢出。：用来设置水平方向内容溢出。 overflow-yoverflow-y：用来设置垂直方向内容溢出：用来设置垂直方向内容溢出。上述上述的的3 3个属性的属性值为个属
9、性的属性值为visiblevisible（默认值）、（默认值）、scrollscroll、hiddenhidden、autoauto。第12章网页表单的应用12.2插入文本域12.2.2 12.2.2 文本区域文本区域常用文本框属性常用文本框属性如如下所示。下所示。第12章网页表单的应用12.3插入单选按钮和单选按钮组12.3.1 12.3.1 插入单个单选插入单个单选按钮按钮插入单个单选按钮的步骤如下。插入单个单选按钮的步骤如下。将将光标定位在表单框线内，在光标定位在表单框线内，在菜单栏中选择菜单栏中选择“插入插入”“表表单单”“单选按钮单选按钮”命令；或命令；或者在者在“插入插入”面板中单
10、击面板中单击“表表单单”下的下的“单选按钮单选按钮”。在弹。在弹出的图出的图12-1112-11所示的对话框中所示的对话框中进行设置。进行设置。单击单击“确定确定”按钮后，单选按按钮后，单选按钮会出现在表单框线中，如钮会出现在表单框线中，如图图所所示示。第12章网页表单的应用12.3插入单选按钮和单选按钮组12.3.1 12.3.1 插入单个单选插入单个单选按钮按钮插入单个单选按钮的步骤如下插入单个单选按钮的步骤如下。在在文档中单击文档中单击“单选按钮单选按钮”表单控件，则出现其对应表单控件，则出现其对应“属性属性”面板。面板。“属性属性”面板中的主要选项说明如下。面板中的主要选项说明如下。
11、选定值：用来设置在该单选按钮被选中时发送给服务器的值。提选定值：用来设置在该单选按钮被选中时发送给服务器的值。提交表单时，该单选按钮的值可以被发送到服务器，提供给应用程序进交表单时，该单选按钮的值可以被发送到服务器，提供给应用程序进行处理。例如，在性别的行处理。例如，在性别的“选定值选定值”文本框中输入文本框中输入“男男”，这时就表，这时就表示用户在选择该单选按钮时选择的性别是示用户在选择该单选按钮时选择的性别是“男男”。 初始状态：用来设置在浏览器中加载表单时，该单选按钮是否处初始状态：用来设置在浏览器中加载表单时，该单选按钮是否处于选中状态。于选中状态。第12章网页表单的应用12.3插入单
12、选按钮和单选按钮组12.3.2 12.3.2 插入单选按钮插入单选按钮组组当在一组选择信息中只能选择一个选项时，可使用当在一组选择信息中只能选择一个选项时，可使用“单选按钮组单选按钮组”。一。一组中的所有单选按钮都必须有同样的名称，但域值不同。组中的所有单选按钮都必须有同样的名称，但域值不同。第12章网页表单的应用12.4插入复选框和复选框组复选框又称为选择框，它和单选按钮不同的是，单选按钮只能在一组选复选框又称为选择框，它和单选按钮不同的是，单选按钮只能在一组选项中选择其中的一个选项，而复选框可以在一组选项中选择多个选项，项中选择其中的一个选项，而复选框可以在一组选项中选择多个选项，而且每个
13、复选框之间都是相互独立的，因此每一个复选框都必须要有一而且每个复选框之间都是相互独立的，因此每一个复选框都必须要有一个唯一的名称。个唯一的名称。复选框的状态：如果单击复选框，那么会出现一个复选框的状态：如果单击复选框，那么会出现一个“”，这就表示用，这就表示用户选择了这个复选框；如果再单击一下复选框，此时户选择了这个复选框；如果再单击一下复选框，此时“”就会消失，就会消失，这就代表用户取消选中该复选框这就代表用户取消选中该复选框。第12章网页表单的应用12.4插入复选框和复选框组12.4.1 12.4.1 插入单个插入单个复选框复选框将将光标定位在表单框线内，在菜单栏中选择光标定位在表单框线内
14、，在菜单栏中选择“插入插入”“表单表单” “复选框复选框”命令；或者在命令；或者在“插入插入”面板中单击面板中单击“表单表单”下的下的“复选复选框框”，出现，出现“输入标签辅助功能属性输入标签辅助功能属性”对话框，在其中对话框，在其中“标签标签”文文本框内输入本框内输入“复选框复选框”。在在“输入标签辅助功能属性输入标签辅助功能属性”对话框中单击对话框中单击“确定确定”按钮后，按钮后，出现出现下图所下图所示的效果。示的效果。第12章网页表单的应用12.4插入复选框和复选框组12.4.2 12.4.2 插入复选框插入复选框组组将将光标定位在表单框线内，在菜单栏中选择光标定位在表单框线内，在菜单栏
15、中选择“插入插入”“表单表单”命命令，在子菜单中选择令，在子菜单中选择“复选框组复选框组”命令；或者在命令；或者在“插入插入”面板中单面板中单击击“表单表单”下的下的“复选框组复选框组”，弹，弹出左图所出左图所示的示的“复选框组复选框组”对话对话框，在对话框中进行设置框，在对话框中进行设置。单击单击“复选框组复选框组”对话框中的对话框中的“确定确定”按钮，按钮，得到右图所得到右图所示的效果。示的效果。第12章网页表单的应用12.5插入列表和菜单12.5.1 12.5.1 菜单表菜单表单单将将光标放在表单框线内，在菜单栏中选择光标放在表单框线内，在菜单栏中选择“插入插入”“表单表单”“选择（列表
16、选择（列表/ /菜单）菜单）”命令；或者在命令；或者在“插入插入”面板中单击面板中单击“表单表单”下下的的“选择（列表选择（列表/ /菜单）菜单）”，出现，出现“输入标签辅助功能属性输入标签辅助功能属性”对话框，对话框，在其中在其中“标签标签”文本框中输入文本框中输入“请选择您的年收入请选择您的年收入”。单击单击“输入标签辅助功能属性输入标签辅助功能属性”对话框中的对话框中的“确定确定”按钮，按钮，得到下得到下图所图所示的效果示的效果。第12章网页表单的应用12.5插入列表和菜单12.5.2 12.5.2 列表表列表表单单列表表单的功能与菜单表单类似，其区别主要在于，列表表单可以设置列表表单的功能与菜单表单类似，其区别主要在于，列表表单可以设置默认显示的内容数量，而无须用户单击弹出。如果列表表单的项目数量默认显示的内容数量，而无须用户单击弹出。如果列表表单的项目数量超出列表的高度，则会添加滚动条。超出列表的高度，则会添加滚动条。Dreamweaver CS6Dreamweaver CS6没有提供直接插入列表表单的功能，但可以通过简单没有提供直接插入列表表单的功能，但可以通过简单的操作将
