Sử dụng biểu mẫu để nhận dữ liệu từ người dùng

Hãy tìm hiểu kiến thức cơ bản về cách sử dụng biểu mẫu trên web qua phần giới thiệu về phần tử biểu mẫu.

Giả sử bạn muốn hỏi mọi người trên trang web của mình về loài động vật họ yêu thích. Bước đầu tiên, bạn cần có một cách để thu thập dữ liệu.

Bạn thực hiện việc này với HTML như thế nào?

Trong HTML, bạn có thể tạo tệp này bằng cách sử dụng phần tử biểu mẫu (<form>), <input> với <label> và gửi <button>.

Thành phần biểu mẫu là gì?

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Phần tử biểu mẫu bao gồm thẻ mở <form>, các thuộc tính tuỳ chọn được xác định trong thẻ mở và thẻ đóng </form>.

Giữa thẻ mở và thẻ đóng, bạn có thể bao gồm các phần tử biểu mẫu như <input> và <textarea> cho các loại hoạt động đầu vào khác nhau của người dùng. Bạn sẽ tìm hiểu thêm về phần tử biểu mẫu trong học phần tiếp theo.

Dữ liệu được xử lý ở đâu?

Khi biểu mẫu được gửi (ví dụ: khi người dùng nhấp vào nút Submit (Gửi)), trình duyệt sẽ đưa ra yêu cầu. Tập lệnh có thể phản hồi yêu cầu đó và xử lý dữ liệu.

Theo mặc định, yêu cầu sẽ được gửi đến trang hiển thị biểu mẫu.

Giả sử bạn muốn một tập lệnh chạy tại https://web.dev để xử lý dữ liệu biểu mẫu – bạn sẽ thực hiện bằng cách nào? Hãy dùng thử!

<form action="https://example.com/animals">
...
</form>

Ví dụ trước đưa ra một yêu cầu đến https://example.com/animals. Tập lệnh trên phần phụ trợ example.com có thể xử lý các yêu cầu đến /animals và xử lý dữ liệu từ biểu mẫu.

Dữ liệu được chuyển như thế nào?

Theo mặc định, dữ liệu biểu mẫu được gửi dưới dạng yêu cầu GET, trong đó dữ liệu đã gửi sẽ được thêm vào URL. Nếu người dùng gửi "ếch" trong ví dụ trên, thì trình duyệt sẽ gửi yêu cầu đến URL sau:

https://example.com/animals?animal=frog

Trong trường hợp này, bạn có thể truy cập dữ liệu trên giao diện người dùng hoặc phần phụ trợ bằng cách lấy dữ liệu từ URL.

Nếu muốn, bạn có thể hướng dẫn biểu mẫu sử dụng yêu cầu POST bằng cách thay đổi thuộc tính phương thức.

<form method="post">
...
</form>

Bằng cách sử dụng POST, dữ liệu được đưa vào phần nội dung của yêu cầu.

Dữ liệu sẽ không hiển thị trong URL và chỉ có thể truy cập được từ giao diện người dùng hoặc tập lệnh phụ trợ.

Bạn nên sử dụng phương pháp nào?

Có các trường hợp sử dụng cho cả hai phương pháp.

Đối với các biểu mẫu xử lý dữ liệu nhạy cảm, hãy sử dụng phương thức POST. Dữ liệu được mã hoá (nếu bạn sử dụng HTTPS) và chỉ tập lệnh phụ trợ xử lý yêu cầu mới có thể truy cập được. Dữ liệu không xuất hiện trong URL. Một ví dụ thường gặp là biểu mẫu đăng nhập.

Nếu dữ liệu có thể chia sẻ được, bạn có thể sử dụng phương thức GET. Bằng cách này dữ liệu sẽ được thêm vào nhật ký duyệt web của bạn khi dữ liệu được đưa vào URL. Tìm kiếm biểu mẫu thường sử dụng điều này. Bằng cách này, bạn có thể đánh dấu trang kết quả tìm kiếm.

Giờ đây, bạn đã tìm hiểu về thành phần biểu mẫu, đã đến lúc tìm hiểu về các trường biểu mẫu để giúp biểu mẫu có khả năng tương tác.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về phần tử biểu mẫu

Tài nguyên

Phần tử <form>.