Thuộc tính method của HTML <form>

Thẻ <form> HTML

Định nghĩa và cách sử dụng

method Thuộc tính quy định cách gửi dữ liệu biểu mẫu (dữ liệu biểu mẫu sẽ được gửi đến trang được chỉ định bởi thuộc tính action).

Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (sử dụng method="get") hoặc dưới dạng giao dịch HTTP POST (sử dụng method="post")

Giới thiệu về GET:

  • Chú thích dữ liệu biểu mẫu dưới dạng cặp tên/giá trị và thêm vào URL
  • URL có giới hạn về độ dài (khoảng 3000 ký tự)
  • Đừng sử dụng GET để gửi dữ liệu nhạy cảm! (Sẽ hiển thị trong URL)
  • Rất hữu ích cho việc người dùng muốn thêm kết quả vào dấu trang của biểu mẫu
  • GET phù hợp hơn với dữ liệu không an toàn, chẳng hạn như chuỗi tìm kiếm trong Google.

Giải thích về POST:

  • Gắn dữ liệu biểu mẫu vào正文 yêu cầu HTTP (dữ liệu sẽ không hiển thị trong URL).
  • Không có giới hạn về kích thước.
  • Biểu mẫu gửi bằng POST không thể được thêm vào dấu trang.

Mô hình

Ví dụ 1

Gửi biểu mẫu bằng phương pháp "get":

<form action="/action_page.php" method="get">
  <label for="fname">Tên:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Họ:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Gửi">
</form>

Thử ngay

Ví dụ 2

Gửi biểu mẫu bằng phương pháp "post":

<form action="/action_page.php" method="post">
  <label for="fname">Tên:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Họ:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Gửi">
</form>

Thử ngay

Cú pháp

<form method="get|post">

Giá trị thuộc tính

Giá trị Mô tả
get Mặc định. Gắn dữ liệu biểu mẫu dưới dạng cặp tên/giá trị vào URL: URL?name=value&name=value.
post Gửi dữ liệu biểu mẫu dưới dạng giao dịch HTTP POST.

Giải thích thuộc tính method

Trình duyệt gửi dữ liệu trong biểu mẫu đến máy chủ để xử lý bằng phương pháp được thiết lập trong thuộc tính method. Có hai phương pháp: phương pháp POST và phương pháp GET.

Nếu sử dụng phương pháp POST, trình duyệt sẽ gửi dữ liệu theo hai bước sau. Đầu tiên, trình duyệt sẽ thiết lập liên hệ với máy chủ xử lý biểu mẫu được chỉ định trong thuộc tính action, sau khi thiết lập kết nối, trình duyệt sẽ gửi dữ liệu đến máy chủ bằng phương pháp truyền tải phân đoạn.

Ở máy chủ, khi ứng dụng kiểu POST bắt đầu thực thi, nên đọc các tham số từ một vị trí đánh dấu, và khi đọc được tham số, trước khi ứng dụng có thể sử dụng các giá trị biểu mẫu này, cần phải giải mã các tham số. Máy chủ cụ thể của người dùng sẽ chỉ định rõ ràng ứng dụng nên chấp nhận các tham số này như thế nào.

Trường hợp khác là sử dụng phương pháp GET, lúc này trình duyệt sẽ thiết lập kết nối với máy chủ xử lý biểu mẫu, sau đó gửi tất cả dữ liệu biểu mẫu trong một bước truyền tải: trình duyệt sẽ gắn dữ liệu trực tiếp sau URL action của biểu mẫu. Hai phần này được phân cách bằng dấu hỏi chấm.

Mỗi trình duyệt đều có thể truyền thông tin biểu mẫu bằng bất kỳ phương pháp nào trên, nhưng có một số máy chủ chỉ chấp nhận dữ liệu từ một phương pháp. Bạn có thể chỉ định phương pháp mà máy chủ xử lý dữ liệu trong thuộc tính method (phương pháp) của thẻ <form>, để xác định là POST hay GET.

POST hay GET?

Nếu máy chủ xử lý biểu mẫu hỗ trợ cả phương pháp POST và GET, bạn nên chọn phương pháp nào? Dưới đây là một số quy tắc liên quan:

  • Nếu bạn muốn đạt được hiệu suất truyền biểu mẫu tốt nhất, bạn có thể sử dụng phương pháp GET để gửi biểu mẫu nhỏ với một số trường ngắn.
  • Một số hệ điều hành máy chủ khi xử lý các tham số lệnh có thể truyền ngay lập tức cho ứng dụng sẽ giới hạn số lượng và độ dài, trong trường hợp này, đối với các biểu mẫu có nhiều trường hoặc các trường văn bản dài, bạn nên sử dụng phương pháp POST để gửi.
  • Nếu bạn không có kinh nghiệm viết ứng dụng xử lý biểu mẫu server-side, bạn nên chọn phương pháp GET. Nếu sử dụng phương pháp POST, bạn sẽ phải làm thêm công việc đọc và giải mã, điều này có thể không khó nhưng bạn có thể không muốn xử lý những vấn đề này.
  • Nếu bảo mật là vấn đề, chúng tôi khuyên bạn nên chọn phương pháp POST. Phương pháp GET sẽ đặt các tham số biểu mẫu trực tiếp vào URL của ứng dụng, điều này cho phép những người theo dõi mạng dễ dàng bắt chúng và có thể trích xuất chúng từ các tệp nhật ký của máy chủ. Nếu các tham số bao gồm thông tin nhạy cảm như số thẻ tín dụng, điều này có thể vô tình đe dọa an toàn của người dùng. Còn ứng dụng POST không có lỗ hổng bảo mật, ít nhất có thể sử dụng mã hóa để truyền tải các tham số như một giao dịch riêng biệt cho máy chủ xử lý.
  • Nếu bạn muốn gọi ứng dụng server-side ngoài biểu mẫu và bao gồm quá trình truyền đạt tham số, bạn nên sử dụng phương pháp GET, vì phương pháp này cho phép bao gồm biểu mẫu như một phần của URL. Ngược lại, các ứng dụng với phong cách POST lại mong muốn có một quá trình truyền tải bổ sung từ trình duyệt, mà nội dung truyền tải không thể được coi là nội dung của thẻ <a> truyền thống.

Truyền đạt tham số rõ ràng

Một số gợi ý trước đó cũng có thể được coi là một số giải thích nhất định cho việc chọn cách này. Giả sử bạn có một biểu mẫu rất đơn giản, chỉ bao gồm hai tham số x và y. Khi mã hóa giá trị của các yếu tố này, chúng có dạng sau:

x=28&y=66

Nếu biểu mẫu sử dụng method=GET, thì URL để truy cập ứng dụng server-side sẽ như sau:

http://www.example.com/example/program?x=28&y=66

Bất kỳ lúc nào chúng ta cũng có thể tạo một thẻ <a> truyền thống, sử dụng nó để gọi biểu mẫu có các tham số cần thiết, dưới dạng sau: 

<a href="http://www.example.com/example/program?x=28&y=66">

Vấn đề duy nhất là ký hiệu & dùng để phân tách tham số cũng là ký hiệu chèn trong ký hiệu thực thể. Nếu bạn đặt ký hiệu & trong thuộc tính href của thẻ <a>, trình duyệt sẽ thay thế ký tự sau nó bằng ký hiệu thực thể tương ứng.

Để tránh trường hợp này, chúng ta phải thay thế ký hiệu & bằng đối tượng tương đương của nó, tức là thay thế bằng "&" hoặc "&". Sau khi thay thế, ví dụ trên của việc truy cập ứng dụng máy chủ không phải là biểu mẫu sẽ như sau:

<a href="http://www.example.com/example/program?x=28&y=66">

Do như vậy vẫn không thể sử dụng ký hiệu & trong URL và có thể gây ra sự nhầm lẫn trong tương lai, vì vậy chúng tôi khuyến khích máy chủ cũng có thể chấp nhận dấu chấm phẩy (;) làm ký hiệu phân tách tham số. Bạn cũng có thể xem tài liệu hướng dẫn của máy chủ của mình để biết máy chủ có hỗ trợ chức năng này hay không.

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Thẻ <form> HTML