表单元素详解

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

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

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

您并非总是需要将表单控件放在 <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 属性，则系统会对当前页面的网址发出 GET 请求。

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

提交表单后，浏览器会向网址（即 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 按钮。 一种方法是在表单内使用 <button> 元素。只要您不使用 type="button"，它就可以用作 Submit 按钮。另一种方法是使用 <input type="submit" value="Submit">。

第三种方法是使用 <input type="image" alt="Submit" src="submit.png">，创建一个图形化的 Submit 按钮。不过，现在您可以使用 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 请求发送文件。

检查您的掌握程度

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

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

multipart/form-data
🎉
multipart/form-files
再试一次！
form-data
再试一次！
form-files
再试一次！

可以在没有 <form> 的情况下发送用户数据吗

否
再试一次！
是的，使用 JavaScript。
🎉
是，使用 Flash。
再试一次！
是，使用 HTML5。
再试一次！

如何提交 <form>？

点击 <button>。
再试一次！
按 Enter 键。
再试一次！
点击 <input type="image">。
再试一次！
以上全部。
🎉

资源