迹忆客 专注技术分享

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

JavaScript 中的表单 action 属性

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

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

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

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

JavaScript 中的表单 action 属性

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

语法:

<form action="URL">

action 属性值

  1. 绝对 URL - 它指向另一个网站(例如 action="https://www.delftstack.com/tutorial/javascript"
  2. 相对 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>

在上面的示例中,onsubmit 事件用于提交表单数据,而不是 form action 属性。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中闪烁文本

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。

在 JavaScript 中高亮显示文本

发布时间:2024/03/22 浏览次数:103 分类:JavaScript

本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法,将使用代码段详细说明。

在 JavaScript 中创建哔声

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

JavaScript 不具有任何直接的方法或属性来警告哔声或在特定函数上产生任何声音。但是该任务可以通过添加音频源并使用 JavaScript 音频功能使用 HTML 标记来完成。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便