Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 表单属性


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


Action 属性

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

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

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

示例

提交时,将表单数据发送到“action_page.php”

<form action="/action_page.php">
  <label for="fname">姓氏:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">名字:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="提交">
</form>
尝试一下 »

提示: 如果省略了 action 属性,则操作将设置为当前页面。


Target 属性

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

target 属性可以具有以下值之一

描述
_blank 响应显示在新窗口或选项卡中
_self 响应显示在当前窗口中
_parent 响应显示在父框架中
_top 响应显示在窗口的整个主体中
framename 响应显示在命名 iframe 中

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

示例

在此,提交的结果将在新的浏览器选项卡中打开

<form action="/action_page.php" target="_blank">
尝试一下 »

Method 属性

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

表单数据可以作为 URL 变量(使用 method="get")或作为 HTTP POST 事务(使用 method="post")发送。

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

示例

此示例在提交表单数据时使用 GET 方法

<form action="/action_page.php" method="get">
尝试一下 »

示例

此示例在提交表单数据时使用 POST 方法

<form action="/action_page.php" method="post">
尝试一下 »

关于 GET 的说明

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

关于 POST 的说明

  • 将表单数据附加到 HTTP 请求的主体中(提交的表单数据不会显示在 URL 中)
  • POST 没有大小限制,可用于发送大量数据。
  • 使用 POST 提交的表单不能添加书签

提示: 如果表单数据包含敏感信息或个人信息,请始终使用 POST!



Autocomplete 属性

autocomplete 属性指定表单是否应该启用自动完成。

当自动完成打开时,浏览器会根据用户之前输入的值自动完成值。

示例

启用自动完成的表单

<form action="/action_page.php" autocomplete="on">
尝试一下 »

Novalidate 属性

novalidate 属性是布尔属性。

存在时,它指定在提交时不应验证表单数据(输入)。

示例

具有 novalidate 属性的表单

<form action="/action_page.php" novalidate>
尝试一下 »


所有 <form> 属性列表

属性 描述
accept-charset 指定用于表单提交的字符编码
action 指定在提交表单时将表单数据发送到何处
autocomplete 指定表单是否应该启用自动完成
enctype 指定在将表单数据提交到服务器时如何对表单数据进行编码(仅适用于 method="post")
method 指定发送表单数据时使用的 HTTP 方法
名称 指定表单的名称
novalidate 指定提交表单时不进行验证
rel 指定链接资源与当前文档之间的关系
target 指定在提交表单后接收到的响应显示的位置

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.