HTML DOM Form method Thuộc tính

Thuộc tính phương thức biểu mẫu DOM HTML được liên kết với thuộc tính phương thức của một phần tử biểu mẫu. Thuộc tính này được sử dụng để chỉ định cách dữ liệu biểu mẫu sẽ được gửi đến máy chủ. Địa chỉ để gửi dữ liệu được chỉ định bởi thuộc tính action. Thuộc tính này đặt hoặc nhận giá trị thuộc tính phương thức biểu mẫu.

Cú pháp

Sau đây là cú pháp cho -

Đặt thuộc tính phương thức -

formObject.method = get|post;

Ở đây, get là phương thức mặc định và nối dữ liệu biểu mẫu vào url. Ví dụ:URL? Name =value &name =value. Nó thường không an toàn và có thể được sử dụng cho dữ liệu không riêng tư. Người dùng có thể thấy dữ liệu đang được gửi bằng cách nhìn vào chuỗi url.

Bài đăng phương thức thứ hai gửi dữ liệu dưới dạng giao dịch bài đăng HTTP và thường được bảo mật, vì không ai có thể xem dữ liệu khi nó đang được gửi đến máy chủ.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính phương thức biểu mẫu -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Form method Thuộc tính

Khi nhấp vào nút GỬI và xem URL -

127.0.0.1:5500/sample_page.php

Khi nhấp vào nút “Thay đổi” -

HTML DOM Form method Thuộc tính

Khi nhấp vào nút GỬI ngay và xem liên kết.

127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một biểu mẫu có id =“FORM1”, method =“post” và giá trị thuộc tính action được đặt thành “/sample_page.php”. Tại đây, bài đăng giá trị thuộc tính phương thức đảm bảo rằng dữ liệu biểu mẫu được chuyển một cách an toàn và không bị mọi người xem. Biểu mẫu chứa hai trường nhập với văn bản loại và một nút gửi để gửi dữ liệu biểu mẫu đến máy chủ.

<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>

Sau đó, chúng tôi đã tạo một nút “Thay đổi” sẽ thực thi hàm changeMethod () khi người dùng nhấp vào.

<button onclick="ChangeMethod()">Change</button>

Hàm ChangeMethod () nhận phần tử biểu mẫu bằng cách sử dụng phương thức getElementById () của đối tượng tài liệu và đặt giá trị thuộc tính phương thức của nó thành “get”. Thay đổi giá trị thành “get” có nghĩa là dữ liệu người dùng hiện có thể được hiển thị trong url. Bằng cách sử dụng thuộc tính innerHTML của đoạn văn có id “Mẫu”, chúng tôi hiển thị văn bản dự định về sự thay đổi này -

function ChangeMethod() {
   document.getElementById("FORM1").method="get";
   document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}