Thông tin chi tiết về thành phần biểu mẫu

Trong học phần trước, bạn đã tìm hiểu cách sử dụng phần tử <form>. Trong học phần này, bạn sẽ tìm hiểu cách hoạt động của biểu mẫu và trường hợp sử dụng biểu mẫu.

Bạn có nên sử dụng phần tử <form> không?

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1

Nguồn

Không phải lúc nào bạn cũng cần đặt các chế độ điều khiển biểu mẫu trong phần tử <form>. Ví dụ: bạn có thể cung cấp phần tử <select> để người dùng chọn danh mục sản phẩm. Bạn không cần phần tử <form> ở đây vì bạn không lưu trữ hoặc xử lý dữ liệu trên phần phụ trợ.

Tuy nhiên, trong hầu hết các trường hợp khi lưu trữ hoặc xử lý dữ liệu từ người dùng, bạn nên sử dụng phần tử <form>. Như bạn sẽ tìm hiểu trong mô-đun này, việc sử dụng <form> sẽ cung cấp cho bạn nhiều chức năng tích hợp sẵn từ các trình duyệt mà lẽ ra bạn phải tự xây dựng. Theo mặc định, <form> cũng có nhiều bộ tính năng hỗ trợ tiếp cận được tích hợp sẵn. Nếu muốn tránh việc trang tải lại khi người dùng gửi biểu mẫu, bạn vẫn có thể sử dụng phần tử <form> nhưng cải thiện phần tử đó bằng JavaScript.

<form> hoạt động như thế nào?

Bạn đã biết rằng <form> là cách tốt nhất để xử lý dữ liệu người dùng. Có thể bây giờ bạn sẽ thắc mắc rằng biểu mẫu hoạt động như thế nào?

<form> là vùng chứa cho các thành phần điều khiển biểu mẫu tương tác.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

Tính năng gửi biểu mẫu hoạt động như thế nào?

Khi bạn gửi một <form>, trình duyệt sẽ kiểm tra các thuộc tính <form>. Dữ liệu được gửi dưới dạng yêu cầu GET hoặc POST theo thuộc tính method. Nếu không có thuộc tính method, thì yêu cầu GET sẽ được gửi đến URL của trang hiện tại.

Làm cách nào để bạn có thể truy cập và xử lý dữ liệu biểu mẫu? JavaScript trên giao diện người dùng có thể xử lý dữ liệu đã gửi bằng cách sử dụng yêu cầu GET hoặc bằng mã trên phần phụ trợ thông qua yêu cầu GET hoặc POST. Tìm hiểu thêm về các loại yêu cầu và cách chuyển dữ liệu biểu mẫu.

Khi bạn gửi biểu mẫu, trình duyệt sẽ đưa ra yêu cầu tới URL là giá trị của thuộc tính action. Ngoài ra, trình duyệt sẽ kiểm tra xem nút Submit (Gửi) có thuộc tính formaction hay không. Trong trường hợp này, URL được xác định ở đó sẽ được sử dụng.

Hơn nữa, trình duyệt tra cứu các thuộc tính bổ sung trên phần tử <form>, chẳng hạn như để quyết định xem biểu mẫu có cần được xác thực (novalidate), tính năng tự động hoàn thành (autocomplete="off") hoặc phương thức mã hoá nào nên sử dụng (accept-charset).

Cố gắng tạo một biểu mẫu để người dùng có thể gửi màu sắc họ yêu thích. Dữ liệu phải được gửi dưới dạng yêu cầu POST và URL xử lý dữ liệu phải là /color.

Hiển thị biểu mẫu

Một giải pháp khả thi là sử dụng biểu mẫu này:

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

Đảm bảo người dùng có thể gửi biểu mẫu của bạn

Có hai cách để gửi biểu mẫu. Bạn có thể nhấp vào nút Gửi hoặc nhấn Enter trong khi sử dụng bất kỳ thành phần điều khiển biểu mẫu nào.

Bạn có thể thêm nút Submit (Gửi) theo nhiều cách. Một lựa chọn là sử dụng phần tử <button> bên trong biểu mẫu. Miễn là bạn không sử dụng type="button", nó sẽ hoạt động như nút Submit (Gửi). Một cách khác là sử dụng <input type="submit" value="Submit">.

Tuỳ chọn thứ ba là sử dụng <input type="image" alt="Submit" src="submit.png"> để tạo nút Submit (Gửi) dạng đồ hoạ. Tuy nhiên, giờ đây bạn có thể tạo các nút đồ hoạ bằng CSS, bạn không nên sử dụng type="image".

Cho phép người dùng gửi tệp

Sử dụng <input type="file"> để cho phép mọi người tải tệp lên và gửi tệp nếu cần.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Trước tiên, hãy thêm phần tử <input> có type="file" vào biểu mẫu. Thêm thuộc tính multiple nếu người dùng có thể tải nhiều tệp lên.

Bạn cần thực hiện thêm một thay đổi để đảm bảo người dùng có thể tải tệp lên – hãy đặt thuộc tính enctype trong biểu mẫu. Giá trị mặc định là application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
…
</form>

Để đảm bảo có thể gửi tệp, hãy thay đổi thành multipart/form-data. Nếu không có chế độ mã hoá này, bạn sẽ không thể gửi tệp bằng yêu cầu POST.

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

Cần có giá trị nào cho enctype để gửi tệp?

multipart/form-data
🎉
multipart/form-files
Hãy thử lại!
form-data
Hãy thử lại!
form-files
Hãy thử lại!

Có thể gửi dữ liệu người dùng mà không cần <form>

Không
Hãy thử lại!
Có, với JavaScript.
🎉
Có, khi dùng Flash.
Hãy thử lại!
Có, với HTML5.
Hãy thử lại!

Làm cách nào để gửi <form>?

Nhấp vào một <button>.
Hãy thử lại!
Nhấn Enter.
Hãy thử lại!
Nhấp vào một <input type="image">.
Hãy thử lại!
Tất cả các câu trên.
🎉

Tài nguyên