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

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

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.

Làm cách nào để thực hiện việc này với HTML?

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

Phần tử 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>, thuộc tính không bắt buộc được xác định trong thẻ mở và thẻ đóng </form>.

Giữa thẻ mở và thẻ đóng, bạn có thể thêm các thành phần 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ề thành phần biểu mẫu trong học phần tiếp theo.

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

Khi gửi biểu mẫu (ví dụ: khi người dùng nhấp vào nút Gửi), trình duyệt đư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 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ẽ làm điều đó như thế nào? Hãy dùng thử!

Bật/tắt câu trả lời

Bạn có thể chọn vị trí tập lệnh bằng cách sử dụng thuộc tính action.

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

Ví dụ trước gửi 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 có trong 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 sẽ được gửi dưới dạng yêu cầu GET, với dữ liệu đã gửi được nối thêm vào URL. Nếu người dùng gửi 'ếch' trong ví dụ trên, trình duyệt đưa ra yêu cầu đối với 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 trên giao diện người dùng hoặc phần phụ trợ bằng cách lấy dữ liệu qua 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 của yêu cầu.

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

Bạn nên dùng phương pháp nào?

Có những 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ỉ 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ụ phổ biến 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 ngay khi có trong URL. Các biểu mẫu tìm kiếm thường sử dụng thuộc tính 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, khi bạn đã tìm hiểu về chính yếu tố biểu mẫu, đã đến lúc tìm hiểu về trường biểu mẫu để tăng tính tương tác cho biểu mẫu.

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

Thẻ mở của phần tử biểu mẫu trông như thế nào?

</form>
Gần như đúng, đây là thẻ đóng của phần tử <form>.
<form-container>
Hãy thử lại!
<form>
🎉
<form-element>
Hãy thử lại!

Bạn có thể sử dụng thuộc tính nào để xác định nơi xử lý <form>?

where
Hãy thử lại!
action
Có, thuộc tính action xác định nơi <form> được xử lý.
href
Hãy thử lại!
url
Hãy thử lại!

Phương thức yêu cầu mặc định là gì?

GET
🎉
POST
Hãy thử lại!

Tài nguyên

Phần tử <form>.