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 thức 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 dùng phần tử <form> không?

Hỗ trợ trình duyệt

  • Chrome: 1.
  • Cạnh: 12.
  • Firefox: 1.
  • Safari: 1.

Nguồn

Không phải lúc nào bạn cũng cần đặt phần tử kiểm soát 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 một danh mục sản phẩm. Bạn không cần phần tử <form> tại đây vì bạn hiệ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 bạn lưu trữ hoặc xử lý dữ liệu từ người dùng, bạn nên 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 trong các trình duyệt mà lẽ ra bạn sẽ 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. Nếu bạn muốn tránh việc tải lại trang 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 hãy nâng cao phần tử này 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ạn đang thắc mắc về cách thức hoạt động của biểu mẫu.

<form> là vùng chứa các tuỳ chọ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>

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

Khi bạn gửi <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 GET hoặc yêu cầu POST theo thuộc tính method. Nếu không có thuộc tính method, Yêu cầu GET được gửi đến URL của trang hiện tại.

Làm cách nào để truy cập và xử lý dữ liệu biểu mẫu? JavaScript có thể xử lý dữ liệu đã gửi trên giao diện người dùng 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ề và chuyển dữ liệu biểu mẫu.

Khi biểu mẫu được gửi, trình duyệt sẽ gửi 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 trong trường hợp này sẽ được sử dụng.

Ngoài ra, trình duyệt còn tra cứu các thuộc tính khác trong phần tử <form>, ví dụ: để quyết định xem có nên xác thực biểu mẫu hay không (novalidate), tự động hoàn thành sẽ được sử dụng (autocomplete="off") hoặc nên sử dụng phương thức mã hoá nào (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 yêu thích của họ. Dữ liệu phải được gửi dưới dạng yêu cầu POST và URL nơi dữ liệu được xử lý 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 sau:

<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 Submit (Gửi) hoặc nhấn phím Enter trong khi sử dụng bất kỳ chức năng điều khiển biểu mẫu nào.

Bạn có thể thêm nút Gửi theo nhiều cách. Một cách khác 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ư một nút Gửi. Một cách khác là sử dụng <input type="submit" value="Submit">.

Lựa chọn thứ ba là sử dụng <input type="image" alt="Submit" src="submit.png">, để tạo nút 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 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 một 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 nữa để đảm bảo người dùng có thể tải tệp lên: đặt thuộc tính enctype trên biểu mẫu của bạn. 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 chế độ cài đặt này thành multipart/form-data. Nếu không có phương thức mã hoá này, bạn 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 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ó, bằng JavaScript.
🎉
Có, với Flash.
Hãy thử lại!
Có, với HTML5.
Hãy thử lại!

Bạn có thể gửi <form> bằng cách nào?

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