Thuộc tính method của Form trong HTML DOM

Thuộc tính method của Form trong HTML DOM liên quan đến thuộc tính method của phần tử form. Thuộc tính này dùng để chỉ định cách dữ liệu form nên được gửi đến server. Địa chỉ gửi dữ liệu được chỉ định bởi thuộc tính action. Thuộc tính này thiết lập hoặc lấy giá trị method của form.

Cú pháp

Cú pháp để thiết lập thuộc tính method:

formObject.method = get|post;

Trong đó:

• get là phương thức mặc định, nối dữ liệu form vào URL. Ví dụ: URL?name=value&name=value. Thường không an toàn, dùng cho dữ liệu không riêng tư. Người dùng có thể thấy dữ liệu gửi đi bằng cách nhìn chuỗi URL.
• post gửi dữ liệu dưới dạng giao dịch HTTP post và thường an toàn hơn, vì không ai có thể nhìn thấy dữ liệu trong khi nó được gửi đến server.

Ví dụ

Ví dụ minh họa cho thuộc tính method của Form:

<!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 = "Phương thức form đã thay đổi từ 'post' sang 'get'"; 
    } 
</script> </head> <body> 
<h1>Ví dụ thuộc tính length của Form</h1> 
<form id="FORM1" method="post" action="/sample_page.php"> 
    <label>Tên người dùng <input type="text" name="usrN"></label> <br><br> 
    <label>Tuổi <input type="text" name="Age"></label> <br><br> 
    <input type="submit" value="GỬI"> 
</form> 
<p>Thay đổi giá trị thuộc tính method của form trên bằng cách nhấn nút dưới đây</p> 
<button onclick="ChangeMethod()">Thay đổi</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Khi nhấn nút SUBMIT và xem URL với method="post": URL không hiển thị dữ liệu form.

Sau khi nhấn nút "Thay đổi" (chuyển sang get) và nhấn SUBMIT: URL hiển thị dữ liệu form như 127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22.

Giải thích ví dụ

Tạo form với id="FORM1", method="post" và action="/sample_page.php". Method="post" đảm bảo dữ liệu form được truyền an toàn. Form chứa hai trường input type text và nút submit.

Tạo nút "Thay đổi" sẽ thực thi hàm ChangeMethod() khi được nhấn:

<button onclick="ChangeMethod()">Thay đổi</button>

Hàm ChangeMethod() lấy phần tử form bằng getElementById() và thiết lập thuộc tính method thành "get". Thay đổi này cho phép dữ liệu người dùng hiển thị trên URL. Sử dụng innerHTML của đoạn văn id="Sample" để hiển thị thông báo:

function ChangeMethod() { 
    document.getElementById("FORM1").method = "get"; 
    document.getElementById("Sample").innerHTML = "Phương thức form đã thay đổi từ 'post' sang 'get'"; 
}