使用表单从用户处获取数据

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

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

假设您想询问网站访问者他们最喜欢的动物。第一步，您需要一种收集数据的方式。

如何使用 HTML 实现此目的？

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

什么是 form 元素？

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

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

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

数据在哪里处理？

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

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

假设您希望在 https://webdev.ac.cn 上运行的脚本处理表单数据，您将如何操作？试用一下！

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

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

数据如何传输？

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

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

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

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

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

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

数据在 URL 中不可见，并且只能从前端或后端脚本访问。

应使用哪种方法？

这两种方法都有各自的用例。

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

如果数据是可共享的，则可以使用 GET 方法。这样，数据将添加到您的浏览器历史记录中，因为它包含在 URL 中。搜索表单通常使用此方法。这样，您可以将搜索结果页面添加为书签。

现在您已经了解了 form 元素本身，接下来可以学习表单字段，使您的表单具有交互性。

检查您的理解情况

测试您对 form 元素的了解情况

资源

<form> 元素.