HTML 表单 (form) 的作用解释

参考网址： 《HTML中form表单作用解释》

表单在网页中主要负责的是数据采集功能，一个表单基本由三部分组成：

• 表单标签：这里面包含了处理表单数据所用 CGI （Common Gateway Interface，通用网关接口）程序的 URL （Uniform Resource Location，统一资源定位符）以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

下面对表单的三个部分分别进行说明。

一、表单标签

1. 功能

表单标签用于申明表单，定义采集数据的范围。也就是说< form>和< /form >里面包含的数据将被提交到服务器或者电子邮件里。

2. 标签格式

基本格式：

<form></form>

基本语法格式：

<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">
...
...
</FORM>

上述属性解释如下：

• action=url：用来指定处理提交表单的格式。它可以是一个URL地址（提交给程式），或一个电子邮件地址；
• method=get | post：指明提交表单的 HTTP 方法，可能的值有 POST 或 GET，在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响；其他说明见注；
• enctype=cdata：指明用来把表单提交给服务器时（当 method 值为 POST）的互联网媒体形式。这个特性的缺省值是”application/x-www-form-urlencoded”；
• TARGET=”…”：指定提交的结果文档显示的位置：
  • _blank ：在一个新的、无名浏览器窗口调入指定的文档；
  • _self ：在指向这个目标的元素的相同的框架中调入文档；
  • _parent ：把文档调入当前框的直接的父 FRAMESET 框中；这个值在当前框没有父框时等价于_self；
  • _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

注： 1、关于 GET 与 POST：

• GET 是用来从服务器上获得数据，而 POST 是用来向服务器上传递数据；
• GET 将表单中的数据按照 variable=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；POST 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL；
• GET 是不安全的：因为在传输过程，数据被放在请求的 URL 中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求 URL 记录到日志文件中，然后放在某个地方。这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。POST的所有操作对用户来说都是不可见的；
• GET 传输的数据量小，这主要是因为受 URL 长度限制；而 POST 可以传输大量的数据，所以在上传文件只能使用 POST；
• GET 限制 Form 表单的数据集的值必须为 ASCII 字符；而 POST 支持整个 ISO10646 字符集；
• GET 是 Form 的默认方法；
• 使用 POST 传输的数据，可以通过设置编码的方式正确转化中文；而 GET 传输的数据却没有变化，在以后的程序中，我们一定要注意这一点。

二、表单域

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式。

1. 文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式如下：

<input type="text" name="..." size="..." maxlength="..." value="...">

属性解释如下：

• type=”text”：定义单行文本输入框；
• name：定义文本框名称；
  • 要保证数据的准确采集，必须定义一个独一无二的名称；
• size：定义文本框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；
• value：定义文本框的初始值；

示例如下：

<input type="text" name="example1" size="20" maxlength="15" />

2. 多行文本框

多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。代码格式如下：

<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>

属性解释如下：

• name：定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• cols：定义文本框的宽度，单位是单个字符宽度；
• rows：定义文本框的高度，单位是单个字符宽度；
• wrap：定义输入内容大于文本域时显示的方式，可选值如下：
  • 默认值：文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
  • Off：用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
  • Virtual：允许文本自动换行；
  • Physical：让文本换行，当数据被提交处理时，换行符也将被一起提交处理。

示例如下：

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

3. 密码框

密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。代码格式如下：

<input type="password" name="..." size="..." maxlength="...">

属性解释如下：

• type=”password”：定义密码框；
• name：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• size：定义文本框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；

示例如下：

<input type="password" name="example3" size="20" maxlength="15">

4. 隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式如下：

<input type="hidden" name="..." value="...">

属性解释如下：

• type=”hidden”：定义隐藏域；
• name：定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• value：定义隐藏域的值；

示例如下：

<input type="hidden" name="ExPws" value="dd">

5. 复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码如下：

<INPUT type="checkbox" name="..." value="...">

属性解释如下：

• type=”checkbox”：定义复选框；
• name：定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• value：定义复选框的值；

示例如下：

<input type="checkbox" name="yesky" value="09">xxxcom
<input type="checkbox" name="Chinabyte" value="08">

6. 单选框

单选框用于访问者在选项中选择唯一答案的情况。代码如下：

<input type="radio" name="..." value="...">

属性解释如下：

• type=”radio”：定义单选框；
• name：定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
• value：定义单选框的值，在同一组中，它们的域值必须是不同的；

示例如下：

<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">

7. 文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 注：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=”multipart/form-data”来确保文件被正确编码；另外，表单的传送方式必须设置成POST。 代码格式如下：

<input type="file" name="..." size="15" maxlength="100">

属性解释如下：

• type=”file”：定义文件上传框；
• name：定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
• size：定义文件上传框的宽度，单位是单个字符宽度；
• maxlength：定义最多输入的字符数；

示例如下：

<input type="file" name="myfile" size="15" maxlength="100">

8. 下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。代码格式如下：

<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>

属性解释如下：

• size：定义下拉选择框的行数；
• name：定义下拉选择框的名称；
• multiple：表示可以多选，如果不设置本属性，那么只能单选；
• value：定义选择项的值；
• selected：表示默认已经选择本选项；

示例1如下：

<select name="mySel" size="1">
<option value="1" selected>Try one</option>
<option value="d2">Try two</option>
</select>

示例2如下：

<select name="mySelt" size="3" multiple>
<option value="1" selected>Default</option>
<option value="d2">2</option>
<option value="3">3</option>

三、表单按钮

表单按钮控制表单的运作。

1. 提交按钮

提交按钮用来将输入的信息提交到服务器。代码如下：

<input type="submit" name="..." value="...">

属性解释如下：

• type=”submit”：定义提交按钮；
• name：定义提交按钮的名称；
• value：定义按钮的显示文字；

示例如下：

<input type="submit" name="mySent" value="发送">

2. 复位按钮

复位按钮用来重置表单。代码如下：

<input type="reset" name="..." value="...">

属性解释如下：

• type=”reset”：定义复位按钮；
• name：定义复位按钮的名称；
• value：定义按钮的显示文字；

示例如下：

<input type="reset" name="myCancle" value="取消">

3. 一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。

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

属性解释如下：

• type=”button”：定义一般按钮；
• name：定义一般按钮的名称；
• value：定义一般按钮的显示文字；
• onClick：可以是其它事件，通过制定脚本函数来定义按钮的行为；

示例如下：

<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">