通过此表单简介,了解在网络上使用表单的基础知识 元素。
假设您想在自己的网站上问问他们最喜欢的动物是什么。 首先,您需要一种收集数据的方法。
如何使用 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
运行某个脚本
来处理表单数据,您会怎么做?
试试看!
您可以使用 action
属性选择脚本的位置。
<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-element>
<form>
</form>
<form-container>
您可以使用哪个属性来定义 <form>
的处理位置?
where
url
action
href
默认的请求方法是什么?
POST
GET