使用表单获取用户数据

通过这篇关于表单元素的介绍，了解在网页上使用表单的基础知识。

假设您想在自己的网站上询问用户最喜欢的动物。 首先，您需要一种收集数据的方法。

在 HTML 中，您可以使用表单元素 (<form>)、带 <label> 的 <input> 和提交 <button> 来构建此表单。

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

什么是表单元素？

表单元素由开始标记 <form>、开始标记中定义的可选属性和结束标记 </form> 组成。

在开始标记和结束标记之间，您可以添加表单元素，例如 <input> 和 <textarea>，以实现不同类型的用户输入。您将在下一单元中详细了解表单元素。

数据是在哪里处理的？

当用户提交表单（例如，点击提交按钮）时，浏览器会发出请求。脚本可以响应该请求并处理数据。

默认情况下，请求会发送到显示表单的网页。

假设您希望在 https://web.dev 运行脚本来处理表单数据。您会怎么做？ 在 CodePen 上试用一下！

      <form action="https://example.com/animals"></form>

上述示例向 https://example.com/animals 发出了请求。example.com 后端的脚本可以处理对 /animals 的请求并处理表单中的数据。

数据是如何转移的？

默认情况下，表单数据会以 GET 请求的形式发送，提交的数据会附加到网址中。如果用户在上述示例中提交“frog”，浏览器会向以下网址发出请求：

https://example.com/animals?animal=frog

在这种情况下，您可以通过从网址获取数据来访问前端或后端的数据。

如果您愿意，可以通过更改 method 属性来指示表单使用 POST 请求。

<form method="post">
...
</form>

使用 POST 时，数据会包含在请求正文中。

数据不会显示在网址中，只能通过前端或后端脚本访问。

您应该使用哪种方法？

这两种方法都有各自的适用场景。

对于处理敏感数据的表单，请使用 POST 方法。数据经过加密（如果您使用 HTTPS），并且只有处理请求的后端脚本才能访问。数据不会显示在网址中。一个常见的示例是登录表单。

如果数据可共享，您可以使用 GET 方法。 然后，由于数据包含在网址中，因此会添加到浏览器历史记录中。 搜索表单通常会使用此属性。这样一来，您就可以为搜索结果页添加书签。

现在，您已经了解了表单元素本身，接下来该了解表单字段，以便让表单具有互动性。

检验您的掌握情况

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

资源

<form> 元素。