Thẻ form trong HTML

• Trần Thị Vân
• 1212
• 09/07/2025

Chức năng của Thẻ form trong HTML

Thẻ form trong HTML dùng để gửi thông tin của người dùng nhập vào tới máy chủ, trong thẻ form sẽ chứa các thẻ input, select,... và nút submit, giúp website dễ dàng tương tác với người dùng hơn.

Cú pháp của Thẻ form trong HTML

<form method="giatriphuongthuc" action="lienketxuly" enctype="multipart/form-data">khoihtml</form>

khoihtml: Khối HTML gồm các ô nhập thông tin và nhấn nút gửi

lienketxuly: Khai báo đường dẫn xử lý dữ liệu sau khi nhấn gửi.

giatriphuongthuc: Giá trị của method gồm POST (Lấy dữ liệu nhưng không hiện lên url) và GET (Lấy dữ liệu nhưng hiện lên url).

Thẻ form bao quanh các phần tử HTML là các ô nhập dữ liệu, chọn dữ liệu và gửi.

Ví dụ thực tế Thẻ form trong HTML

<form method="POST" action="https://webmoi.vn/chay-thu-vi-du-thuc-te-the-form-trong-html/" enctype="multipart/form-data">
									
<label for="tenbgn" class="td_muc_ttbg">Họ và tên
</label>
<input id="tenbgn" name="ten" type="text" placeholder="Nhập họ và tên" class="txt_ttbg"> <br>
													
<label for="dienthoaibgn" class="td_muc_ttbg">Số điện thoại*
</label>
							
<input id="dienthoaibgn" type="text" name="dienthoai" class="txt_ttbg" placeholder="Nhập số điện thoại"  required> <br>

<label for="tenbgn" class="td_muc_ttbg">Gmail*
</label>
							
<input id="emailbgn" name="email" placeholder="Nhập Gmail" autocomplete="off" type="text" class="txt_ttbg"  required> <br>

<label for="noidungbgn" class="td_muc_ttbg">Nội dung
</label>
							
<textarea id="noidungbgn" name="noidung" style="margin-bottom:5px">
</textarea><br>
							
<label for="noidungbgn2" class="td_muc_ttbg">File yêu cầu(.doc|.docx|.pdf|.xlsx|.zip|.rar)
</label>
							
<input id="noidungbgn2" type="file" name="file2"><br>
												
<input type="submit" id="nutgui_ttbg" name="btnbaogianhanh" value="Gửi yêu cầu">
								
</form>

Chạy Thử

Các lỗi thường gặp khi sử dụng form trong HTML và cách khắc phục

Trong quá trình xây dựng biểu mẫu, nhiều lỗi tưởng chừng nhỏ lại khiến dữ liệu không được gửi, làm giảm trải nghiệm người dùng hoặc ảnh hưởng đến tính bảo mật. Kiểm tra kỹ cấu trúc và các thuộc tính quan trọng sẽ giúp form hoạt động ổn định trên nhiều trình duyệt.

Quên khai báo thuộc tính action hoặc method

Thuộc tính action xác định nơi nhận dữ liệu, còn method quyết định cách gửi dữ liệu đến máy chủ. Nếu thiếu hoặc khai báo sai, biểu mẫu có thể gửi đến địa chỉ không mong muốn hoặc sử dụng phương thức không phù hợp.

Trước khi đưa vào sử dụng, hãy xác nhận rằng đường dẫn xử lý chính xác và lựa chọn phương thức phù hợp với mục đích gửi dữ liệu.

Đặt sai giá trị name khiến dữ liệu không được gửi

Máy chủ nhận dữ liệu thông qua thuộc tính name của từng trường nhập liệu. Nếu thiếu thuộc tính này hoặc đặt sai tên, dữ liệu người dùng nhập sẽ không xuất hiện trong kết quả gửi mặc dù vẫn hiển thị bình thường trên giao diện.

Nên đặt tên ngắn gọn, rõ nghĩa và thống nhất với quy ước xử lý ở phía máy chủ để tránh nhầm lẫn khi phát triển.

Sử dụng sai kiểu input làm ảnh hưởng trải nghiệm người dùng

Mỗi loại dữ liệu nên sử dụng đúng kiểu trường nhập để trình duyệt hỗ trợ kiểm tra và tối ưu thao tác nhập liệu. Ví dụ, địa chỉ email nên dùng kiểu dành riêng cho email, còn số điện thoại hoặc số lượng nên sử dụng kiểu phù hợp với dữ liệu số.

Việc lựa chọn đúng kiểu giúp giảm lỗi nhập liệu và cải thiện trải nghiệm trên cả máy tính lẫn thiết bị di động.

Không kiểm tra dữ liệu trước khi gửi biểu mẫu

Biểu mẫu nên được kiểm tra các thông tin quan trọng như trường bắt buộc, định dạng dữ liệu và giới hạn độ dài trước khi gửi đến máy chủ. Điều này giúp giảm số lượng dữ liệu không hợp lệ và hạn chế việc người dùng phải nhập lại nhiều lần.

Dù đã kiểm tra trên trình duyệt, máy chủ vẫn cần xác thực lại toàn bộ dữ liệu để đảm bảo tính chính xác và an toàn.

Thiếu nhãn label gây giảm khả năng truy cập (Accessibility)

Mỗi trường nhập liệu nên có nhãn mô tả rõ ràng để người dùng dễ hiểu mục đích của từng ô nhập. Đây cũng là yếu tố quan trọng giúp các công cụ hỗ trợ đọc màn hình hoạt động hiệu quả hơn.

Một biểu mẫu có nhãn đầy đủ sẽ dễ sử dụng hơn, hạn chế nhầm lẫn và nâng cao trải nghiệm cho mọi đối tượng người dùng.

Không sử dụng HTTPS khi gửi thông tin nhạy cảm

Nếu biểu mẫu thu thập thông tin như mật khẩu, số điện thoại, địa chỉ hoặc dữ liệu cá nhân, website nên sử dụng kết nối HTTPS để mã hóa dữ liệu trong quá trình truyền tải.

Việc kết hợp HTTPS với kiểm tra dữ liệu ở cả trình duyệt và máy chủ sẽ giúp tăng mức độ bảo mật, giảm nguy cơ bị đánh cắp hoặc thay đổi thông tin trong quá trình gửi biểu mẫu.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ form trong HTML.