CGI学习手记-CGI和表单②

原文地址：CGI学习手记-CGI和表单② 作者：阿笨

本次讨论表单元素和对应的在表单被提交时发送到web服务器的数据之间的关系。

 

1.表单标签列表

HTML表单标签

<!--表单开始-->

<form action="/cgi-bin/register.cgi" method="post">

<!--文本域-->
  <input type="text" name="name" value="value" size="">

<!--密码域-->
<input type="password" name="name" value="value" size="">

<!--隐藏域-->
<input type="hidden" name="name" value="value">

<!--复选框-->
<input type="checkbox" name="name" value="value">

<!--单选框-->
<input type="radio" name="name" value="value">

<!--下拉菜单-->
<select name="name" size="1">
<option selected>one</option>
<option>two</option>
<option>three</option>
</select>

<!--多项选择框-->
<select name="name" size=3 multiple>
<option selected>one</option>
<option>two</option>
<option>three</option>
</select>

<!--多行文本域-->
<textarea rows="10" cols="50" name="name">test</textarea>

<!--提交按钮-->
<input type="submit" name="name" value="submit">

<!--重置按钮-->
<input type="reset" name="name" value="reset">

<!--图像按钮-->
<input type="image" src="./image.gif" name="name" value="value">

<!--普通按钮-->

<input type="button" name="name" value="value">

<!--文件按钮-->
<input type="file" name="name" value="value">

<!--表单结束-->
</form>

 

详细讲解

********************************************************************

<form>标签

可以通过<form>标签的属性来定义HTTP请求的格式。

method属性：

定义了在调用CGI脚本时使用的HTTP请求方法，选项有GET和POST，缺省为GET。

ACTION属性：

定义了接收HTTP请求的CGI脚本的URL，缺省的与浏览器获得该表单的URL相同。

enctype属性：

定义了用来编码HTTP请求内容的媒体类型。因为GET请求没有内容体，所以该属性只在POST方法时才有意义。一般只在生成接受文件上传的表单时使用（enctype="multipart/form-data"）

onSubmit事件：

onSubmit是一个javascript处理器，定义了表单在被提交时应执行的javascript代码。如果该代码返回flase，就会取消表单提交。

注：一个文件可以包含多个表单，但表单不能嵌套。

 

<input>标签

根据type属性的不同，生成一系列表单窗口。缺省为文本域。

[文本域]

value属性：

是默认的在文本域中显示的文本。，当用户重新编辑文本域中的值，表单提交时更新为显示的值。

size属性：

定义了文本域的宽度。缺省值是20。

maxlength属性：

定义了文本能够容纳的最大字符数。文本域的maxlength值可以设的比size能显示的字符数大一些。

onFous,onBlur,onChange事件：

文本域对应的javascript处理器是onFous,onBlur,onChange,分别在文本域得到焦点，失去焦点和文本域的值改变时被调用。

[密码域]

除了不显示真实值之外，在其他方面和文本域类似。浏览器用*号来代替每个字符。

这个域不能提供真正意义上的安全保护，只能提供基本防护，即防止被用户身后的人看见输入内容。密码域的值在被传送给服务器是不会被加密。这意味着在GET请求中出现在查询字符串中。

[隐藏域]

对于用户是不可见的，通常只使用在由CGI脚本产生的表单之中，对在一系列表单间传递信息很有用处。

[复选框]

name属性：

多个复选框可以使用同一名称。

value属性：

复选框被选中是包含在请求中的值。如果没有定义该属性，复选框会返回"ON"作为值。如果复选框没有被选中，名称和值都不会被发送。

checked属性：

表示在缺省情况下应该被选中。

onCheck属性：

表示当复选框被选中时应该执行的javascript代码。

[单选按钮]

和复选框类似，不同在于任何同名的单选按钮组都具有独占性，即其中只有一个可以被选上。

[提交按钮]

即提交表单内容。当用户点击提交按钮时，浏览器就运行任何与之关联的javascript的onSubmit处理器，根据表单的方法和编码方式来格式化HTTP请求，然后发送到表单动作所定义的URL。然后结果以一个新网页的形式显示。

在一个表单中也可以有多个提交按钮，只有被点击的提交按钮的名称和值才会被包含在表单的提交的内容中。

value属性：

该属性定义了显示在按钮上的文本，也是表单提交时这个元素的值。

onclick属性：

用户点击这个按钮时执行的代码。该代码返回一个false值时会取消此次提交操作。

[重置按钮]

允许用户把表单所有域的值重置为缺省值。

name属性：

名称和值都不会传递给CGI脚本，因此，名称只对javascript代码有用。

value属性：

定义了应该显示在按钮上的文本。

onclick属性：

用户点击这个按钮时执行的代码。该代码返回一个false值时会取消此次提交操作。

[图像按钮]

图像按钮的功能和提交按钮相同，但在按钮外观上带来更大灵活性。

支持图形和只支持文本的浏览器对这种元素的方式大不相同，只支持文本的浏览器发送名称和值。支持图形的浏览器除此之外还发送用户在图像上点击位置的坐标，以像素为单位计量。

例：<input type="image" src="./image.gif" name="img" value="niu">

点击后发送的内容：img.x=20&img.y=10

value属性：

作为元素的值被文本浏览器发送。

src属性：

显示按钮图像的URL。

onClick属性：

和标准提交按钮相同。

[普通按钮]

name属性：

普通按钮的名称和值永远不会作为请求的一部分被发送，因此它只对javascript代码有用。

value属性：

定义了按钮显示的名称。

onClick属性：

代码的返回值没有作用，因为不会引起其他操作。

 

<select></select>标签

用来生成供用户选择的列表，它能生成两种不同的元素即滚动框和下拉菜单。

size属性：

决定了列表中可见行的数量。1表示为下拉菜单。

multiple属性：

允许用户选择多个值。他只在size属性大于1时才可用。

<option>标签

<select>标签没有值属性，它的每个值必须用<option>标签包围起来。

selected属性：

定义了应该缺省被选中的选项。当一个表单被提交时，<select>标签的名称和被选中的选项的值一同被提交。

value属性:

是一个选项被选中时，该选项所传递的值。如果这个属性被忽略，那么缺省为<option>和</option>标签间的文本。

 

<textarea></textarea>标签

允许用户输入多行文本。不同于其他标签，在<textarea></textarea>标签之间空格，换行不会被忽略。

columns属性：

定义了文本域的宽度。

rows属性：

定义了文本域应该显示的行数。

wrap属性：

值为"virtual"→自动换行，但提交时没有换行符。

值为"physical"→自动换行，提交时有换行符。

值为"none"→不换行。