网页设计与制作 雷伟军 第11章 网页表单的应用

《网页设计与制作 雷伟军 第11章 网页表单的应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章网页表单的应用11.1网页中的表单知识11.2插入文本域11.3插入单选按钮和单选按钮组11.4插入复选框和复选框组11.5插入列表和菜单11.6插入按钮和文件域11.7验证表单内容11.8上机练习小结8/31/2021111.1网页中的表单知识大家平时注册时所看到的页面中注册项就我们所说的“表单”。如图11-1所示。图11-1注册126邮箱表单8/31/2021211.1.1网页中表单概述表单是一种标签，而且是一种特殊的网页容器标签。表单支持客户端/服务器关系中的客户端。表单可以多种类型的技术来实现。表单也包含了文本域、列

2、表域以及按钮等多个表单对象。8/31/2021311.1.2创建表单域表单是各种网页表单对象的容器，主要包括文本域、密码域、隐藏域、单选按钮、复选框、弹出菜单、按钮等表单对象。8/31/20214用DreamweaverCS5可以为网页插入表单，方法如下。（1）在DreamweaverCS5打开一个网页，最好能先将此网页文档保存。（2）在选择菜单“插入”→“表单”命令，或在“插入”面板中选择“表单”按钮。为网页添加一个表单。在“设计”视图中，可以看到表单以红色虚线为标记。如果看不到红色虚线框，可选择“查看”→“可视化助理”→“不可见

3、元素”命令。（3）在“表单ID”文本框中输入一个唯一的名称来标识表单。8/31/20215（4）在“动作”文本框中指定将要处理表单信息的脚本或者应用程序所在的URL路径。可以直接输入，也可以点击文本框旁边的“文件夹”图标来获得。（5）在“目标”下拉菜单中选择返回数据的窗口的打开方式。值_blank：表示在一个新窗口中打开链接文档。值_new：表示在一个新窗口中打开链接文档。值_parent：表示在包含这个链接的父框架窗口中打开链接文档。值_self：表示在包含这个链接的框架窗口中打开链接文档。值_top：表示在整个浏览器窗口中打开链

4、接文档。8/31/20216（6）在“方法”下拉菜单中选择要处理表单数据的方式。POST：将表单值封装在消息主体中发送。GET：将提交的表单值追加在URL后面发送给服务器。这也是浏览器的默认设置传递表单数据的方式。（7）在“编码类型”下拉菜单中选择表单数据在被发送到服务器之前应该如何加密编码。Application/x-www-form-urlencoded：普通URL方式处理表单内容。Multipart/form-data：处理文件上传域时采用的编码方式。8/31/20217（8）类：定义表单及其中各种表单对象的样式。如果用户设置

5、表单的方式为“默认”或“get”，则该编码类型的设置是无效的。如果设置表单的方法是“post”，则可以通过编码类型确定数据是上传到服务器数据库中，还是同时存储到服务器的磁盘中。8/31/2021811.2插入文本域文本域是最基本的表单对象，在文本域中，网页程序可以获得用户输入的各种文本信息，同时将将这些信息传送给服务器。文本域可分为文本字段和文本区域。8/31/2021911.2.1文本字段文本字段是单行的文本域表单对象，也就是说这些文本信息不会发生换行。插入文本字段的具体操作如下。8/31/202110（1）点击鼠标，将光标定位在

6、表单虚线框线内，点击“插入”菜单，选择“表单”项，在弹出的子菜单中选择“文本域”命令。或者在“插入”面板中选择“表单”项，点击“文本字段”图标，则打开“输入标签辅助功能属性”对话框，如图11-5所示。图11-5设置文本字段属性8/31/202111（2）在“输入标签辅助功能属性”对话框中，可为文本字段的表单对象添加标签文本，同时可设置标签文本的位置。（3）在“输入标签辅助功能属性”对话框中，各项的解释及应用方法如下：ID：用于提供脚本的引用。指定了元素的名称和ID号。名称和ID号是一致的。标签：文本字段的提示文本。即表

7、单控件的提示信息。样式：说明“标签”内容的使用方式。分为三种情况：第一情况：使用“for”属性附加标签标记。第二情况：选择“用标签标记环绕”选项。第三情况：选择“无标签标记”选项。8/31/202112位置：说明“标签”内容所处的位置。分为两种情况：第一种情况：选择“在表单项前”选项。上面的提示信息都是在表单项前。如图11-6所示。图11-6插入文本字段第二种情况：选择“在表单项后”选项。如图11-7所示。图11-7插入文本字段在“代码”视图中可以查看源代码：访问键：访问该文本字段的快捷键。Tab键索引：在当前网页中的Tab键访问顺

8、序。8/31/202113（4）经过上面设置后，其浏览效果，如图11-8所示。图11-8文本字段浏览效果（5）设置或修改单行文本域的属性：文本域：指定了元素的名称和ID号。字符宽度：指定文本域的长度，默认值为24个字符左