使用表单获取用户数据

通过此表单简介，了解在网络上使用表单的基础知识 元素。

假设您想在自己的网站上问问他们最喜欢的动物是什么。 首先，您需要一种收集数据的方法。

如何使用 HTML 来完成此操作？

在 HTML 中，您可以使用表单元素 (<form>) 进行构建。 一个 <input>，其 <label> 和一个提交 <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> 等表单元素 不同类型的用户输入 在下一单元中，您将详细了解表单元素。

数据在哪里处理？

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

默认情况下，系统会向显示表单的页面发出请求。

假设您想在 https://web.dev 运行某个脚本 来处理表单数据，您会怎么做？ 试试看！

<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> 元素。