《网页设计与制作》第11章 网页表单的应用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 复选框的状态：如果打开复选框，那么复选框中 就会出现一个“√”，这就表示用户选择了这个复 选框；如果在单击一下复选框，此时那个对号就 会消失，这就代表关闭了复选框，此时复选框中 就没有任何标志了。
2020/10/23
22
11.4.1.插入单个复选框
（1）点击鼠标，将光标定位在表单框线内，点击“插入”→“表单”→“复 选框”命令。
11
（2）在“输入标签辅助功能属性”对话框中，可
为文本字段的表单对象添加标签文本，同时可设
置标签文本的位置。
（3）在“输入标签辅助功能属性”对话框中，各
项的解释及应用方法如下：
ID：用于提供脚本的引用。指定了<input>元素的
名称和ID号。名称和ID号是一致的。
标签：文本字段的提示文本。即表单控件的提示
信息。
样式：说明“标签”内容的使用方式。分为三种
情况：
第一情况：使用“for”属性附加标签标记。
第二情况：选择“用标签标记环绕”选项。
2第020三/10/2情3 况：选择“无标签标记”选项。
12
位置：说明“标签”内容所处的位置。分为两种情况：
第一种情况：选择“在表单项前”选项。上面的提示信息都是在表单项前。如图 11-6所示。
（1）点击鼠标，将光标定位在表单框线内，点击“插入”菜单，选择“表单” 项，在弹出的子菜单中选择“复选框组”命令。
（2）单击“复选框组”对话框中的“确定”，得到如图11-18所示的结果。
图11-18 复选框组创建效果
2020/10/23
24
11.5 插入列表和菜单
• 列表/菜单，用来在一个滚动列表中显示选项值， 用户此时就可以从该滚动列表中选择多个选项。 “列表”选项通常在一个菜单中显示选项值，而 且用户只能从中选择单个选项。但是可以在以下 情况下使用菜单：在页面只有有限的空间但是还 必须要显示多个内容项时，或者想要控制返回给 服务器的值时都可以使用菜单。其实菜单和文本 域不相同，在文本域中用户可以随心所欲输入自 己的任何信息，甚至可以输入无效的数据。但是 对于菜单而言，用户就只能具体设置某个菜单返 回的确切值。
第11章 网页表单的应用
• 11.1 网页中的表单知识
• 11.2 插入文本域
• 11.3插入单选按钮和单选按钮组
• 11.4 插入复选框和复选框组
• 11.5 插入列表和菜单
• 11.6 插入按钮和文件域
• 11.7 验证表单内容
• 11.8 上机练习
• 小结
2020/10/23
1
11.1 网页中的表单知识
初始状态：用来表示在浏览器中加载表单时，该单 选按钮是否处于选中状态。
如果插入的单选按钮比较多，那么这时也可以用菜 单命令“插入→表单→单选按钮组”，此时就可以 在弹出的“单选按钮组”对话框中对单选按钮进行 设置。
2020/10/23
19
11.3.2 插入单选按钮组
1. 点击鼠标，将光标定位在表单框线内，点击“插 入”→“表单”→“单选按钮组”命令。 或者在“插入”面板中选择“表单”项，点击“单选按钮组” 图标，如下图11-13所示。
• 文本域是最基本的表单对象，在文本域中， 网页程序可以获得用户输入的各种文本信 息，同时将将这些信息传送给服务器。文 本域可分为文本字段和文本区域。
2020/10/23
9
11.2.1 文本字段
• 文本字段是单行的文本域表单对象，也就 是说这些文本信息不会发生换行。
• 插入文本字段的具体操作如下。
置滚动条的颜色）
scrollbar-arrow-color用来设置上下按钮上三角箭头的颜色
scrollbar-base-color用来设置滚动条的基本颜色
scrollbar-dark-shadow-color用来设置立体滚动条强阴影的
颜色
scrollbar-face-color用来设置立体滚动条凸出部分的颜色
2020/10/23
15
2.网页中设置文本区域属性：
Overflow用来设置内容溢出（设置被设定对象是否显示滚动
条）
overflow-x用来设置水平方向内容溢出
overflow-y用来设置垂直方向内容溢出
上述的三个属性设置的值分别为visible(默认值)、scroll、
hidden、auto。
scrollbar-3d-light-color用来设置立体滚动条亮边的颜色（设
2020/10/23
7
（8）类：定义表单及其中各种表单对象的样 式。
如果用户设置表单的方式为“默认”或 “get”，则该编码类型的设置是无效的。如 果设置表单的方法是“post”，则可以通过编 码类型确定数据是上传到服务器数据库中， 还是同时存储到服务器的磁盘中。
2020/10/23
8
11.2 插入文本域
（2）在“输入标签辅助功能属性”对话框单击“确定”后，出现如图11-15所 示。
图11-15 复选框创建效果
（3）“属性”面板中相关属性设置 选定值：它是用来设置在该复选框被选中时发送给服务器的值。 初始状态：用来确定在浏览器中加载表单时，这个复选框是否处于选中状态。
2020/10/23
23
11.4.2 插入复选框组
2020/10/23
25
11.5.1 菜单表单
（1）点击鼠标，将光标放在表单框线内，点击“插 入”→“表单”→“选择（列表/菜单）”命令。
（2）单击“输入标签辅助功能属性”对话框中的“确 定”按钮。
（3）在文档中点击“选择（列表/菜单）”表单控件。
（4）“选择”项：输入名称。
（5）“类型”项：选择菜单。
2020/图10/1213-11 单选按钮设置
图11-12 单选按钮创建效果
18
（3）在文档中点击“单选按钮”表单控件，如图 11-12中已经选中，则出现其对应“属性”面板。 “属性”面板中主要属性说明如下所示：
选定值：用来设置在在该单选按钮被选中时发送给 服务器的值。例如，在性别的“选定值”文本框中 选择男，这时就表示用户选择的性别是男。
2020/10/23
17
11.3插入单选按钮和单选按钮组
（1）点击鼠标，将光标定位在表单框线内，点击菜单“插 入”→“表单”→“单选按钮”命令。或者在“插入”面板 中选择“表单”项，点击“单选按钮”图标。在弹出的对话 框如图11-11所示中，进行设置。 （2）单击“确定”按钮后，单选按钮出现在文档中。如图 11-12所示。
大家平时注册时所看到的页面中注册项就我们所说的 “表单”。如图11-1所示。
2020/10/23
图11-1 注册126邮箱表单
2
11.1.1 网页中表单概述
• 表单是一种标签，而且是一种特殊的网页 容器标签。
• 表单支持客户端/服务器关系中的客户端。 • 表单可以多种类型的技术来实现。 • 表单也包含了文本域、列表域以及按钮等
2020/10/23
27
11.5.3 跳转菜单
• 跳转菜单是网页文档内的弹出菜单，跳转 菜单对站点浏览者都可见，并且可以列出 链接到文档或者文件的选项。跳转菜单不 仅可以创建到整个Web站点内文档的链接 到其它Web站点上文档的链接、电子邮件 链接、图形的链接，而且也可以创建到可 在浏览器中打开的任何文件类型的链接。
多个表单对象。
2020/10/23
3
wenku.baidu.com
（4）在“动作”文本框中指定将要处理表单信息的 脚本或者应用程序所在的URL路径。可以直接输入， 也可以点击文本框旁边的“文件夹”图标来获得。
（5）在“目标”下拉菜单中选择返回数据的窗口的 打开方式。
值_blank：表示在一个新窗口中打开链接文档。 值_new：表示在一个新窗口中打开链接文档。 值_parent：表示在包含这个链接的父框架窗口中打 开链接文档。
（5）设置或修改单行文本域的属性： 文本域：指定了<input>元素的名称和ID号。 字符宽度：指定文本域的长度，默认值为24个字符左右。 最多字符数：允许用户输入的最大字符数目。 初始值：为默认状态下填写在单行文本框中的文字。
禁用：文本框显示为灰色，不可以提交文本内容，而且其中的文本不可修 改，值为disable。 只读：文本框显示为正常颜色，可以白提交文本内容，而且其中的文本不 可修改，值为readonly。 单行：默认项，文本表单对象。 多行：将文本字段转化为文本区域。 密码：设置文本字段中文本为密码类型（显示为星号“*”）。
2020/10/23
图11-13 单选按钮组设置
20
（2）单击“单选按钮组”对话框中的“确定”，得到如图 11-14所示的结果。
图11-14 单选按钮组创建效果
2020/10/23
21
11.4 插入复选框和复选框组
• 复选框又称选择框，它和单选按钮不同，单选按 钮只能在多数的选项中选择其中的一项，但是复 选框却可以在一组选项中选择多个选项，而且每 个复选框之间都是相互独立的，因此每一个复选 框都必须要有一个唯一的名称。
（6）“列表值”按钮：单击“列表值”按钮添加菜单
选项，出现“列表值”对话框。在“列表值”对话框
中，按添加按钮，则可添加项目标签和值。单击向上
向下按钮可以调整项目标签的顺序。
（7）添加项目结束时，单击“确定”按钮关闭“列表
值202”0/10对/23 话框。
26
11.5.2 列表表单
• 列表表单的功能与菜单表单类似，其区别 主要在于，列表表单可以设置默认显示的 内容数量，而无需用户单击弹出。如果列 表菜单的项目数量超出列表的高度，则可 以滚动条进行调节。
2020/10/23
10
（1）点击鼠标，将光标定位在表单虚线框线内，点击“插入”菜单， 选择“表单”项，在弹出的子菜单中选择“文本域”命令。或者在“插 入”面板中选择“表单”项，点击“文本字段”图标，则打开“输入标 签辅助功能属性”对话框，如图11-5所示。
图11-5 设置文本字段属性
2020/10/23
2020/10/23
28
通常跳转菜单包含的三个基本部分如下所示：
• （可选）菜单选择提示：例如菜单项的类别 说明，或者说是一些提示信息等。
• （必需）所链接菜单项的列表：表示用户选 择某个选项，那么链接到的文档或者文件就 会被打开。
• （可选）“前往”按钮。
图11-6 插入文本字段 第二种情况：选择“在表单项后”选项。如图11-7所示。
图11-7 插入文本字段
在“代码”视图中可以查看源代码：
访问键：访问该文本字段的快捷键。
Tab 键索引：在当前网页中的Tab键访问顺序。
2020/10/23
13
（4）经过上面设置后，其浏览效果，如图11-8所示。
图11-8 文本字段浏览效果
2020/10/23
14
11.2.2 创建文本区域
1.创建文本区域有两种方法： 方法一：先为表单插入一个文本字段的对象。 然后在“属性”面板中设置“类型”为“多 行”。
方法二：单击浮动面板“插入”中的“文本区 域”（不是“文本字段”）按钮，在弹出的 “输入标签辅助功能”对话框中进行各种属性 的设置。
值_self：表示在包含这个链接的框架窗口中打开链 接文档。
值_top：表示在整个浏览器窗口中打开链接文档。
2020/10/23
6
（6）在“方法”下拉菜单中选择要处理表单数据的 方式。 POST：将表单值封装在消息主体中发送。 GET：将提交的表单值追加在URL后面发送给服务器。 这也是浏览器的默认设置传递表单数据的方式。 （7）在“编码类型”下拉菜单中选择表单数据在被 发送到服务器之前应该如何加密编码。 Application/x-www-form-urlencoded：普通URL方式 处理表单内容。 Multipart/form-data：处理文件上传域时采用的编码 方式。
scrollbar-highlight-color用来设置滚动条空白部分的颜色
scrollbar-shadow-color用来设置立体滚动条阴影的颜色
2020/10/23
16
设置浏览器滚动方式： （1）设置浏览器窗口永远都不出现滚动条 无水平滚动条
<body style="overflow-x:hidden"> （2）无垂直滚动条
<body style="overflow-y:hidden"> 无滚动条
<body style="overflow-x:hidden;overflowy:hidden">或<body style="overflow:hidden"> （3）设置多行文本框的滚动条 无水平滚动条
<textarea style="overflow-x:hidden"></textarea>
2020/10/23
22
11.4.1.插入单个复选框
（1）点击鼠标，将光标定位在表单框线内，点击“插入”→“表单”→“复 选框”命令。
11
（2）在“输入标签辅助功能属性”对话框中，可
为文本字段的表单对象添加标签文本，同时可设
置标签文本的位置。
（3）在“输入标签辅助功能属性”对话框中，各
项的解释及应用方法如下：
ID：用于提供脚本的引用。指定了<input>元素的
名称和ID号。名称和ID号是一致的。
标签：文本字段的提示文本。即表单控件的提示
信息。
样式：说明“标签”内容的使用方式。分为三种
情况：
第一情况：使用“for”属性附加标签标记。
第二情况：选择“用标签标记环绕”选项。
2第020三/10/2情3 况：选择“无标签标记”选项。
12
位置：说明“标签”内容所处的位置。分为两种情况：
第一种情况：选择“在表单项前”选项。上面的提示信息都是在表单项前。如图 11-6所示。
（1）点击鼠标，将光标定位在表单框线内，点击“插入”菜单，选择“表单” 项，在弹出的子菜单中选择“复选框组”命令。
（2）单击“复选框组”对话框中的“确定”，得到如图11-18所示的结果。
图11-18 复选框组创建效果
2020/10/23
24
11.5 插入列表和菜单
• 列表/菜单，用来在一个滚动列表中显示选项值， 用户此时就可以从该滚动列表中选择多个选项。 “列表”选项通常在一个菜单中显示选项值，而 且用户只能从中选择单个选项。但是可以在以下 情况下使用菜单：在页面只有有限的空间但是还 必须要显示多个内容项时，或者想要控制返回给 服务器的值时都可以使用菜单。其实菜单和文本 域不相同，在文本域中用户可以随心所欲输入自 己的任何信息，甚至可以输入无效的数据。但是 对于菜单而言，用户就只能具体设置某个菜单返 回的确切值。
第11章 网页表单的应用
• 11.1 网页中的表单知识
• 11.2 插入文本域
• 11.3插入单选按钮和单选按钮组
• 11.4 插入复选框和复选框组
• 11.5 插入列表和菜单
• 11.6 插入按钮和文件域
• 11.7 验证表单内容
• 11.8 上机练习
• 小结
2020/10/23
1
11.1 网页中的表单知识
初始状态：用来表示在浏览器中加载表单时，该单 选按钮是否处于选中状态。
如果插入的单选按钮比较多，那么这时也可以用菜 单命令“插入→表单→单选按钮组”，此时就可以 在弹出的“单选按钮组”对话框中对单选按钮进行 设置。
2020/10/23
19
11.3.2 插入单选按钮组
1. 点击鼠标，将光标定位在表单框线内，点击“插 入”→“表单”→“单选按钮组”命令。 或者在“插入”面板中选择“表单”项，点击“单选按钮组” 图标，如下图11-13所示。
• 文本域是最基本的表单对象，在文本域中， 网页程序可以获得用户输入的各种文本信 息，同时将将这些信息传送给服务器。文 本域可分为文本字段和文本区域。
2020/10/23
9
11.2.1 文本字段
• 文本字段是单行的文本域表单对象，也就 是说这些文本信息不会发生换行。
• 插入文本字段的具体操作如下。
置滚动条的颜色）
scrollbar-arrow-color用来设置上下按钮上三角箭头的颜色
scrollbar-base-color用来设置滚动条的基本颜色
scrollbar-dark-shadow-color用来设置立体滚动条强阴影的
颜色
scrollbar-face-color用来设置立体滚动条凸出部分的颜色
2020/10/23
15
2.网页中设置文本区域属性：
Overflow用来设置内容溢出（设置被设定对象是否显示滚动
条）
overflow-x用来设置水平方向内容溢出
overflow-y用来设置垂直方向内容溢出
上述的三个属性设置的值分别为visible(默认值)、scroll、
hidden、auto。
scrollbar-3d-light-color用来设置立体滚动条亮边的颜色（设
2020/10/23
7
（8）类：定义表单及其中各种表单对象的样 式。
如果用户设置表单的方式为“默认”或 “get”，则该编码类型的设置是无效的。如 果设置表单的方法是“post”，则可以通过编 码类型确定数据是上传到服务器数据库中， 还是同时存储到服务器的磁盘中。
2020/10/23
8
11.2 插入文本域
（2）在“输入标签辅助功能属性”对话框单击“确定”后，出现如图11-15所 示。
图11-15 复选框创建效果
（3）“属性”面板中相关属性设置 选定值：它是用来设置在该复选框被选中时发送给服务器的值。 初始状态：用来确定在浏览器中加载表单时，这个复选框是否处于选中状态。
2020/10/23
23
11.4.2 插入复选框组
2020/10/23
25
11.5.1 菜单表单
（1）点击鼠标，将光标放在表单框线内，点击“插 入”→“表单”→“选择（列表/菜单）”命令。
（2）单击“输入标签辅助功能属性”对话框中的“确 定”按钮。
（3）在文档中点击“选择（列表/菜单）”表单控件。
（4）“选择”项：输入名称。
（5）“类型”项：选择菜单。
2020/图10/1213-11 单选按钮设置
图11-12 单选按钮创建效果
18
（3）在文档中点击“单选按钮”表单控件，如图 11-12中已经选中，则出现其对应“属性”面板。 “属性”面板中主要属性说明如下所示：
选定值：用来设置在在该单选按钮被选中时发送给 服务器的值。例如，在性别的“选定值”文本框中 选择男，这时就表示用户选择的性别是男。
2020/10/23
17
11.3插入单选按钮和单选按钮组
（1）点击鼠标，将光标定位在表单框线内，点击菜单“插 入”→“表单”→“单选按钮”命令。或者在“插入”面板 中选择“表单”项，点击“单选按钮”图标。在弹出的对话 框如图11-11所示中，进行设置。 （2）单击“确定”按钮后，单选按钮出现在文档中。如图 11-12所示。
大家平时注册时所看到的页面中注册项就我们所说的 “表单”。如图11-1所示。
2020/10/23
图11-1 注册126邮箱表单
2
11.1.1 网页中表单概述
• 表单是一种标签，而且是一种特殊的网页 容器标签。
• 表单支持客户端/服务器关系中的客户端。 • 表单可以多种类型的技术来实现。 • 表单也包含了文本域、列表域以及按钮等
2020/10/23
27
11.5.3 跳转菜单
• 跳转菜单是网页文档内的弹出菜单，跳转 菜单对站点浏览者都可见，并且可以列出 链接到文档或者文件的选项。跳转菜单不 仅可以创建到整个Web站点内文档的链接 到其它Web站点上文档的链接、电子邮件 链接、图形的链接，而且也可以创建到可 在浏览器中打开的任何文件类型的链接。
多个表单对象。
2020/10/23
3
wenku.baidu.com
（4）在“动作”文本框中指定将要处理表单信息的 脚本或者应用程序所在的URL路径。可以直接输入， 也可以点击文本框旁边的“文件夹”图标来获得。
（5）在“目标”下拉菜单中选择返回数据的窗口的 打开方式。
值_blank：表示在一个新窗口中打开链接文档。 值_new：表示在一个新窗口中打开链接文档。 值_parent：表示在包含这个链接的父框架窗口中打 开链接文档。
（5）设置或修改单行文本域的属性： 文本域：指定了<input>元素的名称和ID号。 字符宽度：指定文本域的长度，默认值为24个字符左右。 最多字符数：允许用户输入的最大字符数目。 初始值：为默认状态下填写在单行文本框中的文字。
禁用：文本框显示为灰色，不可以提交文本内容，而且其中的文本不可修 改，值为disable。 只读：文本框显示为正常颜色，可以白提交文本内容，而且其中的文本不 可修改，值为readonly。 单行：默认项，文本表单对象。 多行：将文本字段转化为文本区域。 密码：设置文本字段中文本为密码类型（显示为星号“*”）。
2020/10/23
图11-13 单选按钮组设置
20
（2）单击“单选按钮组”对话框中的“确定”，得到如图 11-14所示的结果。
图11-14 单选按钮组创建效果
2020/10/23
21
11.4 插入复选框和复选框组
• 复选框又称选择框，它和单选按钮不同，单选按 钮只能在多数的选项中选择其中的一项，但是复 选框却可以在一组选项中选择多个选项，而且每 个复选框之间都是相互独立的，因此每一个复选 框都必须要有一个唯一的名称。
（6）“列表值”按钮：单击“列表值”按钮添加菜单
选项，出现“列表值”对话框。在“列表值”对话框
中，按添加按钮，则可添加项目标签和值。单击向上
向下按钮可以调整项目标签的顺序。
（7）添加项目结束时，单击“确定”按钮关闭“列表
值202”0/10对/23 话框。
26
11.5.2 列表表单
• 列表表单的功能与菜单表单类似，其区别 主要在于，列表表单可以设置默认显示的 内容数量，而无需用户单击弹出。如果列 表菜单的项目数量超出列表的高度，则可 以滚动条进行调节。
2020/10/23
10
（1）点击鼠标，将光标定位在表单虚线框线内，点击“插入”菜单， 选择“表单”项，在弹出的子菜单中选择“文本域”命令。或者在“插 入”面板中选择“表单”项，点击“文本字段”图标，则打开“输入标 签辅助功能属性”对话框，如图11-5所示。
图11-5 设置文本字段属性
2020/10/23
2020/10/23
28
通常跳转菜单包含的三个基本部分如下所示：
• （可选）菜单选择提示：例如菜单项的类别 说明，或者说是一些提示信息等。
• （必需）所链接菜单项的列表：表示用户选 择某个选项，那么链接到的文档或者文件就 会被打开。
• （可选）“前往”按钮。
图11-6 插入文本字段 第二种情况：选择“在表单项后”选项。如图11-7所示。
图11-7 插入文本字段
在“代码”视图中可以查看源代码：
访问键：访问该文本字段的快捷键。
Tab 键索引：在当前网页中的Tab键访问顺序。
2020/10/23
13
（4）经过上面设置后，其浏览效果，如图11-8所示。
图11-8 文本字段浏览效果
2020/10/23
14
11.2.2 创建文本区域
1.创建文本区域有两种方法： 方法一：先为表单插入一个文本字段的对象。 然后在“属性”面板中设置“类型”为“多 行”。
方法二：单击浮动面板“插入”中的“文本区 域”（不是“文本字段”）按钮，在弹出的 “输入标签辅助功能”对话框中进行各种属性 的设置。
值_self：表示在包含这个链接的框架窗口中打开链 接文档。
值_top：表示在整个浏览器窗口中打开链接文档。
2020/10/23
6
（6）在“方法”下拉菜单中选择要处理表单数据的 方式。 POST：将表单值封装在消息主体中发送。 GET：将提交的表单值追加在URL后面发送给服务器。 这也是浏览器的默认设置传递表单数据的方式。 （7）在“编码类型”下拉菜单中选择表单数据在被 发送到服务器之前应该如何加密编码。 Application/x-www-form-urlencoded：普通URL方式 处理表单内容。 Multipart/form-data：处理文件上传域时采用的编码 方式。
scrollbar-highlight-color用来设置滚动条空白部分的颜色
scrollbar-shadow-color用来设置立体滚动条阴影的颜色
2020/10/23
16
设置浏览器滚动方式： （1）设置浏览器窗口永远都不出现滚动条 无水平滚动条
<body style="overflow-x:hidden"> （2）无垂直滚动条
<body style="overflow-y:hidden"> 无滚动条
<body style="overflow-x:hidden;overflowy:hidden">或<body style="overflow:hidden"> （3）设置多行文本框的滚动条 无水平滚动条
<textarea style="overflow-x:hidden"></textarea>