表单元素深入探讨

通过集合保持井井有条 根据您的偏好保存内容并进行分类。

在之前的模块中，您学习了如何使用 <form> 元素。在本模块中，您将学习表单的工作原理以及何时使用表单。

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

您并非总是需要将表单控件放在 <form> 元素中。例如，您可能会提供一个 <select> 元素，供用户选择产品类别。这里不需要 <form> 元素，因为您不会在后端存储或处理数据。

但是，在大多数情况下，当您存储或处理来自用户的数据时，您应该使用 <form> 元素。正如您将在本模块中了解到的，使用 <form> 可以为您提供浏览器的大量内置功能，否则您必须自己构建这些功能。<form> 还默认内置了许多无障碍功能。如果您想避免在用户提交表单时重新加载页面，您仍然可以使用 <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 属性，则会向当前页面的 URL 发出 GET 请求。

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

提交表单时，浏览器会向作为 action 属性值的 URL 发出请求。此外，浏览器会检查 提交 按钮是否具有 formaction 属性。如果是这种情况，则使用此处定义的 URL。

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

尝试构建一个表单，用户可以在其中提交他们最喜欢的颜色。数据应作为 POST 请求发送，并且将处理数据的 URL 应为 /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"，它就可以作为提交按钮使用。另一种选择是使用 <input type="submit" value="Submit">。

第三种选择是使用 <input type="image" alt="Submit" src="submit.png">，以创建一个图形化的提交按钮。但是，既然您可以使用 CSS 创建图形化按钮，则不建议使用 type="image"。

允许用户提交文件

如果需要，使用 <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 请求发送。

检查您的理解

测试您对表单元素的知识

资源

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