HTML - Các Thuộc Tính của Form: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới đầy thú vị của các thuộc tính form trong HTML. Đừng lo lắng nếu bạn mới bắt đầu với điều này - tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình này, giống như tôi đã làm cho sinh viên của mình trong nhiều năm qua. Vậy, hãy lấy một ly đồ uống yêu thích của bạn, và chúng ta cùng bắt đầu nhé!

什么是表单属性?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu từ những điều cơ bản. Các thuộc tính form là những hướng dẫn đặc biệt chúng ta đưa ra cho các form HTML để kiểm soát cách chúng hoạt động. Hãy tưởng tượng chúng như là gia vị bí mật giúp form của bạn hoạt động theo cách bạn muốn.

Hãy tưởng tượng bạn đang nướng một chiếc bánh. Form là bột bánh của bạn, và các thuộc tính là những nguyên liệu đặc biệt làm cho chiếc bánh của bạn trở nên độc đáo - có thể là một chút vani hoặc sô-cô-la. Giống như những nguyên liệu đó thay đổi hương vị của bánh, các thuộc tính form thay đổi cách form của bạn hoạt động.

Thuộc Tính action

Thuộc tính action giống như bạn đang nói với form nơi để gửi thông điệp của nó. Đây là điểm đến cho dữ liệu mà người dùng nhập vào.

Dưới đây là một ví dụ:

<form action="/submit-form">
<!-- Các yếu tố form ở đây -->
</form>

Trong ví dụ này, khi ai đó gửi form, tất cả dữ liệu sẽ được gửi đến "/submit-form". Điều này giống như địa chỉ một phong thư trước khi bạn gửi nó.

Thuộc Tính method

Thuộc tính method xác định cách dữ liệu được gửi. Có hai phương thức chính: GET và POST.

<form action="/submit-form" method="POST">
<!-- Các yếu tố form ở đây -->
</form>

Hãy tưởng tượng GET như gửi một bưu thiếp - thông tin là可见 cho tất cả mọi người. POST giống như gửi một lá thư đã bị niêm phong - thông tin là ẩn từ những con mắt tò mò.

Thuộc Tính target

Thuộc tính target quyết định nơi phản hồi cho form submission sẽ được hiển thị. Nó giống như việc chọn cửa sổ nào để mở khi bạn nhấp vào một liên kết.

<form action="/submit-form" method="POST" target="_blank">
<!-- Các yếu tố form ở đây -->
</form>

Trong ví dụ này, _blank có nghĩa là phản hồi sẽ mở trong một tab hoặc cửa sổ mới. Điều này rất phù hợp khi bạn muốn giữ nguyên trang web ban đầu mở.

Thuộc Tính novalidate

Đôi khi, bạn có thể muốn tắt tính năng kiểm tra form tích hợp sẵn của trình duyệt. Đó là khi novalidate rất hữu ích.

<form action="/submit-form" method="POST" novalidate>
<!-- Các yếu tố form ở đây -->
</form>

Bằng cách thêm novalidate, bạn đang nói với trình duyệt, "Đừng lo lắng, tôi sẽ xử lý việc kiểm tra chính mình!" Điều này giống như tắt chức năng kiểm tra chính tả trong một trình xử lý văn bản.

Thuộc Tính autocomplete

Thuộc tính autocomplete giống như có một trợ lý giúp nhớ những gì bạn đã gõ trước đó.

<form action="/submit-form" method="POST" autocomplete="on">
<!-- Các yếu tố form ở đây -->
</form>

Với autocomplete="on", trình duyệt sẽ gợi ý các giá trị đã nhập trước đó. Điều này rất tiện lợi cho người dùng, giống như có một thư ký cá nhân!

Thuộc Tính enctype

Cuối cùng nhưng không kém phần quan trọng, chúng ta có thuộc tính enctype. Thuộc tính này hơi kỹ thuật một chút, nhưng hãy tưởng tượng nó như việc chọn loại phong bì phù hợp cho lá thư của bạn.

<form action="/submit-form" method="POST" enctype="multipart/form-data">
<!-- Các yếu tố form ở đây -->
</form>

enctype="multipart/form-data" đặc biệt quan trọng khi form của bạn bao gồm việc tải lên tệp. Nó giống như việc sử dụng phong bì có bông khi bạn gửi thứ gì đó dễ vỡ.

Kết Hợp Tất Cả

Bây giờ chúng ta đã khám phá từng thuộc tính một, hãy xem chúng hoạt động cùng nhau trong một ví dụ thực tế:

<form action="/submit-application" method="POST" target="_blank" novalidate autocomplete="on" enctype="multipart/form-data">
<label for="name">Tên:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="resume">Tải Lên Hồ Sơ:</label>
<input type="file" id="resume" name="resume">

<input type="submit" value="Gửi Hồ Sơ">
</form>

Trong ví dụ này, chúng ta đã tạo một form ứng tuyển việc làm. Hãy phân tích nó:

1. Dữ liệu form sẽ được gửi đến "/submit-application"
2. Chúng ta sử dụng POST để giữ dữ liệu riêng tư
3. Phản hồi sẽ mở trong một tab mới
4. Chúng ta đã tắt kiểm tra form của trình duyệt để sử dụng kiểm tra của riêng mình
5. Autocomplete được bật để giúp người dùng điền form nhanh hơn
6. Chúng ta sử dụng multipart/form-data vì có việc tải lên tệp

Các Thuộc Tính Form Tóm Tắt

Dưới đây là bảng tóm tắt tất cả các thuộc tính chúng ta đã thảo luận:

Thuộc Tính	Mục Đích	Ví Dụ
action	Xác định nơi gửi dữ liệu form	action="/submit-form"
method	Xác định cách gửi dữ liệu form	method="POST"
target	Xác định nơi hiển thị phản hồi	target="_blank"
novalidate	Tắt kiểm tra form của trình duyệt	novalidate
autocomplete	Bật/tắt autocomplete form	autocomplete="on"
enctype	Xác định cách mã hóa dữ liệu form	enctype="multipart/form-data"

Và thế là bạn đã hoàn thành một chuyến du lịch nhanh chóng qua các thuộc tính form HTML. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm các thuộc tính này trong form của riêng bạn. Trước khi bạn biết, bạn sẽ tạo ra các form không chỉ功能性, mà còn thân thiện với người dùng và hiệu quả.

Chúc mừng coding, và hy vọng form của bạn luôn gửi thành công!

Credits: Image by storyset