第7章第2部分表单的设计.ppt

1、第7章第2部分 表单的设计,7.1 标签 7.2 标签 7.3 下拉菜单select/option 7.4 多行文本框textarea 7.5 表单在网页中的应用,上一页,下一页,目 录,结 束,本 节,7.2 标签,7.2.1 文本框text 7.2.2 提交按钮submit与重置按钮reset 7.2.3 密码框password 7.2.4 单选框radio 7.2.5 复选框checkbox 7.2.6 图像按钮image 7.2.7 隐含框hidden 7.2.8 文件选择输入框file,上一页,下一页,目 录,结 束,本 节,7.3.1 select标签 7.3.2 option标签

2、,7.3 下拉菜单,上一页,下一页,目 录,结 束,本 节,7.5.1 CGI程序的概念 7.5.2 表单配合CGI程序,7.5 表单在网页中的应用,上一页,下一页,目 录,结 束,本 节,第7章 表单的设计,随着Internet的迅速发展，用户的要求越来越高。他们不仅希望能从Web服务器中获得信息，而且还希望能向Web服务器反馈信息。HTML是利用表单（Form）来设计交互界面的。“表单”则是接受浏览者在网页中的操作，传递给服务器中的程序（如CGI程序），它是动态的，有输入框及按钮等。使用表单并配合CGI程序，网页能够知道浏览的人做了哪些事情，然后针对这些事情适当地加以回应，就可以做成一个具

3、有交互功能的网页了。本章的内容就是要告诉你，如何使用表单和CGI程序来让自己的网页和浏览网页的人之间进行互相交流。,上一页,下一页,目 录,结 束,本 节,表单标签是成对标签，首标签和尾标签之间的内容就是一个表单。表单form为浏览者在屏幕上建立一张表格，表格中有明确的文字提示，使浏览者可以在表格上输入自己信息，然后使用提交按钮，将浏览者的信息传送给服务器。表单form中的HTML代码要完成两件事情：一是指出CGI的路径和名称，二是要将表单输入的信息传递给CGI。至于CGI的概念，我们将在下一小节中讲，这里，读者只要把它当作一种在服务器上运行的应用程序就可以了。,7.1 标签,上一页,下一页,

4、目 录,结 束,本 节,在HTML中，form的语法结构如下： 在标签里有两个属性：action和method。,上一页,下一页,目 录,结 束,本 节,1action属性WWW是采用客户/服务器工作方式的。在浏览器端得到的用户反馈信息将被传送到Web服务器中，由相应的处理程序进行处理。action属性的作用就是指出该表单所对应的处理程序的位置。它的参数值就是该程序的URL。目前，在服务器端的采用较多的处理程序都是CGI程序，所以action属性写明的就是这个form需要执行的CGI程序名，一般来说，处理用户反馈信息的程序CGI程序是放在Web服务器的CGI-BIN目录下的，一旦用户提交输入信

5、息后，服务器便启动这个程序，完成查询任务。,上一页,下一页,目 录,结 束,本 节,2method属性method属性用于指定该表单的运行方式。属性的参数值为get和post之一，默认的方式是get。当值为get时表示该表单主要是从服务器中获取信息，因此它传送给服务器的反馈信息长度不能超过255个字符；当值为post时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制。只使用这一标签是很难完成用户信息输入的，在的开始与结束标签之间，除了可以使用以前讲的那些标签外，还有三个特殊标签，它们是：input、select和textarea。下面，让我们一起学习。,上一页,下一页,

6、目 录,结 束,本 节,7.2 标签,是个单标签，没有结束标签，它必须嵌套在表单标签中使用，用于定义一个用户输入项。 标签主要有六个属性：type、name、size、value、maxlength和checked，其中name和type是两个必选属性。name属性的参数值是相应处理程序中的变量名，Web服务器将把这条输入信息的值赋予name属性规定的变量。type属性用于指定该输入项提供的输入方式即指出浏览者输入的值是什么类型的。在不同的输入方式下，标签的格式略有不同，其他五种属性因type的类型不同，含义也不同。 type主要有九种类型：text、password、radio、checkb

7、ox、submit、reset、image、hidden和file。,上一页,下一页,目 录,结 束,本 节,当type的类型为text时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。此文本框是一个只能输入一行文字的输入框。当type=text时，标签除了有2个不可缺省的属性name和type外，还有3个可选的属性：value、size和maxlength。1size属性：用于指定文本框的长度，默认值为20，以字节为单位。2value属性：设定预先出现在文本框中的内容。3maxlength属性：表示该文本框允许用户输入的最大字符数。此值总是大于或等于

8、size属性的参数值。当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过部分的内容。,7.2.1 文本框text,上一页,下一页,目 录,结 束,本 节,7.2.2 提交按钮submit与重置按钮reset,当type=submit时，浏览器会在相应的位置产生一个提交按钮。当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。value属性的缺省值是“提交查询内容”。在一个表单中必须有提交按钮，不然将无法向服务器传送信息。当type=reset时，浏览器会在

9、相应位置产生一个重置按钮。当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。重置按钮的name属性也是可以缺省的。除name属性外，它也有一个可选的属性value，用于指定显示在清除按钮上的文字。value属性的缺省值是“重置”。一般来说，提交与重置按钮应同时出现。,上一页,下一页,目 录,结 束,本 节,7.2.3 密码框password,password类型与text类型使用起来很相似，不同之外只是当浏览者输入内容时，不显示所输入的内容，而是用星号“*”来代替每个密码字符，以保证密码的安全。,上一页,下一页,目 录,结 束,本 节,7.2.4 单选框radio,当ty

10、pe=radio时，表示该输入项是一个单选项。单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息。因此，所有属性name都应取相同的值，但属性value的值应是不同的，而其中的checked属性用于指定该选项在初始时是被选中的。,上一页,下一页,目 录,结 束,本 节,当type=checkbox时，表示该输入项是一个复选项，用户可以同时选中表单中的一个或多个复选项作为输入信息。由于选择是多项的，属性name应取不同的值。属性value的参数值就是该项被选中并提交后，Web浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺少

11、的。而checked属性用于指定该选项在初始时是被选中的。,7.2.5 复选框checkbox,上一页,下一页,目 录,结 束,本 节,当type=image时，浏览器会在相应位置产生一个图像按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必须的，它用于设置图像文件的路径。另外，很多在图像标签中使用的属性规定也可以在图像按钮中使用。,7.2.6 图像按钮image,上一页,下一页,目 录,结 束,本 节,当type=hidden时，表示输入项将不在浏览器窗口中显示。如果用户不想显示某些选项而又不愿将它们从文档中删去的话，就可以通过将这些选项中ty

12、pe属性的参数值改为hidden来达到上述目的。,7.2.7 隐含框hidden,上一页,下一页,目 录,结 束,本 节,文件选择输入框在文件上传程序中应用最为广泛。文件选择输入框虽然看似复杂，但是在HTML中，只需通过就可以完全实现了。,7.2.8 文件选择输入框file,上一页,下一页,目 录,结 束,本 节,在表单中，通过和标签就可以在浏览器中出现一个下拉式菜单或带有滚动条的菜单，浏览者可以在菜单中选中一个或多个选项。这一点和标签中单选框和多选框使用上相似，只是形式不同。,7.3 下拉菜单select/option,上一页,下一页,目 录,结 束,本 节,标签是成对标签，首标签和尾标签之

13、间的内容就是一个下拉式菜单的内容。 标签必须与标签配套使用，标签用于定义下拉菜单中的各个选项。标签有name、size和multiple三个属性。其中name属性用于指定下拉菜单的名字。size属性是可选的，用于定义菜单的长度。size属性的参数值是数字，表示显示在菜单中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该菜单添加滚动条，用户可以使用滚动条来查看所有的选项。szie属性的缺省值为1。multiple属性用于预选多个选项。,7.3.1 select标签,上一页,下一页,目 录,结 束,本 节,标签用来定义菜单中的选项。标签是单标签，它必须嵌套在标签中使用。一

14、个菜单中有几个选项，就要有几个标签与之相对应，选项的具体内容写在每个之后。标签有两个属性：value和selected，它们都是可选的。其中value属性的参数值是当该项被选中并提交后，Web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。selected属性用来指定选项的初始状态，表示该选项在初始时是被选中的。若在标签中设定multiple属性的话，可以在多个标签中带有selected属性，即同时多个选项被预选。,7.3.2 option标签,上一页,下一页,目 录,结 束,本 节,用标签可以来定义高度超过一行的文本输入框。标签是成对标签，首标签和尾标签之间的内容就是显示在文本输入

15、框中的初始信息。标签有3个属性：name、rows和cols。 其中name属性用于指定文本输入框的名字。cols属性用于规定文本输入框的宽度。属性的参数值是数字，表示一行所能显示的最大字符数。如果输入信息中有一行或几行的字符数大于cols属性的参数值，浏览器会为该文本输入框添加水平滚动条。rows属性用于规定文本输入框的高度。属性的参数值是数字，表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是当输入信息的行数小于或等于rows属性的参数值时，滚动条将不起作用。,7.4 多行文本框textarea,上一页,下一页,目 录,结 束,本 节,要想在网页中真正指

16、挥表单的作用，就要使用CGI程序，因此先来认识一下CGI程序的概念。,7.5 表单在网页中的应用,7.5.1 CGI程序的概念,简单地说，CGI是服务器和HTML文件之间的接口程序，它负责处理HTML文件与运行在服务器中程序之间的数据交换。它可以是一个已编译的程序，或是一个批处理文件，或任何可以执行的二进制文件。CGI与服务器交互的流程如图8.9所示。,上一页,下一页,目 录,结 束,本 节,CGI程序与服务器交互的流程,上一页,下一页,目 录,结 束,本 节,首先在浏览器发出请求，既浏览者输入查询条件，这一请求就像对任意一个URL的访问请求一样被传送到服务器，服务器接收到这一请求后，根据请求

17、中提供的文件名到CGI-BIN子目录中去执行CGI程序，这个CGI程序也许是计算一个值，或者是调用系统下的某个程序，该程序将执行结果返回给CGI程序，CGI程序又将结果转换成网页服务器能识别的HTML格式，Web服务器再将HTML格式表达的数据返回给提出请求的Web浏览器，经浏览器对HTML格式返回的数据进行处理后，就是呈现于面前的CGI执行结果了。,上一页,下一页,目 录,结 束,本 节,实现CGI程序交互式访问是网页编写的最高阶段，要求很高，除了需要熟悉HTML以外，还需要熟悉网页服务器所驻留主机的操作系统以及操作系统所支持的某种语言。同时，编写CGI程序之前，必须要求系统管理员开放对CG

18、I-BIN目录的访问权。基于这些原因，一般网页很少使用CGI，当然，当你的网页很庞大时，必然要用到CGI。幸运的是，在Internet上，到外都有现成的CGI程序、你只管下载使用就是了。所以，这里只教如何在HTML中加入CGI程序，至于如何编写CGI程序，请参考有关书籍。,上一页,下一页,目 录,结 束,本 节,有了标签之后，使用CGI程序变得比较简单。每个标签都需要在服务器端有一个CGI程序处理表单的输入。,7.5.2 表单配合CGI程序,上一页,下一页,目 录,结 束,本 节,2form-cgi.cgi程序源代码#!/bin/shecho Content-type:text/plainecho echo $ query_string当用户将这两个文件放到服务器相关的目录后，浏览者调用ex8-09.html时，便激活了服务器上的form-cgi.cgi程序，从而将浏览者输入的名字再显示一次。,