Thẻ fieldset trong HTML
Bùi Tấn Lực - 1177
- 28/09/2025
Chức năng của Thẻ fieldset trong HTML
Thẻ fieldset trong HTML dùng để nhóm các phần nhập liệu, chọn,.... có liên quan ở trong form lại với nhau, sử dụng thẻ legend để đặt tiêu đề cho từng nhóm giúp dễ phân biệt hơn và người dùng dễ nhận biết mục đích của nhóm hơn, bạn có thể dùng riêng cho một form hoặc trong form chia ra nhiều nhóm nhỏ.
Cú pháp của Thẻ fieldset trong HTML
<fieldset>cacthehtml</fieldset>
cacthehtml: Các thẻ HTML.
Code Thẻ fieldset trong HTML
Thẻ 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ẻ 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ẻ fieldset trong HTML hiệu quả
Thẻ fieldset phát huy hiệu quả nhất khi được sử dụng để tổ chức các nhóm dữ liệu có liên quan trong biểu mẫu HTML. Thay vì để toàn bộ trường nhập liệu nằm chung một khu vực, việc chia thành từng nhóm rõ ràng giúp người dùng dễ theo dõi và thao tác hơn.
Khi xây dựng các biểu mẫu có nhiều thông tin như đăng ký tài khoản, đặt hàng, khảo sát hoặc nhập thông tin cá nhân, fieldset giúp tạo ra bố cục logic, đồng thời cải thiện khả năng tiếp cận cho người dùng sử dụng trình đọc màn hình.
Khi nào nên dùng thẻ fieldset trong form HTML
Không phải mọi biểu mẫu đều cần sử dụng fieldset. Thẻ này phù hợp nhất khi form có nhiều nhóm thông tin riêng biệt hoặc các trường có cùng mục đích cần được phân loại.
- Biểu mẫu đăng ký: Có thể chia thông tin cá nhân, thông tin liên hệ và thông tin bảo mật thành các nhóm riêng.
- Biểu mẫu thanh toán: Có thể tách thông tin người nhận, địa chỉ giao hàng và phương thức thanh toán.
- Biểu mẫu khảo sát: Có thể nhóm các câu hỏi theo từng chủ đề để người dùng dễ hoàn thành hơn.
- Cấu hình sản phẩm: Có thể phân chia các tùy chọn như màu sắc, kích thước hoặc tính năng bổ sung.
Việc sử dụng fieldset đúng mục đích giúp cấu trúc biểu mẫu rõ ràng hơn, đặc biệt với những trang web có nhiều trường nhập liệu. Người dùng có thể nhanh chóng nhận biết mối liên hệ giữa các thông tin thay vì phải đọc từng trường riêng lẻ.
Kết hợp thẻ fieldset với legend để tăng khả năng nhận diện nhóm dữ liệu
Thẻ legend thường được sử dụng cùng với fieldset để đặt tên cho từng nhóm trường dữ liệu. Nội dung trong legend giúp người dùng hiểu nhanh nhóm thông tin đang cần nhập mà không phải suy đoán ý nghĩa của các trường bên trong.
Ví dụ, thay vì hiển thị một danh sách dài các ô nhập liệu, website có thể chia thành nhóm "Thông tin cá nhân" và "Thông tin liên hệ". Cách trình bày này giúp biểu mẫu dễ đọc hơn cả về mặt giao diện lẫn cấu trúc HTML.
<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>
Khi kết hợp fieldset và legend, trình duyệt cùng các công cụ hỗ trợ người dùng khuyết tật có thể hiểu rõ hơn mối quan hệ giữa tiêu đề nhóm và các trường bên trong.
Lưu ý khi sử dụng thẻ fieldset trong thiết kế biểu mẫu
Khi áp dụng fieldset vào website, cần sử dụng hợp lý để tránh làm biểu mẫu trở nên rối mắt. Việc chia quá nhiều nhóm nhỏ có thể khiến người dùng mất nhiều thời gian khi nhập dữ liệu.
- Chỉ nên tạo nhóm khi các trường có mối liên hệ rõ ràng với nhau.
- Nên kết hợp với legend để mô tả mục đích của từng nhóm thông tin.
- Có thể tùy chỉnh giao diện bằng CSS để fieldset phù hợp với thiết kế tổng thể của website.
- Không nên dùng fieldset chỉ để tạo khung trang trí vì mục đích chính của thẻ là tổ chức dữ liệu trong form.
Sử dụng fieldset đúng cách giúp mã HTML có cấu trúc tốt hơn, hỗ trợ khả năng truy cập và mang lại trải nghiệm nhập liệu thuận tiện hơn cho người dùng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ fieldset 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 *
