Phần tử biểu mẫu chuyên sâu

Trong một mô-đun trước, bạn đã học 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

Bạn không nhất thiết phải đặt các chế độ kiểm soát biểu mẫu trong phần tử <form>. Ví dụ: bạn có thể cung cấp một 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 đã tìm hiểu trong mô-đun này, việc sử dụng <form> mang lại cho bạn nhiều chức năng tích hợp sẵn từ các trình duyệt mà nếu không, bạn sẽ phải tự xây dựng. <form> cũng có nhiều tính năng hỗ trợ tiếp cận được tích hợp sẵn theo mặc định. Nếu muốn tránh 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 cải thiện 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 hoạt động của biểu mẫu.

<form> là vùng chứa cho các chế độ kiểm soát 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ì một yêu cầu GET sẽ đượ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 trong biểu mẫu? JavaScript có thể xử lý dữ liệu đã gửi ở 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à cách 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 xem biểu mẫu có nên được xác thực (novalidate), có nên sử dụng tính năng tự động hoàn thành (autocomplete="off") hay nên sử dụng phương thức mã hoá nào (accept-charset).

Thử tạo một biểu mẫu nơi 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 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ủa bạn

Có 2 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 khi dùng bất kỳ chế độ điều khiển biểu mẫu nào.

Luôn sử dụng ngôn từ kêu gọi hành động khi tạo nút Gửi. Ví dụ: Tiến hành thanh toán hoặc Lưu thay đổi. Điều này giúp người dùng hiểu được các bước tiếp theo của biểu mẫu.

Bạn có thể thêm nút 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 dùng type="button", nút này sẽ hoạt động như nút Gửi. Một lựa chọn 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 bằng hình ảnh. Tuy nhiên, vì giờ đây bạn có thể tạo các nút đồ hoạ bằng CSS, nên bạn không nên dùng type="image".

Cuối cùng, hãy tránh thêm thời gian chờ. Cho phép người dùng có bao nhiêu thời gian tuỳ thích để gửi biểu mẫu. Hết thời gian chờ sẽ khiến bạn mất dữ liệu và người dùng cảm thấy khó chịu. Đọc nguyên tắc về thời gian chờ của biểu mẫu W3C.

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 của bạn. 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 – hãy đặ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 bạn 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 không thể gửi tệp bằng yêu cầu POST.

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

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

Không
Hãy thử lại!
Có, bằng JavaScript.
🎉
Có, khi dùng đèn 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 <input type="image">.
Hãy thử lại!
Tất cả câu trả lời đều đúng.
🎉

Tài nguyên