31、深入理解 HTML 表单元素及其应用

深入理解 HTML 表单元素及其应用

在网页开发中，HTML 表单是与用户进行交互的重要工具。它允许用户输入数据，并将这些数据发送到服务器进行处理。下面将详细介绍 HTML 表单中各种常见元素的使用方法和属性。

1. 文本框（Text Fields）

文本框是 HTML 表单中最常用的元素之一，用于接收用户的文本输入。在 INPUT 表单中，TEXT 是默认的 TYPE，但建议明确指定。在使用文本框时，需要注意以下几点：
- 分组文本框和描述文本 ：使用显式的 HTML 结构将文本框与其描述文本分组，因为浏览器的自动换行可能会导致描述文本与文本框分离。
- 避免依赖 Enter 键提交表单 ：不同浏览器对在文本框中按下 Enter 键的处理方式不同。例如，Netscape 只有在当前表单只有一个文本框时，按下 Enter 键才会提交表单；Internet Explorer 只有在页面上只有一个表单时，按下 Enter 键才会提交表单；Mosaic 只有在光标位于整个页面的最后一个文本框时，按下 Enter 键才会提交表单。因此，建议始终包含一个显式提交表单的按钮或图像映射。

文本框的常见属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 表单提交时用于标识文本框，标准 HTML 中该属性是必需的，因为数据以名/值对的形式发送到服务器，没有 NAME 的表单控件不会发送数据。 |
| VALUE | 可选属性，指定文本框的初始内容。表单提交时，发送的是当前内容，可能反映用户输入。如果提交时文本框为空，表单数据仅包含名称和等号。 |
| SIZE | 指定文本框的宽度，基于所使用字体的平均字符宽度。如果输入的文本超过此大小，文本框会滚动以容纳。 |
| MAXLENGTH | 指定允许输入的最大字符数，与通过 SIZE 指定的可见字符数不同。 |
| ONCHANGE、ONSELECT、ONFOCUS、ONBLUR、ONDBLDOWN、ONKEYPRESS、ONKEYUP | 仅支持 JavaScript 的浏览器使用这些属性，指定在特定事件发生时执行的操作。 |

以下是一个简单的文本框示例：

<INPUT TYPE="TEXT" NAME="username" VALUE="默认用户名" SIZE="20" MAXLENGTH="50">

2. 密码框（Password Fields）

密码框用于输入敏感信息，如密码或信用卡号。用户输入的文本不会显示，而是显示为模糊字符，通常是星号。密码框的创建和使用与文本框类似，但为了保护用户隐私，建议在使用密码框时使用 POST 方法提交表单，以防止旁观者从浏览器顶部的 URL 显示中读取未加密的密码。

密码框的属性与文本框相同，包括 NAME、VALUE、SIZE、MAXLENGTH、ONCHANGE、ONSELECT、ONFOCUS、ONBLUR、ONKEYDOWN、ONKEYPRESS 和 ONKEYUP。

以下是一个密码框示例：

<INPUT TYPE="PASSWORD" NAME="password" SIZE="20" MAXLENGTH="50">

3. 文本区域（Text Areas）

文本区域用于输入多行文本。它使用 TEXTAREA 元素创建，没有 VALUE 属性，而是使用开始和结束标签之间的文本作为初始内容。

文本区域的常见属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 指定发送到服务器的名称。 |
| ROWS | 指定可见的文本行数。如果输入的行数超过此值，文本区域会添加垂直滚动条。 |
| COLS | 指定文本区域的可见宽度，基于所使用字体的平均字符宽度。 |
| WRAP | Netscape 特定属性，指定如何处理超过 COLS 指定大小的行。值为 OFF 时禁用自动换行，为默认值；值为 HARD 时，单词在文本区域中换行，并在表单提交时传输相关的换行符；值为 SOFT 时，单词在文本区域中换行，但表单提交时不传输额外的换行符。 |
| ONCHANGE、ONSELECT、ONFOCUS、ONBLUR、ONKEYDOWN、ONKEYPRESS、ONKEYUP | 仅支持 JavaScript 的浏览器使用这些属性，指定在特定事件发生时执行的代码。 |

以下是一个文本区域示例：

<TEXTAREA NAME="message" ROWS="5" COLS="30">
请在此输入您的留言。
</TEXTAREA>

4. 按钮（Push Buttons）

按钮在 HTML 表单中有三种主要用途：提交表单、重置表单控件的值以及触发任意 JavaScript 代码。

传统上，按钮使用 INPUT 元素和 TYPE 属性（SUBMIT、RESET 或 BUTTON）创建。在 HTML 4.0 中，引入了 BUTTON 元素，但目前仅 Internet Explorer 支持。该元素允许使用任意 HTML 标记作为按钮内容，例如多行按钮标签、带有字体更改的按钮标签、图像按钮等。

4.1 提交按钮（Submit Buttons）

提交按钮用于将表单数据发送到服务器。当点击提交按钮时，表单会发送到 FORM 元素的 ACTION 参数指定的 servlet 或其他服务器端程序。

提交按钮的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 可选属性，如果提供，只有实际点击的按钮的名称和值会被发送到服务器。 |
| VALUE | 按钮的标签，默认标签可以通过显式提供 VALUE 属性来更改。 |
| ONCLICK、ONDBLCLICK、ONFOCUS、ONBLUR | 非标准属性，支持 JavaScript 的浏览器使用这些属性将 JavaScript 代码与按钮关联。如果按钮关联的代码返回 false，则表单提交将被抑制。 |

以下是一个提交按钮示例：

<INPUT TYPE="SUBMIT" NAME="submit" VALUE="提交表单">

Internet Explorer 支持的另一种创建提交按钮的方式：

<BUTTON TYPE="SUBMIT" NAME="submit" VALUE="提交表单">
  <B>提交</B> 表单
</BUTTON>

4.2 重置按钮（Reset Buttons）

重置按钮用于将表单中所有项的值重置为原始 VALUE 参数指定的值。重置按钮的值不会作为表单内容的一部分传输。

重置按钮的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| VALUE | 指定按钮标签，默认值为“Reset”。 |
| NAME | 标准 HTML 中不命名重置按钮，但 JavaScript 允许使用 NAME 属性以简化对元素的引用。 |
| ONCLICK、ONDBLCLICK、ONFOCUS、ONBLUR | 非标准属性，支持 JavaScript 的浏览器使用这些属性将 JavaScript 代码与按钮关联。 |

以下是一个重置按钮示例：

<INPUT TYPE="RESET" VALUE="重置表单">

Internet Explorer 支持的另一种创建重置按钮的方式：

<BUTTON TYPE="RESET" VALUE="重置表单">
  <I>重置</I> 表单
</BUTTON>

4.3 JavaScript 按钮（JavaScript Buttons）

JavaScript 按钮仅被支持 JavaScript 的浏览器识别。它创建的按钮外观与 SUBMIT 或 RESET 按钮相同，并允许作者将 JavaScript 代码附加到 ONCLICK、ONDBLCLICK、ONFOCUS 或 ONBLUR 属性。JavaScript 按钮的名/值对不会作为表单数据的一部分传输。常见用途之一是在表单提交到服务器之前验证所有输入元素的格式。

以下是一个 JavaScript 按钮示例：

<INPUT TYPE="BUTTON" VALUE="检查值" onClick="validateForm()">

Internet Explorer 支持的另一种创建 JavaScript 按钮的方式：

<BUTTON TYPE="BUTTON" VALUE="检查值" onClick="validateForm()">
  检查 <U>值</U>
</BUTTON>

5. 复选框和单选按钮（Check Boxes and Radio Buttons）

复选框和单选按钮用于让用户从一组预定义的选项中进行选择。复选框可以单独选择或取消选择，而单选按钮可以分组，以便一次只能选择组中的一个成员。

5.1 复选框（Check Boxes）

复选框使用 INPUT 元素和 TYPE 属性为 CHECKBOX 创建。只有当复选框被选中时，其名/值对才会在表单提交时传输。

复选框的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 发送到服务器的名称，标准 HTML 中复选框需要该属性，但与 JavaScript 一起使用时可选。 |
| VALUE | 可选属性，默认值为 on。只有当复选框被选中时，名称和值才会发送到服务器。 |
| CHECKED | 可选属性，如果存在，则复选框默认被选中。 |
| ONCLICK、ONFOCUS、ONBLUR | 非标准属性，支持 JavaScript 的浏览器使用这些属性将 JavaScript 代码与复选框关联。 |

以下是一个复选框示例：

<P>
<INPUT TYPE="CHECKBOX" NAME="newsletter" CHECKED>
勾选此处表示您 <I>不想</I> 接收我们的电子邮件通讯
</P>

通过合理使用这些 HTML 表单元素和属性，可以创建出功能丰富、用户体验良好的网页表单。在实际开发中，还可以结合 JavaScript 进一步增强表单的交互性和验证功能。

深入理解 HTML 表单元素及其应用

5.2 单选按钮（Radio Buttons）

单选按钮与复选框类似，也是用于让用户从一组选项中进行选择，但不同的是，单选按钮是分组的，同一组内一次只能选择一个选项。

单选按钮使用 INPUT 元素和 TYPE 属性为 RADIO 创建。为了将单选按钮分组，需要为同一组的所有单选按钮设置相同的 NAME 属性。

单选按钮的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 用于将单选按钮分组，同一组的单选按钮必须具有相同的 NAME 属性，该属性是必需的。 |
| VALUE | 每个单选按钮的唯一值，当表单提交时，选中的单选按钮的 NAME 和 VALUE 会被发送到服务器。 |
| CHECKED | 可选属性，如果存在，则该单选按钮默认被选中。 |
| ONCLICK、ONFOCUS、ONBLUR | 非标准属性，支持 JavaScript 的浏览器使用这些属性将 JavaScript 代码与单选按钮关联。 |

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

<P>
<INPUT TYPE="RADIO" NAME="gender" VALUE="male" CHECKED> 男性
<INPUT TYPE="RADIO" NAME="gender" VALUE="female"> 女性
</P>

6. 下拉列表（Select Lists）

下拉列表允许用户从一组预定义的选项中选择一个或多个选项。下拉列表使用 SELECT 元素创建，每个选项使用 OPTION 元素定义。

下拉列表的常见属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 指定发送到服务器的名称，是必需的。 |
| MULTIPLE | 可选属性，如果存在，则允许用户选择多个选项。 |
| SIZE | 指定下拉列表中可见的选项数量。 |

OPTION 元素的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| VALUE | 选项的值，当表单提交时，选中的选项的 VALUE 会被发送到服务器。 |
| SELECTED | 可选属性，如果存在，则该选项默认被选中。 |

以下是一个简单的下拉列表示例：

<SELECT NAME="country">
  <OPTION VALUE="china"> 中国 </OPTION>
  <OPTION VALUE="usa"> 美国 </OPTION>
  <OPTION VALUE="uk"> 英国 </OPTION>
</SELECT>

如果需要允许用户选择多个选项，可以添加 MULTIPLE 属性：

<SELECT NAME="fruits" MULTIPLE SIZE="3">
  <OPTION VALUE="apple"> 苹果 </OPTION>
  <OPTION VALUE="banana"> 香蕉 </OPTION>
  <OPTION VALUE="orange"> 橙子 </OPTION>
</SELECT>

7. 文件上传（File Uploads）

文件上传允许用户将本地文件上传到服务器。文件上传使用 INPUT 元素和 TYPE 属性为 FILE 创建。

文件上传的属性如下：
| 属性 | 描述 |
| ---- | ---- |
| NAME | 指定发送到服务器的名称，是必需的。 |
| ACCEPT | 可选属性，指定允许上传的文件类型，例如 “image/*” 表示允许上传所有图像文件。 |

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

<FORM ACTION="upload.php" METHOD="POST" ENCTYPE="multipart/form-data">
  <INPUT TYPE="FILE" NAME="file">
  <INPUT TYPE="SUBMIT" VALUE="上传文件">
</FORM>

需要注意的是，在处理文件上传时，表单的 METHOD 必须为 POST，并且 ENCTYPE 必须为 “multipart/form-data”。

8. 表单验证（Form Validation）

表单验证是确保用户输入的数据符合特定要求的过程。可以使用 HTML5 的内置验证属性，也可以使用 JavaScript 进行自定义验证。

8.1 HTML5 内置验证属性

HTML5 提供了一些内置的验证属性，例如：
- REQUIRED ：指定该字段为必填项。
- PATTERN ：指定输入的格式要求，使用正则表达式。
- MINLENGTH 和 MAXLENGTH ：指定输入的最小和最大长度。
- MIN 和 MAX ：指定输入的最小值和最大值。

以下是一个使用 HTML5 内置验证属性的示例：

<FORM ACTION="submit.php" METHOD="POST">
  <INPUT TYPE="TEXT" NAME="username" REQUIRED MINLENGTH="3" MAXLENGTH="20">
  <INPUT TYPE="EMAIL" NAME="email" REQUIRED>
  <INPUT TYPE="NUMBER" NAME="age" MIN="18" MAX="100">
  <INPUT TYPE="SUBMIT" VALUE="提交">
</FORM>

8.2 JavaScript 自定义验证

对于更复杂的验证需求，可以使用 JavaScript 进行自定义验证。以下是一个简单的 JavaScript 验证示例：

<FORM ACTION="submit.php" METHOD="POST" onSubmit="return validateForm()">
  <INPUT TYPE="TEXT" NAME="username" ID="username">
  <INPUT TYPE="PASSWORD" NAME="password" ID="password">
  <INPUT TYPE="SUBMIT" VALUE="提交">
</FORM>

<script>
function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "" || password == "") {
    alert("用户名和密码不能为空");
    return false;
  }

  return true;
}
</script>

9. 表单提交方式（Form Submission Methods）

表单提交方式有两种：GET 和 POST。

9.1 GET 方法

GET 方法将表单数据附加到 URL 的查询字符串中。例如：

<FORM ACTION="search.php" METHOD="GET">
  <INPUT TYPE="TEXT" NAME="keyword">
  <INPUT TYPE="SUBMIT" VALUE="搜索">
</FORM>

当用户点击提交按钮时，URL 可能会变成：

search.php?keyword=example

GET 方法适用于简单的查询操作，但不适合传输敏感信息，因为数据会显示在 URL 中。

9.2 POST 方法

POST 方法将表单数据作为请求体发送到服务器，不会显示在 URL 中。例如：

<FORM ACTION="login.php" METHOD="POST">
  <INPUT TYPE="TEXT" NAME="username">
  <INPUT TYPE="PASSWORD" NAME="password">
  <INPUT TYPE="SUBMIT" VALUE="登录">
</FORM>

POST 方法适用于传输敏感信息，如密码、信用卡号等。

10. 总结

HTML 表单是网页开发中不可或缺的一部分，通过合理使用各种表单元素和属性，可以创建出功能强大、用户体验良好的表单。在实际开发中，需要根据具体需求选择合适的表单元素和提交方式，并进行必要的表单验证，以确保用户输入的数据的准确性和安全性。同时，结合 JavaScript 可以进一步增强表单的交互性和功能。

为了更清晰地展示表单元素的使用流程，下面是一个 mermaid 格式的流程图：

graph TD;
    A[开始] --> B[选择表单元素类型];
    B --> C{是否为文本框};
    C -- 是 --> D[设置文本框属性];
    C -- 否 --> E{是否为密码框};
    E -- 是 --> F[设置密码框属性];
    E -- 否 --> G{是否为文本区域};
    G -- 是 --> H[设置文本区域属性];
    G -- 否 --> I{是否为按钮};
    I -- 是 --> J{按钮类型};
    J --> K[设置提交按钮属性];
    J --> L[设置重置按钮属性];
    J --> M[设置 JavaScript 按钮属性];
    I -- 否 --> N{是否为复选框或单选按钮};
    N -- 是 --> O{复选框或单选按钮};
    O --> P[设置复选框属性];
    O --> Q[设置单选按钮属性];
    N -- 否 --> R{是否为下拉列表};
    R -- 是 --> S[设置下拉列表属性];
    R -- 否 --> T{是否为文件上传};
    T -- 是 --> U[设置文件上传属性];
    T -- 否 --> V[其他情况];
    D --> W[添加到表单];
    F --> W;
    H --> W;
    K --> W;
    L --> W;
    M --> W;
    P --> W;
    Q --> W;
    S --> W;
    U --> W;
    V --> W;
    W --> X[设置表单提交方式];
    X --> Y[添加表单验证];
    Y --> Z[结束];

通过以上的介绍和示例，相信你对 HTML 表单元素的使用有了更深入的了解。在实际项目中，可以根据具体需求灵活运用这些知识，创建出高质量的网页表单。