資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM 表單 method 屬性
HTML DOM 表單 method 屬性與表單元素的 method 屬性相關聯。此屬性用於指定表單資料應如何傳送到伺服器。傳送資料的地址由 action 屬性指定。此屬性設定或獲取表單 method 屬性值。
語法
以下是語法：
設定 method 屬性：
formObject.method = get|post;
這裡，get 是預設方法，它將表單資料附加到 URL 中。例如：URL?name=value&name=value。它通常不安全，可用於非隱私資料。使用者可以透過檢視 URL 字串來檢視傳送的資料。
第二種方法 post 將資料作為 HTTP post 事務傳送，通常是安全的，因為在資料傳送到伺服器期間，沒有人可以看到資料。
示例
讓我們來看一個表單 method 屬性的示例：
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the method attribute value of the form above by clicking the below button</p>
<button onclick="ChangeMethod()">Change</button>
<p id="Sample"></p>
</body>
</html>輸出
這將產生以下輸出：
單擊“提交”按鈕並檢視 URL：
127.0.0.1:5500/sample_page.php
單擊“更改”按鈕：
現在單擊“提交”按鈕並檢視連結。
127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22
在以上示例中：
我們首先建立了一個表單，其 id 為“FORM1”，method 為“post”，action 屬性值為“/sample_page.php”。這裡 method 屬性值 post 確保表單資料安全傳輸，不會被所有人檢視。表單包含兩個型別為文字的輸入欄位和一個提交按鈕，用於將表單資料提交到伺服器。
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> </form>
然後，我們建立了一個“更改”按鈕，當用戶單擊它時，將執行 changeMethod() 函式。
<button onclick="ChangeMethod()">Change</button>
ChangeMethod() 函式使用 document 物件的 getElementById() 方法獲取表單元素，並將其 method 屬性值設定為“get”。將其值更改為“get”意味著使用者資料現在可以顯示在 URL 中。使用 id 為“Sample”的段落的 innerHTML 屬性，我們顯示了關於此更改的預期文字：
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
更新於： 2019年8月19日
137 次檢視
廣告