Nắm vững thuộc tính hành động của biểu mẫu HTML:Hướng dẫn từng bước

Thuộc tính hành động của biểu mẫu HTML xác định điều gì sẽ xảy ra với dữ liệu khi biểu mẫu được gửi trên trang web. Giá trị của thuộc tính hành động phải là URL của tài nguyên web sẽ xử lý nội dung của biểu mẫu.

Khi xây dựng biểu mẫu 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 của mình, phải không? Đây là lúc thuộc tính hành động của biểu mẫu phát huy tác dụng.

Bạn nên biết những điều cơ bản về tạo biểu mẫu trong HTML. Về cơ bản, bạn bọc nội dung biểu mẫu của mình trong phần tử

. Trong thẻ mở có một số thuộc tính mà chúng ta có thể sử dụng và một trong số đó là hành động.

Thuộc tính hành động được sử dụng để chỉ định nơi chúng tôi muốn gửi dữ liệu biểu mẫu khi biểu mẫu được gửi. Vì vậy giá trị của hành động là trang sẽ xử lý biểu mẫu.

Thuộc tính hành động của biểu mẫu HTML cho biết URL sẽ xử lý nội dung của biểu mẫu. Bạn nên đảm bảo tài nguyên web mà các điểm thuộc tính hành động chấp nhận bất kỳ phương thức nào bạn đã chỉ định trong thuộc tính “phương thức” của mình.

Chúng ta hãy xem cú pháp của thuộc tính hành động:

<form action="/submit.php">
 
</form>

Thuộc tính hành động xuất hiện giữa thẻ mở của chúng tôi. Thuộc tính này thường được sử dụng với thuộc tính phương thức.

Theo mặc định, thuộc tính phương thức được đặt thành “get”. Điều này có nghĩa là biểu mẫu của bạn sẽ gửi dữ liệu qua yêu cầu HTTP GET khi nó được gửi. Bạn có thể thay đổi phương thức bằng cách chỉ định “method=’post'” trong thẻ mở của mình.

Dữ liệu từ một biểu mẫu được gửi đến URL "hành động" khi nhấp vào nút gửi.

Ví dụ HTML về hành động biểu mẫu

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, hành động đang gửi tên người dùng và dữ liệu email đến một trang có tên là process.html. Tên người dùng và dữ liệu email có kiểu đầu vào là “văn bản”. Chúng tôi xác định một nút có loại đầu vào là “gửi”. Khi được nhấp vào, nút này sẽ gửi dữ liệu đến URL “hành động” của chúng tôi.

Bây giờ hãy cắm ví dụ về biểu mẫu ở trên vào một tệp HTML thực tế. Sau đó tạo một tệp khác có tên process.html trong cùng thư mục. Tệp này phải có nội dung sau:

<html>
 <head>
 <meta charset="UTF-8">
 <title>Process</title>
 </head>
 <body>This is the destination process page</body>
</html>

Mã này xác định một trang web đơn giản hiển thị một đoạn văn bản khi trang được tải. Hãy quay lại biểu mẫu web mà chúng ta đã xác định trước đó và điền vào:

Nắm vững thuộc tính hành động của biểu mẫu HTML:Hướng dẫn từng bước

Bây giờ bấm vào gửi. Lưu ý rằng chúng tôi đã tự động được đưa đến trang process.html! Sau đó, bạn có để ý thanh URL không, tất cả dữ liệu bổ sung đó là gì? Dữ liệu sau dấu “?” ký hiệu là các tham số truy vấn và vì chúng tôi đã chỉ định yêu cầu là GET nên dữ liệu sẽ được truyền dưới dạng tham số truy vấn.

Với ví dụ này, bạn có thể nghĩ rằng nó không hữu ích lắm. Đó là sự thật. Thông thường thuộc tính hành động được sử dụng để gửi nội dung biểu mẫu đến các trang máy chủ. Ví dụ:chúng ta có thể sử dụng tệp PHP có tên là process.php.

Process.php này sau đó sẽ thực hiện tất cả những điều kỳ diệu với dữ liệu. Trang này có thể lưu dữ liệu của chúng tôi vào cơ sở dữ liệu hoặc đăng ký cho bạn tham gia sự kiện yêu thích của bạn, bạn đặt tên cho nó. PHP là ngôn ngữ kịch bản máy chủ mạnh mẽ, thường được sử dụng trong phát triển web. Nếu bạn đã từng sử dụng WordPress, có thể dữ liệu đang được xử lý được thực hiện thông qua PHP.

Để tìm hiểu thêm về PHP, hãy xem hướng dẫn Cách học PHP của chúng tôi.

Thuộc tính hành động 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 cần phải chỉ định thuộc tính hành động. Nếu bạn có thẻ biểu mẫu không có thuộc tính hành động thì dữ liệu sẽ được gửi đến trang riêng của nó.

Tại sao chúng ta lại làm điều này? Với sự ra đời của các ứng dụng trang đơn (SPA), chúng tôi có thể muốn xử lý dữ liệu biểu mẫu của mình bằng JavaScript. Hoặc chúng tôi có thể muốn xử lý dữ liệu của mình bằng một khung khác như React / Angular.

Nếu sử dụng Vanilla JavaScript, chúng tôi thường thực hiện việc này bằng cách thêm trình xử lý sự kiện JavaScript khi biểu mẫu được gửi.

Kết luận

Thuộc tính hành động của biểu mẫu HTML xác định điều gì sẽ xảy ra với nội dung của biểu mẫu khi biểu mẫu được gửi. Thuộc tính hành động chấp nhận URL làm đối số.

Bạn có quan tâm đến việc trở thành một nhà phát triển web? Hãy xem hướng dẫn Cách học HTML đầy đủ của chúng tôi. Bạn sẽ tìm thấy lời khuyên của chuyên gia về cách học HTML cũng như danh sách các khóa học và tài nguyên học tập trực tuyến hàng đầu.