HTML - action 属性

HTML action 属性用于 <form> 元素中，用于指定表单提交时应将表单数据发送到哪里。

此属性值可以被表单标签的 action 属性覆盖，这意味着如果我们使用 <input type = submit> 指定此属性，当用户提交表单时，它将根据表单标签的 action 属性源 URL 重定向，而不是根据 action 属性。

“action” 属性与 <form> 元素一起使用。当 <form> 元素中设置 method =dialog 属性时，将忽略此属性。

语法

<form action = "URL"></form>

应用于

下面列出的元素允许使用 HTML action 属性。

元素	描述
<form>	HTML <form> 标签用于指定输入字段。

HTML action 属性示例

以下是一些显示 action 属性的不同用法示例

带有现有 URL 的 Action 属性

在以下示例中，我们在 <form> 元素中使用 HTML “action” 属性来定义表单提交时要执行的操作。以下代码将在网页上生成一个包含输入字段和可点击按钮的输出。当用户点击按钮时，表单将成功提交。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'action' attribute</title>
   <style>
      form {
         width: 250px;
         padding: 10px;
         background-color: skyblue;
         border-radius: 10px;
      }

      input {
         padding: 10px;
         width: 200px;
      }

      button {
         padding: 10px;
         width: 100px;
         cursor: pointer;
      }
   </style>
</head>

<body>
   <!--HTML 'action' attribute-->
   <h3>HTML 'action' attribute</h3>
   <form action="welcome.html" method="GET">
      <h1>Login Page</h1>
      <input type="text" 
      placeholder="Username" 
      name="uname" 
      required>
      <br>
      <br>
      <input type="password"
         placeholder="Password" 
         name="password" 
         required>
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

带有错误 URL 的 Action 属性

考虑另一种情况，我们将使用表单标签的 action 属性并分配错误的 URL，该 URL 在提交表单时显示错误。以下代码将在网页上生成一个包含输入字段和可点击按钮的输出。当用户尝试提交表单时，由于我们提供的 URL，它将显示错误。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'action' attribute</title>
   <style>
      form {
         width: 330px;
         padding: 10px;
         background-color: skyblue;
         border-radius: 10px;
         color: white;
      }

      input {
         padding: 12px;
         width: 300px;
      }

      button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
      }

      form h1 {
         text-align: center;
         font-family: sans-serif;
         letter-spacing: 2px;
      }
   </style>
</head>

<body>
   <!--HTML 'action' attribute-->
   <h3>Example of the HTML 'action' attribute</h3>
   <form action="/action_page.php" method="GET">
      <h1>Login</h1>
      <input type="text" 
         placeholder="Username" 
         name="uname" 
         required>
      <br>
      <br>
      <input type="password" 
      placeholder="Password" 
      name="password" 
      required>
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

支持的浏览器

属性
action	是	是	是	是	是

html_attributes_reference.htm

打印页面