HTML - action 属性

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

这个属性值可以被表单标签的动作属性覆盖，也就是说如果我们用 <input type = submit> 来指定这个属性，当用户提交表单时，它将根据表单标签的动作属性源URL进行重定向，而不是根据action属性。

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

语法


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

适用于

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

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

HTML 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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页