表单元素详解

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

您应该使用 <form> 元素吗？

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 1 次
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 1 次
• <ph type="x-smartling-placeholder"></ph> 1 次

来源

您并不总是需要将表单控件放在 <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> 属性。数据以 GET 的形式发送， 或 POST 请求的 method 属性保持一致。如果不存在 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>

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

提交表单的方法有两种。 您可以点击 Submit 按钮，也可以在使用任何表单控件时按 Enter。

注意 ：请为提交按钮提供便于操作的名称，例如“继续付款”或“保存更改”，而不仅仅是“提交”。在等待有效用户输入时，请勿停用 Submit 按钮，而应考虑在提交表单后停用该按钮，从而防止系统向您的服务器发送多个请求。不妨详细了解提交按钮的最佳做法。

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

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

第三种方式是使用 <input type="image" alt="Submit" src="submit.png">， 创建一个图形化的 Submit 按钮。 不过，既然您可以使用 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 元素
• 提交按钮的最佳做法