32、HTML表单元素全解析

keras9composer

于 2025-08-07 10:03:28 发布

阅读量35

点赞数

CC 4.0 BY-SA版权

分类专栏： Servlets与JSP深度解析文章标签： HTML表单复选框单选按钮

本文链接：https://blog.youkuaiyun.com/keras9composer/article/details/150464283

Servlets与JSP深度解析专栏收录该内容

42 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

HTML表单元素全解析

1. 复选框和单选按钮

复选框和单选按钮是HTML表单中常用的元素，用于让用户从一组选项中进行选择。

1.1 复选框（Check Boxes）

CHECKED属性 ：如果提供了 CHECKED 属性，那么在关联的网页加载时，复选框最初是被选中的；否则，最初是未选中的。
ONCLICK、ONFOCUS和ONBLUR属性 ：这些属性提供了JavaScript代码，分别在按钮被点击、获得输入焦点和失去焦点时执行。

1.2 单选按钮（Radio Buttons）

HTML元素 ： <INPUT TYPE="RADIO" NAME="..." VALUE="..." ...> （无结束标签）
属性：
- NAME（必需） ：与大多数输入元素的 NAME 属性不同，这个 NAME 由多个元素共享。所有与相同名称关联的单选按钮在逻辑上被分组，因此在任何给定时间只能选择一个。注意，属性值区分大小写。例如：

<INPUT TYPE="RADIO" NAME="Foo" VALUE="Value1">
<INPUT TYPE="RADIO" NAME="FOO" VALUE="Value2">

这将导致两个在逻辑上没有关联的单选按钮。所以要确保逻辑组中每个单选按钮的 NAME 完全匹配。
- VALUE（必需） ： VALUE 属性提供了在表单提交时与 NAME 一起传输的值。它不影响单选按钮的外观，而是像复选框一样，在单选按钮周围放置普通文本和HTML标记。
- CHECKED ：如果提供了 CHECKED 属性，那么在关联的网页加载时，单选按钮最初是被选中的；否则，最初是未选中的。
- ONCLICK、ONFOCUS和ONBLUR ：这些属性提供了JavaScript代码，分别在按钮被点击、获得输入焦点和失去焦点时执行。

以下是一个单选按钮组的示例：

<DL>
  <DT>Credit Card:
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">
      Visa
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard">
      Master Card
  <DD><INPUT TYPE="RADIO" NAME="creditCard"
             VALUE="java" CHECKED>
      Java Smart Card
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex">
      American Express
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="discover">
      Discover
</DL>

在这个例子中，当表单提交时， creditCard=java 将作为表单数据的一部分被发送。

2. 组合框和列表框

SELECT 元素向用户呈现一组选项。如果只能选择单个条目且未指定可见大小，则选项将显示在组合框（下拉菜单）中；当允许多选或指定了特定的可见大小时，将使用列表框。选择本身由嵌入在 SELECT 元素中的 OPTION 条目指定。

2.1 HTML元素和属性

HTML元素 ： <SELECT NAME="..." ...> ... </SELECT>
属性：
- NAME（必需） ： NAME 将表单标识给servlet或CGI程序。
- SIZE ： SIZE 给出可见行数。如果使用了 SIZE ， SELECT 菜单通常表示为列表框而不是组合框。当既未提供 SIZE 也未提供 MULTIPLE 时，组合框是正常表示形式。
- MULTIPLE ： MULTIPLE 属性指定可以同时选择多个条目。如果省略了 MULTIPLE ，则只允许进行单个选择。
- ONCLICK、ONFOCUS、ONBLUR和ONCHANGE ：这些非标准属性由支持JavaScript的浏览器支持。它们分别指示在条目被点击、获得输入焦点、失去输入焦点以及在更改后失去焦点时执行的代码。
OPTION元素 ：
- HTML元素 ： <OPTION ...> （结束标签可选）
- 属性：
  - VALUE ：如果当前选项被选中， VALUE 给出要与 SELECT 菜单的 NAME 一起传输的值。这不是显示给用户的文本，显示的文本在 OPTION 标签后面单独列出。
  - SELECTED ：如果存在， SELECTED 指定在页面首次加载时显示的特定菜单项被选中。

2.2 示例

Favorite language: 
<SELECT NAME="language">
  <OPTION VALUE="c">C
  <OPTION VALUE="c++">C++
  <OPTION VALUE="java" SELECTED>Java
  <OPTION VALUE="lisp">Lisp
  <OPTION VALUE="perl">Perl
  <OPTION VALUE="smalltalk">Smalltalk
</SELECT>

在这个例子中，因为只允许单个选择且未指定可见 SIZE ，所以它显示为组合框。如果在表单提交时 Java 条目处于活动状态，则 language=java 将被发送到服务器端程序。

Languages you know:<BR>
<SELECT NAME="language" MULTIPLE>
  <OPTION VALUE="c">C
  <OPTION VALUE="c++">C++
  <OPTION VALUE="java" SELECTED>Java
  <OPTION VALUE="lisp">Lisp
  <OPTION VALUE="perl" SELECTED>Perl
  <OPTION VALUE="smalltalk">Smalltalk
</SELECT>

在这个例子中，因为指定了 MULTIPLE 属性，所以它显示为列表框。如果在表单提交时多个条目处于活动状态，则多个值将被发送，作为单独的条目列出（重复 NAME ）。例如，如果 Java 和 Perl 被选中， language=java&language=perl 将被添加到发送到服务器的数据中。

3. 文件上传控件

文件上传控件允许用户选择一个文件并将其内容传输到服务器。

HTML元素 ： <INPUT TYPE="FILE" ...> （无结束标签）
属性：
- NAME（必需） ： NAME 属性在表单提交时标识文本字段。
- VALUE（忽略） ：出于安全原因，此属性被忽略。只有最终用户可以指定文件名。
- SIZE和MAXLENGTH ： SIZE 和 MAXLENGTH 属性的使用方式与文本字段相同，分别指定可见字符数和最大允许字符数。
- ACCEPT ： ACCEPT 属性旨在是一个逗号分隔的MIME类型列表，用于限制可用的文件名。然而，很少有浏览器支持此属性。
- ONCHANGE、ONSELECT、ONFOCUS和ONBLUR（非标准） ：这些属性由支持JavaScript的浏览器使用，分别指定在鼠标在文本字段发生更改后离开、用户在文本字段中选择文本、文本字段获得输入焦点和失去输入焦点时采取的操作。

以下是一个文件上传控件的示例：

<FORM ACTION="http://localhost:8088/SomeProgram"
      ENCTYPE="multipart/form-data">
Enter data file below:<BR>
<INPUT TYPE="FILE" NAME="fileName">
</FORM>

使用文件上传控件时，一定要在表单中指定 ENCTYPE="multipart/form-data" 。

4. 服务器端图像映射

在HTML中，有客户端图像映射和服务器端图像映射。客户端图像映射将URL与图像的各个区域关联起来，当在指定区域点击图像时，浏览器加载相应的URL，这种映射的确定在客户端进行，不涉及服务器端程序。而服务器端图像映射在用户点击图像时，将点击的坐标发送到服务器端程序。

4.1 标准服务器端图像映射（IMAGE）

HTML元素 ： <INPUT TYPE="IMAGE" ...> （无结束标签）
属性：
- NAME（必需） ： NAME 属性在表单提交时标识文本字段。
- SRC ： SRC 指定关联图像的URL。
- ALIGN ： ALIGN 属性与 IMG 元素的 ALIGN 属性具有相同的选项（TOP、MIDDLE、BOTTOM、LEFT、RIGHT）和默认值（BOTTOM），并且使用方式相同。

当点击这个元素显示的图像时，表单将被发送到封闭表单的 ACTION 指定的servlet或其他服务器端程序。名称本身不会被发送，而是发送 name.x=xpos 和 name.y=ypos ，其中 xpos 和 ypos 是鼠标点击相对于图像左上角的坐标。示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>The IMAGE Input Control</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">The IMAGE Input Control</H1>
Which island is Java? Click and see if you are correct.
<FORM ACTION="http://localhost:8088/GeographyTester">
  <INPUT TYPE="IMAGE" NAME="map" SRC="images/indonesia.gif">
</FORM>
Of course, image maps can be implemented <B>in</B>
Java as well. :-)
</BODY>
</HTML>

4.2 替代服务器端图像映射（ISMAP）

ISMAP 是 IMG 元素的一个可选属性，可以以类似于 <INPUT TYPE="IMAGE" ...> FORM条目的方式使用。如果带有 ISMAP 的图像位于超文本链接内，那么点击图像会将点击的坐标发送到指定的URL。坐标用逗号分隔，并以相对于图像左上角的像素为单位指定。示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>The ISMAP Attribute</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">The ISMAP Attribute</H1>
<H2>Select a pin:</H2>
<A HREF="http://localhost:8088/ChipTester">
<IMG SRC="images/chip.gif" WIDTH=495 HEIGHT=200 ALT="Chip"
     BORDER=0 ISMAP></A>
</BODY>
</HTML>

如果服务器端图像映射仅用于从一组静态目标URL中进行选择，那么客户端的 MAP 元素是更好的选择；如果图像映射要与其他输入元素混合使用，那么 IMAGE 输入类型更受青睐；对于关联区域的URL经常变化或需要计算的独立图像映射，带有 ISMAP 的图像是一个合理的选择。

5. 隐藏字段

隐藏字段不会影响呈现给用户的页面外观，而是存储固定的名称和值，并将其原样发送到服务器，而不管用户输入如何。隐藏字段通常用于以下三个目的：
- 用户跟踪 ：是在网站内跟踪用户的一种方法，但servlet作者通常依赖于servlet会话跟踪API，而不是在这个底层级别实现会话跟踪。
- 提供预定义输入 ：当各种静态HTML页面作为服务器上同一程序的前端时，用于向服务器端程序提供预定义输入。例如，在线商店可能会向推荐客户到其网站的人支付佣金，推荐页面可以让访问者通过表单搜索商店的目录，但嵌入一个隐藏字段列出其推荐ID。
- 存储上下文信息 ：用于在动态生成的页面中存储上下文信息。例如，在在线商店的订单确认页面中，表格的每一行对应于一个特定的订购项目，但没有可见的表单元素存储项目ID，因此使用隐藏表单。

HTML元素 ： <INPUT TYPE="HIDDEN" NAME="..." VALUE="..."> （无结束标签）
属性：
- NAME（必需）
- VALUE

例如：

<INPUT TYPE="INPUT TYPE="HIDDEN" NAME="itemID" VALUE="hall001">

在这个例子中， itemID=hall001 将始终随表单数据一起发送。需要注意的是，“隐藏”并不意味着用户无法发现该字段，因为它在HTML源代码中清晰可见。由于没有可靠的方法“隐藏”生成页面的HTML，因此不建议使用隐藏字段嵌入密码或其他敏感信息。

下面用表格总结一下上述各种表单元素及其属性：
| 元素类型 | HTML元素 | 属性 | 说明 |
| ---- | ---- | ---- | ---- |
| 复选框 | 无特定统一格式 | CHECKED、ONCLICK、ONFOCUS、ONBLUR | CHECKED控制初始选中状态，其余为JavaScript事件 |
| 单选按钮 | <INPUT TYPE="RADIO" ...> | NAME、VALUE、CHECKED、ONCLICK、ONFOCUS、ONBLUR | NAME要完全匹配，VALUE为提交值，CHECKED控制初始选中 |
| 组合框/列表框 | <SELECT ...> ... </SELECT> | NAME、SIZE、MULTIPLE、ONCLICK、ONFOCUS、ONBLUR、ONCHANGE | SIZE控制可见行数，MULTIPLE允许多选 |
| 文件上传控件 | <INPUT TYPE="FILE" ...> | NAME、VALUE（忽略）、SIZE、MAXLENGTH、ACCEPT、ONCHANGE、ONSELECT、ONFOCUS、ONBLUR | VALUE被忽略，ACCEPT很少有浏览器支持 |
| 服务器端图像映射（IMAGE） | <INPUT TYPE="IMAGE" ...> | NAME、SRC、ALIGN | 点击发送坐标到服务器 |
| 服务器端图像映射（ISMAP） | <IMG ... ISMAP> | 无额外特定属性 | 点击发送坐标到指定URL |
| 隐藏字段 | <INPUT TYPE="HIDDEN" ...> | NAME、VALUE | 存储固定值发送到服务器 |

以下是一个简单的mermaid流程图，展示文件上传控件的使用流程：

graph TD;
    A[用户打开包含文件上传控件的表单页面] --> B[用户点击浏览按钮或输入文件路径];
    B --> C[选择文件];
    C --> D[用户提交表单];
    D --> E[表单数据（包含文件内容）发送到服务器];

通过对这些HTML表单元素的了解和使用，我们可以创建出功能丰富、交互性强的网页表单，满足不同的业务需求。

HTML表单元素全解析

6. 表单元素使用场景总结

不同的表单元素适用于不同的场景，下面通过列表详细说明：
- 复选框 ：适用于需要用户从多个选项中选择多个的情况。例如，在一个调查问卷中，询问用户喜欢的水果，用户可以选择苹果、香蕉、橙子等多个选项。
- 单选按钮 ：当用户只能从一组选项中选择一个时使用。比如，选择性别（男或女）、支付方式（信用卡、支付宝、微信等）。
- 组合框/列表框 ：
- 组合框：在选项较多但只允许单选，且不需要展示所有选项时使用。如选择国家、城市等。
- 列表框：允许多选或者需要展示一定数量选项时使用。例如，选择多个兴趣爱好。
- 文件上传控件 ：用于让用户上传文件，如上传简历、图片、文档等。
- 服务器端图像映射 ：
- 标准服务器端图像映射（IMAGE）：当需要根据用户点击图像的坐标执行特定操作，且与表单其他元素结合使用时适用。
- 替代服务器端图像映射（ISMAP）：适用于独立的图像映射，关联区域的URL经常变化或需要计算的情况。
- 隐藏字段 ：用于存储一些不需要用户看到，但需要随表单一起提交的数据，如用户ID、会话ID等。

7. 表单元素的交互优化

为了提升用户体验，我们可以利用表单元素的属性进行交互优化。以下是一些常见的优化方法及示例代码：

7.1 利用JavaScript事件属性

ONCLICK事件 ：可以在用户点击元素时执行特定操作。例如，当用户点击单选按钮时，显示相关的提示信息。

<!DOCTYPE HTML>
<HTML>
<HEAD>
  <TITLE>ONCLICK事件示例</TITLE>
  <script>
    function showMessage() {
      alert("你选择了Java Smart Card！");
    }
  </script>
</HEAD>
<BODY>
  <DL>
    <DT>Credit Card:
    <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">
        Visa
    <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard">
        Master Card
    <DD><INPUT TYPE="RADIO" NAME="creditCard"
               VALUE="java" CHECKED ONCLICK="showMessage()">
        Java Smart Card
    <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex">
        American Express
    <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="discover">
        Discover
  </DL>
</BODY>
</HTML>

ONCHANGE事件 ：在组合框或列表框的选项发生变化时触发。例如，当用户选择不同的编程语言时，显示该语言的相关介绍。

<!DOCTYPE HTML>
<HTML>
<HEAD>
  <TITLE>ONCHANGE事件示例</TITLE>
  <script>
    function showLanguageInfo() {
      var select = document.getElementById("language");
      var selectedValue = select.value;
      var info;
      switch (selectedValue) {
        case "c":
          info = "C语言是一种广泛使用的编程语言，具有高效、灵活等特点。";
          break;
        case "java":
          info = "Java是一种面向对象的编程语言，具有跨平台性。";
          break;
        // 其他语言的介绍可以继续添加
        default:
          info = "暂无该语言介绍。";
      }
      alert(info);
    }
  </script>
</HEAD>
<BODY>
  Favorite language: 
  <SELECT NAME="language" ID="language" ONCHANGE="showLanguageInfo()">
    <OPTION VALUE="c">C
    <OPTION VALUE="c++">C++
    <OPTION VALUE="java" SELECTED>Java
    <OPTION VALUE="lisp">Lisp
    <OPTION VALUE="perl">Perl
    <OPTION VALUE="smalltalk">Smalltalk
  </SELECT>
</BODY>
</HTML>

7.2 利用初始选中属性

通过 CHECKED 和 SELECTED 属性，可以设置表单元素的初始选中状态，让用户看到默认选项。例如，在单选按钮组中，将某个选项设置为初始选中：

<DL>
  <DT>Credit Card:
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">
      Visa
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard">
      Master Card
  <DD><INPUT TYPE="RADIO" NAME="creditCard"
             VALUE="java" CHECKED>
      Java Smart Card
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex">
      American Express
  <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="discover">
      Discover
</DL>

8. 表单元素的兼容性问题

在使用表单元素时，需要考虑不同浏览器的兼容性。以下是一些常见的兼容性问题及解决方案：
| 元素类型 | 兼容性问题 | 解决方案 |
| ---- | ---- | ---- |
| 文件上传控件 | ACCEPT 属性支持度低 | 不依赖该属性进行文件类型限制，在服务器端进行文件类型验证 |
| 组合框/列表框 | 不同浏览器样式可能不同 | 使用CSS进行样式统一 |
| 服务器端图像映射 | 不同浏览器对坐标计算可能有差异 | 在服务器端进行坐标的验证和处理 |

9. 表单元素的使用流程总结

下面用mermaid流程图展示一个包含多种表单元素的表单提交的整体流程：

graph LR;
    A[用户打开表单页面] --> B[用户进行选择和输入操作];
    B --> C{是否有文件上传};
    C -- 是 --> D[选择文件];
    C -- 否 --> E[继续其他操作];
    D --> E;
    E --> F[用户提交表单];
    F --> G[表单数据（包含隐藏字段、选择的值、文件内容等）发送到服务器];
    G --> H[服务器端处理数据];

通过对各种表单元素的深入了解和合理使用，我们可以创建出功能强大、用户体验良好的网页表单。在实际开发中，要根据具体的业务需求选择合适的表单元素，并注意兼容性和交互优化等问题。