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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Không phải lúc nào bạn cũng cần đặt các thành phần đ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 một 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 của 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à bạn phải tự tạo. <form> cũng có nhiều tính năng hỗ trợ tiếp cận tích hợp theo mặc định. Nếu 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ử đó bằng JavaScript.

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

Bạn đã tìm hiểu 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 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>

Quy trình 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 yêu cầu GET hoặc POST theo thuộc tính method. Nếu không có thuộc tính method, hệ thống sẽ thực hiện yêu cầu GET cho 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? Dữ liệu đã gửi có thể được JavaScript xử lý ở phần giao diện người dùng bằng yêu cầu GET hoặc bằng mã ở phần phụ trợ bằng yêu cầu GET hoặc POST. Tìm hiểu thêm về các loại yêu cầu và việc 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 đến 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. Nếu đúng như vậy, URL được xác định ở đó sẽ được sử dụng.

Hơn nữa, trình duyệt sẽ 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 có xác thực biểu mẫu hay không (novalidate), có sử dụng tính năng tự động hoàn thành hay không (autocomplete="off") hoặc nên sử dụng phương thức mã hoá nào (accept-charset).

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

Hiện biểu mẫu

Một giải pháp có thể 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ó 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 Gửi theo nhiều cách. Bạn có thể 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út này sẽ hoạt động như nút Submit (Gửi). Một lựa chọn khác là sử dụng <input type="submit" value="Submit">.

Cách 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, nê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 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 trên 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ó phương thức mã hoá này, bạn sẽ không thể gửi tệp bằng yêu cầu POST.

Kiểm tra mức độ hiểu biết

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

Bạn 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

Không
Hãy thử lại!
Có, bằng JavaScript.
🎉
Có, với Flash.
Hãy thử lại!
Có, bằng 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