表单元素深入分析

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您并不总是需要将表单控件放在 <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 属性的值所对应的网址发出请求。此外，浏览器还会检查提交按钮是否具有 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"，它就可以作为提交按钮使用。 另一种方法是使用 <input type="submit" value="Submit">。

第三种方法是使用 <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">。
再试一次！
所有答案均正确。
🎉

资源