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 |