表单元素详解

在上一个单元中，您学习了如何使用 <form> 元素。在本单元中，您将了解表单的运作方式以及何时使用表单。

您是否应使用 <form> 元素？

Browser Support

• 1
• 12
• 1
• 1

Source

您不一定总是需要将表单控件放在 <form> 元素中。例如，您可以提供 <select> 元素，供用户选择商品类别。您无需在此处添加 <form> 元素，因为您不会在后端存储或处理数据。

不过，在大多数情况下，当您存储或处理来自用户的数据时，都应使用 <form> 元素。正如您将在本单元中学习到的那样，使用 <form> 可让您使用浏览器中的许多内置功能，而无需自行构建这些功能。<form> 还默认内置了许多无障碍功能。如果您想避免在用户提交表单时重新加载网页，则仍可以使用 <form> 元素，但需要使用 JavaScript 对其进行增强。

注意： 您可以使用 JavaScript 复制表单功能，但纯基于脚本的方法不太可能像内置 <form> 那样强大、易用且面向未来。了解为什么并非所有用户都支持 JavaScript。

<form> 的运作方式

您了解到，<form> 是处理用户数据的最佳方式。现在，您可能想知道表单是如何运作的。

<form> 是交互式表单控件的容器。

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

表单提交功能如何运作？

当您提交 <form> 时，浏览器会检查 <form> 属性。数据会根据 method 属性作为 GET 或 POST 请求发送。如果没有 method 属性，系统会向当前网页的网址发出 GET 请求。

您可以如何访问和处理表单数据？ 提交的数据可以由前端 JavaScript 使用 GET 请求处理，也可以由后端代码使用 GET 或 POST 请求处理。详细了解请求类型和转移表单数据。

注意： 提交按钮可能具有 formmethod 属性。如果是这种情况，系统会使用其中定义的值。

提交表单后，浏览器会向 action 属性的值所对应的网址发出请求。此外，浏览器还会检查 Submit 按钮是否具有 formaction 属性。如果是这种情况，系统会使用其中定义的网址。

此外，浏览器还会查找 <form> 元素的其他属性，例如，确定是否应验证表单 (novalidate)、是否应使用自动补全功能 (autocomplete="off") 或应使用哪种编码 (accept-charset)。

尝试构建一个表单，让用户可以提交自己喜欢的颜色。数据应作为 POST 请求发送，数据处理网址应为 /color。

显示表单

一种可能的解决方案是使用此表单：

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

确保用户可以提交您的表单

您可以通过两种方式提交表单。您可以点击提交按钮，也可以在使用任何表单控件时按 Enter。

注意 ：请为提交按钮使用具有操作性的名称，例如“继续付款”或“保存更改”，而不是仅使用“提交”。在等待用户提供有效输入时，请勿停用提交按钮，但在表单提交后，不妨考虑停用该按钮，以防止向服务器发出多次请求。详细了解提交按钮方面的最佳实践。

您可以通过多种方式添加提交按钮。一种方法是在表单中使用 <button> 元素。只要您不使用 type="button"，它就会像 Submit 按钮一样起作用。另一种方法是使用 <input type="submit" value="Submit">。

注意 ：您可以使用 enterkeyhint 属性更改屏幕键盘的 Enter 键的标签。这有助于用户更清楚地了解提交当前表单后会发生什么情况。

第三种方法是使用 <input type="image" alt="Submit" src="submit.png"> 创建一个图形提交按钮。不过，现在您可以使用 CSS 创建图形按钮，因此不建议使用 type="image"。

注意： 请始终为用户提供足够的时间来提交表单。在表单中定义超时设置会导致数据丢失，并让用户感到沮丧。如需了解详情，请参阅 W3C 表单超时指南。

允许用户提交文件

使用 <input type="file"> 可让用户根据需要上传和提交文件。

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

首先，将包含 type="file" 的 <input> 元素添加到表单中。如果用户应能够上传多个文件，请添加 multiple 属性。

您还需要进行一项更改，以确保用户可以上传文件，即在表单上设置 enctype 属性。默认值为 application/x-www-form-urlencoded。

<form method="post" enctype="multipart/form-data">
…
</form>

为确保可以提交文件，请将其更改为 multipart/form-data。如果没有此编码，则无法通过 POST 请求发送文件。

检查您的理解情况

测试您对表单元素的了解程度

提交文件需要为 enctype 设置什么值？

multipart/form-data

🎉

multipart/form-files

再试一次！

form-data

再试一次！

form-files

再试一次！

是否可以在不使用 <form> 的情况下发送用户数据

否

再试一次！

可以，使用 JavaScript。

🎉

可以，使用 Flash。

再试一次！

可以，使用 HTML5。

再试一次！

如何提交 <form>？

点击 <button>。

再试一次！

按 Enter 键。

再试一次！

点击 <input type="image">。

再试一次！

以上全部。

🎉

资源

• 表单 HTML 元素
• 提交按钮最佳实践