使用表单获取用户数据

查看表单元素简介,了解在网页上使用表单的基础知识。

假设您想要在网站上询问用户他们最喜欢的动物。首先,您需要找到一种方法来收集数据。

如何通过 HTML 实现这一目标?

在 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> 等表单元素。在下一单元中,您将详细了解表单元素

数据在哪里处理?

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

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

假设您需要一个在 https://web.dev 中运行的脚本来处理表单数据,您会如何执行此操作?试试看

切换答案

您可以使用 action 属性选择脚本的位置。

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

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

如何转移数据?

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

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

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

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

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

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

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

您应该使用哪种方法?

这两种方法都有相应的应用场景。

对于处理敏感数据的表单,请使用 POST 方法。数据会加密(如果您使用 HTTPS),并且只能由处理请求的后端脚本访问。相关数据不会在网址中显示。一个常见的示例是登录表单。

如果数据可共享,您可以使用 GET 方法。这样,当数据包含在网址中时,系统就会将其添加到浏览器历史记录中。 搜索表单通常会使用此功能。通过这种方式,您可以为搜索结果页添加书签。

至此,您已经了解了表单元素本身,接下来我们将介绍表单字段,了解如何让您的表单具有互动性。

检查您的掌握程度

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

表单元素的开始标记是什么样子?

</form>
几乎是 <form> 元素的结束标记。
<form-container>
再试一次!
<form>
🎉
<form-element>
再试一次!

您可以使用哪个属性来定义 <form> 的处理位置?

where
再试一次!
action
可以,action 属性定义 <form> 的处理位置。
href
再试一次!
url
再试一次!

默认的请求方法是什么?

GET
🎉
POST
再试一次!

资源

<form> 元素