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

Tìm hiểu những 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 này.

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

Trong HTML, bạn có thể tạo biểu mẫu này bằng phần tử biểu mẫu (<form>), <input> có <label> và nút gửi <button>.

<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 là gì?

Phần tử biểu mẫu bao gồm thẻ bắt đầu <form>, các thuộc tính không bắt buộc được xác định trong thẻ bắt đầu và thẻ kết thúc </form>.

Giữa thẻ bắt đầu và thẻ kết thúc, bạn có thể thêm các phần tử biểu mẫu như <input> và <textarea> cho nhiều loại dữ liệu đầu vào của người dùng. Bạn sẽ tìm hiểu thêm về các phần tử biểu mẫu trong mô-đun tiếp theo.

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

Khi một biểu mẫu được gửi (ví dụ: khi người dùng nhấp vào nút Gửi), trình duyệt sẽ đưa ra một yêu cầu. Một 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 được gửi đến trang nơi biểu mẫu xuất hiện.

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ẽ làm điều đó như thế nào? Hãy thử trên CodePen!

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

Ví dụ trước đó đưa ra yêu cầu đến https://example.com/animals. Một 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, với dữ liệu đã gửi được thêm vào URL. Nếu người dùng gửi "frog" trong ví dụ trước, 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 vào dữ liệu ở giao diện người dùng hoặc giao diệ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>

Khi sử dụng POST, dữ liệu sẽ được đưa vào nội dung yêu cầu.

Dữ liệu sẽ không xuất hiện trong URL và chỉ có thể truy cập được từ tập lệnh 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ả hai phương pháp đều có trường hợp sử dụng.

Đối với những 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ỉ có thể truy cập bằng tập lệnh phụ trợ xử lý yêu cầu. 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ẻ, bạn có thể sử dụng phương thức GET. Sau đó, dữ liệu sẽ được thêm vào nhật ký trình duyệt của bạn vì dữ liệu đó có trong URL. Biểu mẫu tìm kiếm thường sử dụng thuộc tính này. Thao tác này cho phép bạn đánh dấu trang kết quả tìm kiếm.

Giờ khi bạn đã tìm hiểu về chính phần tử biểu mẫu, đã đến lúc tìm hiểu về các trường biểu mẫu để làm cho biểu mẫu của bạn có tính tương tác.

Kiểm tra mức độ hiểu biết của bạn

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>.