码农教程 - 一技在手,衣食无忧! tools

HTML 表单属性

❮ 上一节 下一节 ❯

本章介绍 HTML 的不同属性<form>元素。

动作属性

这个action属性定义提交表单时要执行的操作。

通常，当用户单击提交按钮时，表单数据会发送到服务器上的文件。

在下面的示例中，表单数据被发送到名为"action_page.html" 的文件。该文件包含一个处理表单数据的服务器端脚本：

示例

提交后，将表单数据发送至"action_page.html"：

<form action="/action_page.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
亲自试一试 »

提示：如果action省略属性，操作设置为当前页面。

目标属性

这个target属性指定在何处显示提交表单后收到的响应。

这个target属性可以具有以下值之一：

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

默认值为_self这意味着响应将在当前窗口中打开。

示例

在这里，提交的结果将在新的浏览器选项卡中打开：

<form action="/action_page.html" target="_blank">
亲自试一试 »

方法属性

这个method属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量发送（使用method="get"）或作为 HTTP post 事务（带有method="post"）。

提交表单数据时默认的HTTP方法是GET。

示例

本例在提交表单数据时使用GET方法：

<form action="/action_page.html" method="get">
亲自试一试 »

示例

本例在提交表单数据时使用POST方法：

<form action="/action_page.html" method="post">
亲自试一试 »

GET 的注意事项：

  • 将表单数据以名称/值对的形式附加到 URL
  • 切勿使用 GET 发送敏感数据！ （提交的表单数据在URL中可见！）
  • URL 的长度有限（2048 个字符）
  • 对于用户想要为结果添加书签的表单提交很有用
  • GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

  • 将表单数据附加到 HTTP 请求正文中（提交的表单数据不会显示在 URL 中）
  • POST没有大小限制，可以用来发送大量数据。
  • 使用 POST 提交的表单无法添加书签

提示：如果表单数据包含敏感或个人信息，请始终使用 POST！

自动完成属性

这个autocomplete属性指定表单是否应打开或关闭自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动完成值。

示例

具有自动完成功能的表单：

<form action="/action_page.html" autocomplete="on">
亲自试一试 »

Novalidate 属性

这个novalidate属性是一个布尔属性。

如果存在，它指定提交时不应验证表单数据（输入）。

示例

具有 novalidate 属性的表单：

<form action="/action_page.html" novalidate>
亲自试一试 »

HTML练习

通过练习测试一下

练习:

添加提交按钮，并指定表单应转到"/action_page.html"。

<form ="/action_page.html">
Name: <input type="text" name="name">
< >
</form>

开始练习

所有 <form> 属性的列表

属性 描述
接受字符集 指定用于表单提交的字符编码
行动 指定提交表单时将表单数据发送到的位置
自动完成 指定表单是否应打开或关闭自动完成功能
编码类型 指定将表单数据提交到服务器时应如何编码（仅适用于 method="post"）
方法 指定发送表单数据时使用的 HTTP 方法
姓名 指定表单的名称
不验证 指定提交时不应验证表单
相对 指定链接资源和当前文档之间的关系
目标 指定在何处显示提交表单后收到的响应

❮ 上一节 下一节 ❯