Thuộc tính form HTML
Trong bài đọc này, chúng ta sẽ tìm hiểu các thuộc tính khác nhau cho phần tử HTML <form>.
Thuộc tính action
Thuộc tính action định nghĩa các hành động sẽ được thực hiện khi biểu mẫu được gửi.
Dữ liệu biểu mẫu sẽ được gửi đến file xử lý trên máy chủ web server khi người dùng nhấp vào nút gửi.
Trong ví dụ dưới đây, dữ liệu biểu mẫu được gửi đến một file có tên "action_page.php". File này chứa các tập lệnh (code) phía máy chủ để xử lý dữ liệu biểu mẫu và phản hồi dữ liệu sau khi xử lý cho người dùng
Ví dụ
<form action="action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>
Thuộc tính target
Các giá trị của thuộc tính target quy định cụ thể nơi để hiển thị các phản hồi của máy chủ sau khi biểu mẫu được gủi.
Thuộc tính target có một trong các giá trị sau:
| Value | Description |
|---|---|
| _blank | Nhận dữ liệu phản hồi trên cửa sổ window mới hay tab mới của trình duyệt |
| _self | Nhận dữ liệu phản hồi trên cửa sổ window hiện tại |
| _parent | Nhận dữ liệu phản hồi trên khung chứa form của thẻ cha |
| _top | Phản hồi được hiển thị trong toàn bộ phần nội dung của cửa sổ |
| framename | Phản hồi được hiển thị trong iframe có thuộc tính name trùng với thuộc tính này |
Ví dụ: Khi người dùng nhấp vào nút Submit, dữ liệu phản hồi sẽ nhận ở một trang mới
<form action="action_page.php" target="_blank">
Thuộc tính method
Thuộc tính mothod quy định cụ thể phương thức HTTP được sử dụng khi gửi dữ liệu biểu mẫu.
Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get") hoặc dưới dạng một phương thức truyền dữ liệu HTTP (với method="post").
Phương thức HTTP mặc định khi gửi dữ liệu biểu mẫu là GET.
Ví dụ: Sử dụng phương thức gửi dữ liệu là GET
<form action="action_page.php" method="get">
Ví dụ: Gửi dữ liệu biểu mẫu bằng phương thức POST
<form action="action_page.php" method="post">
Lưu ý về GET
- GET chèn thêm dữ liệu khi gửi biểu mẫu vào thanh URL, trong các cặp name/value
- KHÔNG BAO GIỜ sử dụng GET để gửi các dữ liệu nhạy cảm như thông tin password, thẻ tín dụng ...! (vì dữ liệu biểu mẫu đã gửi sẽ hiển thị trong thanh URL!)
- Độ dài của một URL bị giới hạn (2048 ký tự)
- Hữu ích cho việc gửi biểu mẫu mà khi đó người dùng muốn sử dụng kết quả trên thanh URL để truy vấn một dữ liệu khác
- GET tốt cho dữ liệu không an toàn, chẳng hạn như chuỗi truy vấn trong Google...
Lưu ý về POST
- POST sẽ thêm dữ liệu biểu mẫu khi gửi vào bên trong nội dung của yêu cầu HTTP (dữ liệu biểu mẫu đã gửi không được hiển thị trong URL)
- POST không có giới hạn về kích thước và có thể được sử dụng để gửi một lượng lớn dữ liệu.
- Không thể truy vấn dữ liệu khác bằng các nội dung gửi biểu mẫu bằng phương thức POST
Thuộc tính Novalidate
Thuộc tính novalidate là một thuộc tính kiểu boolean. Nó chỉ định dữ liệu biểu mẫu (đầu vào) sẽ không được xác thực khi được gửi.