HTML 表单:与网络互动

作者:Eric Kasten

您已经设置了一个万维网服务器,现在有许多 HTML(超文本标记语言)文档供网络冲浪的访问者享用。您对 HTML 很熟悉,并且准备好为您的服务器寻找新的用途。在您的网络旅程中,您记得填写过一些电子表单,以便向您喜爱的主页之一的创建者提供反馈。

本文将帮助您获得编写 HTML 表单所需的基础知识,并解释需要做什么才能使您和您的服务器与您的 Web 访问者互动。

表单的元素

一个可用的表单实际上由三个基本元素组成。第一个是表单本身。表单是使用 HTML 文本构建的,就像您的主页一样,但有一些不同的标记标签。第二个元素是脚本或程序。如果此程序要与您的服务器和用户的 Web 客户端正确通信,则必须按照通用网关接口 (CGI) 规范构建。CGI 脚本是界面背后的引擎;它将实际处理用户在表单中输入的数据。第三个元素是 httpd(超文本传输协议守护程序)服务器,它调用 CGI 程序,并将用户输入的数据传递给它。

让我们看看一个表单可以包含哪些元素。与其他 HTML 结构非常相似,表单是使用标记标签和简单文本构建的。表单由 <FORM>...</FORM> 封装,其中 ... 被文本和其他表单标记替换。请记住,标记标签不区分大小写,但我将继续大写它们以提高清晰度。以下是主要可用表单标记标签的列表和描述。

<FORM>...</FORM>

指示 HTML 表单的开始和结束。

<INPUT>...</INPUT>

指示表单输入的开始和结束。

<SELECT>...</SELECT>

指示选择列表的开始和结束。

<TEXTAREA>...</TEXTAREA>

指示自由格式文本输入区域的开始和结束。

FORM 标记标签

表单标记标签可以使用属性来帮助控制表单向用户显示的方式。让我们依次查看每个标记标签,并检查每个标签的有效属性。首先,让我们看看 FORM 标签。

ACTION

通常是一个 URL,指示要执行的脚本或程序。

METHOD

有效值是 POSTGET

ACTION 属性指定一个 URL(统一资源定位符),它将用于根据在表单中输入的内容执行某些操作。URL 通常指定一个程序,该程序存在于服务器上的脚本目录中。例如,http://some.server/cgi-bin/donothing.sh 将导致表单数据返回到程序 donothing.sh 进行处理。然后,该程序将向客户端返回适当的响应。

METHOD 属性用于指定如何将输入到表单中的数据返回到服务器。数据可以使用 GET 方法附加到由 action 属性指定的 URL。当使用 GET 方法时,http 服务器会将信息传递给 ACTION 程序,并将其编码在环境变量中。当使用 POST 方法时,http 服务器会将信息传递到标准输入。

<FORM ACTION="http://www.you.org/cgi-bin/donothing.sh" METHOD=POST>

开始定义一个由当前主机上的 donothing.sh 脚本处理的表单,该脚本从其标准输入中读取数据。

INPUT 标签

INPUT 标签用于指定用户可以输入数据的字段。此标签与所有其余的表单标记标签一样,必须出现在 <FORM> 标签及其关联的 </FORM> 标签之间。以下是有效属性的列表。

NAME

指示输入字段的符号名称。ACTION 程序使用此名称来区分字段。

TYPE

指定要使用的类型,例如 checkboxradio button

VALUE

这为输入字段提供了一个默认值。

CHECKED

布尔值,指示复选框等元素的状态。

SIZE

文本输入字段的物理显示大小。

MAXLENGTH

文本输入字段允许输入的最大字符数。

INPUT 字段的 NAME 允许区分或分组字段。ACTION 程序使用字段的名称来确定用户在表单的每个字段中输入的内容。NAME 属性也用于建立某些表单元素类型(特别是单选按钮)的逻辑分组。

TYPE 属性的有效设置是 checkboxtextpasswordradiohiddenresetsubmitcheckbox 是一种可以呈现两种状态之一的元素:选中或未选中。这为表单条目提供了一个基本的布尔真或假元素。text 元素提供了一个单行文本输入字段,用户可以在其中输入数据。password 字段是一个 text 输入字段,其中输入的文本以某种方式隐藏起来不显示。

Radio 按钮是按钮组,允许一次切换单个按钮。当选择组中的一个按钮时,组中的其他按钮将被取消切换。radio 按钮组是通过将组中每个按钮的 NAME 属性设置为相同的值来建立的。

hidden 输入根本不向用户显示,用户也无法修改它。hidden 输入将状态信息编码到表单中。例如,可能有一个表单应该以不同的方式处理,具体取决于上下文。表单的每个实例都可以包含 hidden 输入,指示上下文并适当地指导处理。

特别值得注意的是 submitreset 输入类型。单击 submit 会导致表单内容被传输到服务器,然后传输到 ACTION 程序进行处理。reset 按钮使表单元素设置为其初始值,允许用户轻松地将表单返回到其初始状态。

可以使用 VALUE 属性为表单元素指定默认值。对于文本输入元素,这表示在检索表单时最初存在的默认字符字符串。如果字段是 radio 按钮,则这是元素在选中时(当元素未选中时,它没有值)所采用的值。对于 submitreset 元素,VALUE 属性可用于设置按钮标签。

CHECKED 属性仅对 checkboxradio 元素有效。如果存在 CHECKED 属性,则默认情况下会切换单选按钮或复选框。可以使用 SIZE 属性设置文本输入字段的物理长度。

MAXLENGTH 属性限制在特定文本输入字段中接受的字符数。

SELECT 标签

SELECT 是下一个主要的标记标签。SELECT 标签用于封装选择列表。可以在 <SELECT></SELECT> 之间包含多个 <OPTION> 标签,以向列表中添加元素。选择列表可以采用两种物理形式。如果它的 SIZE 为 1,则它显示为弹出菜单。如果 SIZE 属性大于 1,则它显示为可滚动列表,一次显示 SIZE 个选项。以下是 SELECT 标签的可能属性

NAME

指示选择菜单的符号名称。

SIZE

在任何时候可见的物理行数。

MULTIPLE

如果存在此属性,则可以一次选择列表中的多个项目。

这些属性很简单,稍后我将留给您探索。在我们继续之前,我应该再谈谈 <OPTION> 标签。option 标签可以具有属性 SELECTED。当存在时,此属性指示默认情况下选择特定的列表项。<OPTION> 标签很像普通 HTML 列表的 <li>;它不需要终止 </OPTION> 标签。相反,<OPTION> 标签的出现表示新列表项的开始以及任何先前项的终止。此外,选择列表项只能是简单文本。列表项不能被标记,也不能是锚定项。

TEXTAREA 标签

用户可以在其中键入自由格式文本的表单元素,很像在编辑器中输入文本,是使用 TEXTAREA 标签构建的。文本输入区域具有基本形式

<TEXTAREA>default text</TEXTAREA>

default text 是初始文本(如果有),它存在于文本输入区域中。此表单元素具有三个易于使用的属性。

NAME

指示选择菜单的符号名称。

ROWS

文本输入区域的垂直大小。

COLS

文本输入区域的水平大小。

组装各个部分

列表 1. 一个简单的 HTML 表单

现在我们知道了我们有哪些可用的东西,让我们创建一个基本表单。列表 1 显示了一个简单的 HTML 表单,而 图 1(139K) 显示了 Mosaic 可能如何呈现此表单。

请记住,ACTION 属性需要指定您的主机和一个有效的脚本或程序。在示例中,当提交表单时,shell 脚本 echo.sh(稍后显示)将在 your.http.host 上执行。脚本或程序需要驻留在您的服务器识别为可执行程序的有效位置的目录中。请务必查看服务器的文档,以确保它已正确配置以允许此类执行。这些程序的一个典型位置是在服务器根目录下的 cgi-bin 目录中,这就是此示例的配置方式。

与客户端交互

表单只是与用户交互所需的三个部分之一。第二个是 http 服务器,我们在此处不介绍它(请参阅服务器的文档)。第三个是 CGI 程序或脚本。如上所述,这些程序 必须 驻留在 http 服务器识别为可执行文件的有效位置的目录中。CGI 程序需要能够理解从客户端返回的编码表单数据,并且必须能够做出适当的响应。编码的表单数据将出现在命令行或环境变量 QUERY_STRING 中,具体取决于是否使用了 GETPOSTMETHOD。通常,程序只需要在 stdout 上写入必要的响应,然后响应将由 http 守护程序传输回客户端。

服务器通常还会为 CGI 程序的使用设置许多环境变量。以下是我认为有用的环境变量的 部分 列表。有关其他环境变量的进一步讨论,请参阅 hoohoo.ncsa.uiuc.edu/cgi/env.html

REQUEST_METHOD

设置为用于发出请求的 METHOD

QUERY_STRING

当使用 GET METHOD 时,设置为编码的表单数据。

REMOTE_HOST

如果可用,则设置为远程主机名。

REMOTE_ADDR

设置为远程主机的 IP 地址。

CONTENT_LENGTH

客户端查询中返回的数据的长度。

通常,CGI 程序只需要使用适当的 http 标头响应请求,可能后跟一个文档。响应只是写入 stdout,数据将在其中返回给客户端。标头由 http 标头指令和相关的文本字符串组成。标头以空行结尾。两个最常用的标头指令是 Content-typeLocation 指令。Content-type 指令指示要跟随的数据类型。例如,Content-type: text/html 指示 stdout 上标头后面的文档是用 HTML 编写的。Location 指令用于提供一种可以进行重定向的方式。例如,Location: http://goto.another.host/web/doc.html 将导致客户端检索 URL 中指定的文档。

探索 CGI 程序构造的最简单方法可能是通过示例。列表 2 显示了一个 shell 脚本,它将响应客户端的 HTML 表单请求。

列表 2

响应是回显编码的查询、一些环境变量以及查询的解码内容。此程序在创建新表单时可用作测试程序,并可用作构建其他 CGI 脚本的基础。图 2(135K) 显示了将图 1 中显示的表单发布到此脚本的结果。

图 2 中查看 QUERY_STRING 请注意,空格被编码为加号,并且输入中的 & 符号被编码为以百分号开头的十六进制值。另请注意,每个名称/值对都用 & 符号分隔。shell 脚本将此字符串解码回用户输入的数据。还有其他程序,例如 CERN 的 cgiparse,也可以帮助您解码 CGI 表单数据。

结论

现在您应该掌握了表单构建和处理的基本构建块。可以使用 HTML 表单和 CGI 程序完成许多事情,包括通过 http 提供手册页或构建用于访问其他系统信息的网关。祝你好运,玩得开心!

资源

Eric Kasten 自 1989 年以来一直是一名系统程序员。目前,他正在密歇根州立大学攻读计算机科学硕士学位,他的研究重点是网络和分布式系统。深思熟虑的意见和问题可以发送至 tigger@petroglyph.cl.msu.edu。您也可以访问他的主页 petroglyph.cl.msu.edu/~tigger

加载 Disqus 评论