JavaScript 中的表单 action 属性

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中的表单 action 属性

作者：迹忆客最近更新：2024/03/22 浏览次数：

这篇文章解释了 JavaScript 的表单 action 属性。它访问表单，获取所有字段的值，验证表单数据，并将其发送到正确的目的地。让我们看看这些 action 属性是什么以及它们是如何工作的。

我们可以通过这种方式创建一个表单。

<form action="/signup" method="post" id="signup"> 
</form>

JavaScript 中的表单 `action` 属性

action 属性指定提交时将表单数据发送到何处。

语法：

<form action="URL">

`action` 属性值

绝对 URL - 它指向另一个网站（例如 action="https://www.delftstack.com/tutorial/javascript"）
相对 URL - 它指向网站内的文件（如 action="example.htm"）

使用 HTML 的表单 `action` 属性示例

将表单数据发送到给定链接以处理提交时的输入。

<form action="https://www.delftstack.com" method="get">
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname"><br><br>
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript 另一个使用表单 `action` 的示例

以下示例包含使用 form action 属性的 HTML。

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

<head>
	<title>Form action javascript</title>
	<style>
		form label 
		{
			display: inline-block;
			width: 100px;
		}

		form div 
		{
			margin-bottom: 10px;
		}
	</style>

</head>

<body>
	<div class="p-2">
		<form id="myForm">
			<div>
				<label>Name:</label>
				<input id="name" name="name" type="text">
			</div>
			<div>
				<label>Email:</label>
				<input id="email" name="email" type="email">
			</div>
			<div>
				<input id="submit" type="submit">
			</div>
		</form>
	</div>
</body>

<script>
	// setting action on window onload event
	window.onload = function () {
		setAction('action.php');
	};
	// this event is used to get form action as an alert which is set by setAction function by using getAction function
	document.getElementById('submit').addEventListener('click', function (e) {
		e.preventDefault();
		getAction();
	});
	// this function is used to set form action
	function setAction(action) {
		document.getElementById('myForm').action = action;
		return false;
	}
	// this function is used to get form action assigned by setAction function in an alert
	function getAction() {
		var action = document.getElementById('myForm').action ;
		alert(action);
	}
</script>

我们在上面的代码中使用 JavaScript 添加了自定义表单 action。

在 JavaScript 中使用表单 `action` 属性的另一种方法

当用户提交表单时，使用 onsubmit 事件可以获得相同的结果。

语法：

<element onsubmit="myScript">

例子：

<form onsubmit="myFunction()">
      <div>
        <label>Name:</label>
        <input id="name" name="name" type="text">
      </div>
      <div>
        <label>Email:</label>
        <input id="email" name="email" type="email">
      </div>
      <div>
        <input id="submit" type="submit">
      </div>
</form>