Thẻ legend trong HTML
Bùi Tấn Lực - 1000
- 29/09/2025
Chức năng của Thẻ legend trong HTML
Thẻ legend trong HTML dùng để đặt tiêu đề cho từng nhóm các phần tử nhập liệu trong cùng một form hoặc đặt tiêu đề cho hết phần tử cùng một form, giúp người dùng dễ nhận biết mục đích của nhóm đó.
Cú pháp của Thẻ legend trong HTML
<legend>tieudenhom</legend>
tieudenhom: Tiêu đề nhóm.
Code Thẻ legend trong HTML
Thẻ legend của fieldset mặc định trong HTML
<form action="https://webmoi.vn/the-fieldset-mac-dinh-trong-html/">
<fieldset>
<legend>Thông tin liên hệ:</legend>
<label for="hoten">Họ Tên:</label>
<input type="text" id="hoten" name="txthoten"><br><br>
<label for="dienthoai">Điện thoại:</label>
<input type="text" id="dienthoai" name="txtdienthoai"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="txtemail"><br><br>
<input type="submit" value="GỬI ĐI">
</fieldset>
</form>
Css cho Thẻ legend của fieldset trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ fieldset trong HTML</title>
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
label {
float: left;
width: 83px;
}
</style>
</head>
<body>
<form action="https://webmoi.vn/the-fieldset-mac-dinh-trong-html/">
<fieldset>
<legend>Thông tin liên hệ:</legend>
<label for="hoten">Họ Tên:</label>
<input type="text" id="hoten" name="txthoten"><br><br>
<label for="dienthoai">Điện thoại:</label>
<input type="text" id="dienthoai" name="txtdienthoai"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="txtemail"><br><br>
<input type="submit" value="GỬI ĐI">
</fieldset>
</form>
</body>
</html>
Cách sử dụng thẻ legend trong HTML hiệu quả
Thẻ legend phát huy tốt nhất khi được sử dụng đúng mục đích trong các biểu mẫu HTML. Thay vì chỉ hiển thị một dòng chú thích thông thường, thẻ này giúp người dùng hiểu được nhóm thông tin mà họ sắp nhập, từ đó cải thiện khả năng thao tác và giảm nhầm lẫn khi điền dữ liệu.
Khi xây dựng form, nên kết hợp legend với fieldset để tạo cấu trúc rõ ràng cho từng nhóm nội dung. Điều này đặc biệt hữu ích với những biểu mẫu có nhiều phần như thông tin cá nhân, địa chỉ, phương thức thanh toán hoặc tùy chọn tài khoản.
Kết hợp thẻ legend với fieldset để tạo biểu mẫu rõ ràng
Thẻ legend không hoạt động độc lập mà thường nằm bên trong fieldset để đặt tên cho một nhóm trường liên quan. Sự kết hợp này giúp trình duyệt và các công cụ hỗ trợ nhận biết được mối liên hệ giữa tiêu đề nhóm và các ô nhập liệu bên dưới.
Ví dụ, một biểu mẫu đăng ký tài khoản có thể chia thành nhiều nhóm như thông tin người dùng và thông tin liên hệ. Mỗi nhóm sẽ có một legend riêng để người dùng dễ theo dõi hơn.
<fieldset>
<legend>Thông tin cá nhân</legend>
<label>Họ tên:</label>
<input type="text">
<label>Ngày sinh:</label>
<input type="date">
</fieldset>
Cách tổ chức này giúp biểu mẫu có bố cục logic hơn, đặc biệt khi số lượng trường nhập lớn. Người dùng có thể nhanh chóng xác định mình đang điền phần thông tin nào mà không cần đọc lại toàn bộ nội dung.
Vai trò của thẻ legend trong việc cải thiện trải nghiệm người dùng
Một biểu mẫu được chia nhóm hợp lý sẽ tạo cảm giác dễ sử dụng hơn so với danh sách nhiều ô nhập liên tục. Thẻ legend đóng vai trò như một tiêu đề mô tả, giúp người dùng hiểu mục đích của từng khu vực trong form.
Ngoài người dùng thông thường, legend còn hỗ trợ khả năng tiếp cận website. Các công cụ đọc màn hình có thể sử dụng thông tin từ legend để cung cấp ngữ cảnh cho người khiếm thị, giúp họ hiểu nhóm trường đang được yêu cầu nhập dữ liệu gì.
Khi sử dụng thẻ này, nên viết nội dung ngắn gọn, đúng trọng tâm và phản ánh chính xác nhóm thông tin bên trong. Một legend rõ ràng sẽ giúp biểu mẫu chuyên nghiệp hơn mà không cần thêm nhiều phần mô tả gây rối mắt.
Những lỗi thường gặp khi sử dụng thẻ legend trong HTML
Một lỗi phổ biến là sử dụng legend bên ngoài fieldset hoặc dùng thẻ này như một tiêu đề trang trí thông thường. Điều này làm mất đi ý nghĩa ngữ nghĩa của HTML và không mang lại lợi ích thực tế cho biểu mẫu.
Một số lỗi khác thường gặp gồm:
- Đặt quá nhiều nội dung trong legend khiến phần tiêu đề nhóm trở nên dài và khó đọc.
- Sử dụng legend thay cho các thẻ tiêu đề như h2, h3 khi nội dung không liên quan đến biểu mẫu.
- Tạo nhiều nhóm fieldset nhưng không có sự phân chia rõ ràng, làm người dùng khó xác định mục đích từng phần.
Để sử dụng hiệu quả, nên xem legend là phần mô tả ngắn gọn cho một nhóm dữ liệu trong form. Khi kết hợp đúng với fieldset, thẻ này không chỉ giúp mã HTML có cấu trúc tốt hơn mà còn nâng cao trải nghiệm sử dụng website.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ legend trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
