資料結構
網路
關係型資料庫管理系統
作業系統
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.tw/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.tw/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.tw/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+ 閱讀量
