第5章网页设计基础.pptVIP

第五章 表单和表单行为 主讲：杨锦伟 理论：6节 第五章 表单和表单行为 5.1 表单概述 5.2 常用表单对象 5.3 创建跳转菜单 5.1 表单概述 表单技术可以实现浏览者与服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。 目前，有非常多的网站都在应用表单技术，如网上调查、电子商务、留言板等页面都能够接收浏览者输入的信息，而表单已成为网站获取用户信息的重要手段。 一、表单作用 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单元素和一般内容组成。 二、表单工作原理 表单有两个重要组成部分： 1）、表单页面。 2）、用于处理浏览者在表单域中输入的信息的服务器端的应用程序或脚本程序，如CGI、ASP等。 浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的“提交”按钮之后，表单的内容就会上传到服务器，并且由事先编写好的CGI或ASP程序来处理这些信息，最后服务器再将处理的结果发送给浏览者的浏览器。 可见，表单的应用必须依赖服务器端脚本才能真正发挥其功能。 5.2 常用表单对象 常用表单对象（元素）有文本域、单选按钮、复选框、列表框、文件域、按钮、隐藏域、图像域等。 一、创建表单 表单是用来输入数据或与网站进行交互的工具。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单。 1 、创建步骤 1）将光标置于欲插入表单的位置 2）插入表单对象（form） 3）设置表单属性 在文档中插入了表单对象后，单击表单红色虚线框，或单击HTML状态栏中的 标记，系统就会弹出该表单对象的属性面板。 表单属性面板的属性说明： （1）、【表单名称】：此项为表单定义名称，输入一个能在脚本程序（ASP、Javascript）中引用的表单名称，一般为英文名称，系统默认给名为form1。 （2）、【动作】：在此输入一个在服务器端处理表单信息的应用程序的URL。路径可以表示为： /process.asp （3）、【方法】：指的是表单数据传输到服务器的方法 ，共有以下3项作为选择： ◇默认：使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为 GET 方法。 ◇GET：将表单内的数据附加到URL后面传送给服务器。此方式有长度限制，尽量不超过256个字符。（不要使用这种方法发送长表单，否则可能出现数据被截断而导致失败的处理结果。另外这种方法不安全。） ◇POST：用标准的数据传送方式，是在 HTTP 请求中嵌入表单数据（或者说是在网页正文中发送表单数据）。此方式没有长度限制，又非常安全。 （4）、【MIME类型】：指定对提交给服务器进行处理的数据使用 MIME 编码类型。默认设置 application/x-www-form-urlencode 通常与 POST 方法协同使用。如果要创建文件上传域，请指定 multipart/form-data MIME 类型。 （5）、【目标】：指定一个窗口，在该窗口中显示调用程序所返回的数据。如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。目标值有： ◇ _blank，在未命名的新窗口中打开目标文档。 ◇ _parent，在显示当前文档的窗口的父窗口中打开目标文档。 ◇ _self，在提交表单所使用的窗口中打开目标文档。 ◇ _top，在当前窗口的窗体内打开目标文档。 2、表单标记 ◇表单标记 是成对标记，首标记 和尾标记 之间的内容就是一个表单。 ◇表单form中的HTML代码要完成两件事情：一是指出服务器程序的路径和名称，二是要将给定信息传递给服务器程序。 表单标记 的基本格式： 在HTML中，form的语法结构如下： form action … method … … … … … 在 标记里有三个属性：action、method和enctype。 1）action属性 action属性指出该表单所对应的处理程序的位置。它的参数值就是该程序的URL。 2）method属性 method属性指的是表单数据传输到服务器的方法。 3）enctype属性 enctype属性指定对提交给服务器进行处理的数据使用 MIME 编码类型。 二、在表单中添加不同元素 每一个表单都是通过添加各种不同的表单对象（元素）来实现表单的功能。添加表单元素要在表单（红色虚框）中。 1、文本域 文本域是最常见的表单对象之一，可以输入字母、数字、文本等类型的内容。文本可以是单行或多行显示，也可以以密码的方式显示，在这种情况下，输入文本将被替换为星号或其它符号，以避免旁