Thuộc tính action của form HTML định nghĩa điều gì sẽ xảy ra với dữ liệu khi một form được gửi (submit) trên trang web. Giá trị của thuộc tính action nên là URL của tài nguyên web sẽ xử lý nội dung của form.
Khi xây dựng form và yêu cầu dữ liệu trên trang web hoặc ứng dụng web của bạn, bạn thường muốn làm gì đó với dữ liệu đó, đúng không? Đó là lúc thuộc tính action của form phát huy tác dụng.
Bạn nên biết kiến thức cơ bản về tạo form trong HTML. Bạn cơ bản bọc nội dung form trong phần tử <form>. Trong thẻ mở có một vài thuộc tính chúng ta có thể dùng, và một trong số đó là action.
Thuộc tính action được dùng để chỉ định nơi chúng ta muốn gửi dữ liệu form khi form được submit. Vì vậy giá trị của action là trang sẽ xử lý form.
Thuộc tính action của form HTML nói rõ URL sẽ xử lý nội dung của một form. Bạn nên chắc chắn tài nguyên web mà thuộc tính action trỏ đến chấp nhận bất kỳ phương thức (method) nào bạn đã chỉ định trong thuộc tính "method" của mình.
Hãy xem cú pháp của thuộc tính action:
<form action="/submit.php"> </form>
Thuộc tính action xuất hiện giữa thẻ mở <form>. Thuộc tính này thường dùng cùng với thuộc tính method.
Mặc định, thuộc tính method được đặt là "get". Điều này có nghĩa là form của bạn sẽ gửi dữ liệu qua yêu cầu HTTP GET khi được submit. Bạn có thể thay đổi method bằng cách chỉ định "method='post'" trong thẻ mở <form> của mình.
Dữ liệu từ form được gửi đến URL "action" khi nút submit được nhấp.
Ví dụ Form action HTML
Hãy xem một ví dụ:
<form action="process.html" method="get"> <label for="username">User</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
Ở trên, action đang gửi dữ liệu username và email đến trang tên process.html. Dữ liệu username và email có kiểu input "text". Chúng ta định nghĩa nút với kiểu input "submit". Khi nhấp, nút này sẽ gửi dữ liệu của chúng ta đến URL "action".
Bây giờ hãy cắm ví dụ form trên vào một file HTML thực tế. Sau đó tạo file khác tên process.html trong cùng thư mục. File này nên có nội dung sau:
<html> <head> <meta charset="UTF-8"> <title>Process</title> </head> <body>This is the destination process page</body> </html>
Code này định nghĩa một trang web đơn giản hiển thị một đoạn văn bản khi trang được tải. Quay lại web form chúng ta định nghĩa trước đó và điền nó:
Bây giờ nhấp submit. Chú ý chúng ta tự động được đưa đến trang process.html! Sau đó, bạn có chú ý thanh địa chỉ URL chưa, tất cả dữ liệu phụ kia là gì? Dữ liệu sau ký hiệu "?" là các tham số truy vấn (query parameters), và vì chúng ta chỉ định request là GET, dữ liệu đang được truyền như tham số truy vấn.
Với ví dụ này bạn có thể nghĩ nó không quá hữu ích. Đúng vậy. Thường thì thuộc tính action được dùng để gửi nội dung form đến các trang server. Ví dụ, chúng ta có thể dùng file PHP tên process.php.
File process.php này sau đó sẽ làm tất cả "phép màu" với dữ liệu. Trang này có thể lưu dữ liệu của chúng ta vào cơ sở dữ liệu, hoặc đăng ký bạn cho sự kiện yêu thích, tùy bạn. PHP là ngôn ngữ kịch bản máy chủ mạnh mẽ, thường dùng trong phát triển web. Nếu bạn từng dùng WordPress, có thể dữ liệu được xử lý là qua PHP.
Để học thêm về PHP, xem hướng dẫn "Cách học PHP" của chúng tôi.
Thuộc tính action có bắt buộc không?
Quay lại HTML4, câu trả lời sẽ là có. Ngày nay với HTML5, bạn không bắt buộc phải chỉ định thuộc tính action. Nếu bạn có thẻ form không có thuộc tính action thì dữ liệu sẽ được gửi đến chính trang của nó.
Tại sao chúng ta làm điều này? Với sự ra đời của ứng dụng trang đơn (Single Page Applications - SPA), chúng ta có thể muốn xử lý dữ liệu form bằng JavaScript. Hoặc chúng ta có thể muốn xử lý dữ liệu bằng framework khác như React / Angular.
Nếu dùng Vanilla JavaScript, chúng ta thường làm điều này bằng cách thêm event listener JavaScript cho khi form đã được submit.
Kết luận
Thuộc tính action của form HTML định nghĩa điều gì xảy ra với nội dung của một form khi form được submit. Thuộc tính action chấp nhận một URL làm đối số.
Bạn quan tâm đến việc trở thành nhà phát triển web? Xem hướng dẫn hoàn chỉnh "Cách học HTML" của chúng tôi. Bạn sẽ tìm thấy lời khuyên chuyên gia về học HTML cũng như danh sách các khóa học trực tuyến hàng đầu và tài nguyên học tập.