数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中查找表单的 action 属性和 method 属性？
在本文中，我们将学习如何使用 JavaScript 中的适当示例来查找表单的 action 属性和 method 属性。
在 HTML 中，存在一个 <form> 元素，它有一些属性：input、label、文本区域、select、name、target。表单的 action 和 method 属性用于返回这些值。action 属性还指定在提交表单时将表单数据发送到哪里。
为了更好地理解这个概念，让我们看看一些使用 action 属性和 method 属性完成给定任务的示例。
使用 action 属性
JavaScript action 属性将指定在提交表单时执行的操作。
语法
下面显示了显示表单 action 属性的语法。
document.getElementById('formID').action;
我们可以在表单中设置或获取 action 属性的值。action 属性指定在提交表单时执行的操作。URL 作为 action 属性内的值提供。URL 可以是绝对 URL（包含域名）或相对 URL（引用网站内的文件）。
示例 1
以下是一个显示方法 action 属性的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="https://tutorialspoint.com/index.htm" target="_self">
Full name: <input type="text" name="fname" ><br>
password: <input type="password" name="password" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'The value of the action attribute is : '+document.getElementById('myForm').action;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 2
以下是一个为表单的 action 属性设置值的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="https://tutorialspoint.com/index.htm" target="_self">
Full name: <input type="text" name="fname" ><br>
password: <input type="password" name="password" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('myForm').action = 'https://tutorialspoint.com/codingground.htm';
document.getElementById('form').innerHTML = 'The value of the action attribute is changed to : 'document.getElementById('myForm').action;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
使用 method 属性
下面显示了显示表单 method 属性的语法。
Document.getElementById('formID').method;
提交表单的 HTTP 方法。可能的方法值为 post、get 和 dialog。
get 方法 − 这是默认方法。表单数据附加到 action 内的 URL，并且提交的表单数据对用户可见。它不安全。
post 方法 − 表单数据附加到 HTTP 请求正文，并且提交的表单数据对用户不可见。
dialog 方法 − 在这里，表单位于对话框内。
示例 1
让我们来看一个显示get方法用法的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="/newPage.htm/" method="get" target="_self">
Full name: <input type="text" name="fname" placeholder="Enter Full name"><br>
password: <input type="password" name="password" placeholder="Enter password" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'The value of the method attribute is : '+document.getElementById('myForm').method;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
点击提交按钮后，将生成以下输出。使用get方法可以看到名称和密码。
示例 2
以下是一个显示post方法用法的示例程序。
<!DOCTYPE html>
<html>
<head>
<title>To find the action attribute and method of a form in JavaScript </title>
</head>
<body>
<div id="form-div" style="text-align : center">
<form id="myForm" name="Login Form" action="/newPage.htm/" method="post" target="_self">
Full name: <input type="text" name="fname" placeholder="Enter Full name"><br>
password: <input type="password" name="password" placeholder="Enter password" ><br>
<input type="submit" value="Submit">
</form>
<p id="form"></p>
</div>
<script>
document.getElementById('form').innerHTML = 'The value of the method attribute is : '+document.getElementById('myForm').method;
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
点击提交按钮后，将生成以下输出。使用 post 方法，表单数据对用户不可见。
2K+ 阅读量
