Thẻ Legend trong HTML là gì? Cú pháp & Cách Style Đẹp

Bạn đang tạo một form HTML và thấy các trường thông tin có vẻ hơi lộn xộn? Có một cách rất đơn giản để nhóm chúng lại một cách logic và đẹp mắt. Đó là lúc thẻ legend trong HTML phát huy sức mạnh. Thẻ này không chỉ giúp tạo tiêu đề rõ ràng cho từng nhóm input mà còn làm cho biểu mẫu của bạn trở nên chuyên nghiệp hơn rất nhiều. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu tất tần tật về thẻ legend, từ cú pháp cơ bản đến cách style nâng cao nhé!

Thẻ Legend trong HTML là gì?

Khi xây dựng một biểu mẫu (form) phức tạp, việc sắp xếp các trường thông tin một cách khoa học là cực kỳ quan trọng. Đây chính là lúc thẻ <legend> và <fieldset> trở thành bộ đôi không thể tách rời.

Định nghĩa và vai trò của thẻ Legend

Hiểu một cách đơn giản, thẻ <legend> dùng để tạo một tiêu đề hoặc một chú thích cho một nhóm các phần tử trong form. Nó giúp người dùng hiểu rõ mục đích của nhóm thông tin mà họ sắp điền. Ví dụ, trong một form đăng ký, bạn có thể có các nhóm như “Thông tin cá nhân”, “Thông tin tài khoản”, “Địa chỉ giao hàng”. Thẻ <legend> chính là tên của các nhóm đó.

Mối quan hệ mật thiết giữa thẻ Legend và Fieldset

Có một quy tắc bạn cần nhớ: thẻ <legend> không bao giờ đi một mình. Nó luôn phải là phần tử con đầu tiên của thẻ fieldset trong HTML.

Bạn có thể hình dung thế này:

• <fieldset>: Là một cái hộp, một cái khung (set of fields) dùng để bao bọc, nhóm các phần tử liên quan lại với nhau (như <input>, <label>, <select>…).
• <legend>: Là cái nhãn dán trên chính cái hộp đó, cho biết bên trong hộp chứa gì.

Sự kết hợp này không chỉ giúp giao diện gọn gàng hơn mà còn mang lại ý nghĩa về mặt cấu trúc cho cả người dùng và các công cụ tìm kiếm.

Cú pháp và Cách sử dụng thẻ Legend chuẩn

Nắm vững cú pháp là bước đầu tiên để bạn làm chủ thẻ này. Rất may là cấu trúc của nó cực kỳ đơn giản và dễ nhớ.

Cấu trúc code cơ bản trong HTML5

Cú pháp chuẩn để sử dụng <legend> luôn đi kèm với <fieldset>. Các trường nhập liệu và nhãn của chúng sẽ được đặt bên trong <fieldset> và ngay sau thẻ <legend>.

<form>
  <fieldset>
    <legend>Tiêu đề của nhóm</legend>
    <!-- Các phần tử form khác như label, input, textarea... -->
    <label for="fname">Tên:</label>
    <input type="text" id="fname" name="fname">
  </fieldset>
</form>

Như bạn thấy, thẻ <legend> được đặt ngay sau thẻ mở <fieldset>. Đây là cấu trúc chuẩn và được khuyến khích sử dụng trong mọi trường hợp.

Ví dụ minh họa: Tạo Form thông tin cá nhân

Bây giờ, hãy cùng WiWeb áp dụng vào một ví dụ thực tế hơn để tạo khung cho form HTML nhé. Chúng ta sẽ tạo một form đăng ký đơn giản với hai nhóm thông tin riêng biệt.

<form action="/action_page.php">
  <fieldset>
    <legend>Thông tin cá nhân</legend>
    <label for="hoten">Họ và tên:</label><br>
    <input type="text" id="hoten" name="hoten"><br>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>
  </fieldset>

  <fieldset>
    <legend>Thông tin tài khoản</legend>
    <label for="username">Tên đăng nhập:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Mật khẩu:</label><br>
    <input type="password" id="password" name="password">
  </fieldset>
  <br>
  <input type="submit" value="Đăng ký">
</form>

Với đoạn code trên, bạn sẽ thấy hai khối thông tin được phân tách rõ ràng bằng khung viền và tiêu đề, giúp người dùng dễ dàng theo dõi và điền thông tin hơn.

Các thuộc tính của thẻ Legend cần lưu ý

Thẻ <legend> không có nhiều thuộc tính riêng biệt, nhưng bạn cần nắm rõ các thuộc tính toàn cục và một lưu ý quan trọng về một thuộc tính đã lỗi thời.

Các thuộc tính toàn cục

Giống như hầu hết các thẻ HTML khác, <legend> hỗ trợ các thuộc tính toàn cục. Phổ biến nhất bao gồm:

• class: Dùng để gán một hoặc nhiều lớp CSS cho thẻ, phục vụ việc style.
• id: Cung cấp một định danh duy nhất cho thẻ.
• style: Áp dụng các quy tắc CSS nội tuyến trực tiếp lên thẻ.
• title: Hiển thị một đoạn văn bản gợi ý khi người dùng di chuột qua tiêu đề.

Cảnh báo: Thuộc tính Align đã bị loại bỏ

Nếu bạn tham khảo một số tài liệu cũ, bạn có thể thấy thuộc tính align trong HTML được dùng để căn chỉnh vị trí của <legend> (ví dụ: align="left", align="right").

Tuy nhiên, bạn tuyệt đối không nên sử dụng thuộc tính này nữa! Trong HTML5, thuộc tính align cho thẻ <legend> đã chính thức bị loại bỏ. Lý do là để tách bạch rõ ràng vai trò: HTML chỉ lo về cấu trúc và nội dung, còn CSS sẽ chịu trách nhiệm hoàn toàn về giao diện và trình bày. Việc căn chỉnh vị trí giờ đây sẽ được thực hiện hoàn toàn bằng CSS.

Hướng dẫn Style thẻ Legend và Fieldset bằng CSS

Đây là phần thú vị nhất! Chúng ta sẽ biến form HTML thô sơ trở nên bắt mắt và hiện đại hơn bằng CSS. Việc tùy biến giao diện này thường được gọi là fieldset html css.

Cách tạo khung viền bao quanh Form đẹp mắt

Khung viền mặc định của <fieldset> trông khá đơn điệu. Bạn có thể thay đổi nó một cách dễ dàng với vài dòng CSS:

fieldset {
  border: 1px solid #ccc; /* Đổi màu và độ dày viền */
  border-radius: 8px; /* Bo tròn các góc */
  padding: 20px; /* Tạo khoảng trống bên trong khung */
  margin-bottom: 20px; /* Tạo khoảng cách với các phần tử khác */
}

Tùy biến vị trí, màu sắc và font chữ cho Legend

Bây giờ đến phần tùy biến cho tiêu đề. Dưới đây là một số thuộc tính html legend tag style phổ biến:

legend {
  color: #007bff; /* Đổi màu chữ */
  font-weight: bold; /* In đậm chữ */
  font-size: 1.2em; /* Tăng kích thước chữ */
  background-color: #f8f9fa; /* Thêm màu nền nhẹ */
  padding: 3px 10px; /* Tạo khoảng đệm xung quanh chữ */
  border: 1px solid #ccc; /* Thêm viền cho chính legend */
  border-radius: 5px; /* Bo góc cho viền legend */
}

Code mẫu: Giao diện Form hiện đại với CSS3

Bây giờ, hãy kết hợp tất cả lại để tạo ra một code html form đẹp. WiWeb đã chuẩn bị một ví dụ hoàn chỉnh cho bạn tham khảo:

<style>
  body { font-family: Arial, sans-serif; }
  .modern-form fieldset {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .modern-form legend {
    width: auto;
    background-color: #007bff;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 1em;
    border: none;
  }
  /* Các style khác cho input, label... */
</style>

<form class="modern-form">
  <fieldset>
    <legend>Liên hệ với chúng tôi</legend>
    <label for="ten">Tên của bạn:</label><br>
    <input type="text" id="ten" name="ten"><br><br>
    <label for="noidung">Nội dung:</label><br>
    <textarea id="noidung" name="noidung" rows="4"></textarea>
  </fieldset>
</form>

Chỉ với một chút CSS, form của bạn đã trông chuyên nghiệp và thu hút hơn hẳn, đúng không nào?

Tầm quan trọng của Legend trong SEO và Accessibility

Ngoài lợi ích về mặt thẩm mỹ, việc sử dụng cặp thẻ <fieldset> và <legend> đúng cách còn mang lại giá trị lớn về SEO và khả năng tiếp cận (Accessibility).

Cải thiện cấu trúc ngữ nghĩa

Sử dụng thẻ đúng với chức năng của nó được gọi là viết mã HTML ngữ nghĩa. Khi bạn dùng <fieldset> để nhóm và <legend> để đặt tên, bạn đang cung cấp một cấu trúc rõ ràng cho trình duyệt và các công cụ tìm kiếm như Google. Chúng sẽ hiểu rằng các trường input bên trong có liên quan đến nhau theo chủ đề mà <legend> mô tả. Điều này góp phần nhỏ nhưng tích cực vào việc tối ưu hóa SEO cho trang web của bạn.

Hỗ trợ trình đọc màn hình

Đây là lợi ích quan trọng nhất. Đối với người dùng khiếm thị sử dụng trình đọc màn hình, thẻ <legend> cung cấp ngữ cảnh cực kỳ cần thiết. Khi di chuyển vào một trường input trong <fieldset>, trình đọc màn hình sẽ đọc tiêu đề của <legend> trước, sau đó mới đến nhãn (<label>) của input đó.

Ví dụ: Thay vì chỉ đọc “Họ và tên”, nó sẽ đọc “Thông tin cá nhân, Họ và tên”. Điều này giúp người dùng định vị và hiểu rõ họ đang điền thông tin cho mục đích gì, cải thiện đáng kể trải nghiệm người dùng.

Khả năng hỗ trợ trên các trình duyệt

Bạn không cần phải lo lắng về vấn đề tương thích khi sử dụng thẻ <legend>. Đây là một thẻ HTML cơ bản và đã có từ rất lâu.

Danh sách trình duyệt hỗ trợ thẻ Legend

Thẻ <legend> được hỗ trợ đầy đủ trên tất cả các trình duyệt hiện đại:

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Opera

Bạn có thể tự tin sử dụng nó trong mọi dự án web mà không sợ gặp vấn đề hiển thị.

Kết luận

Qua bài viết này, WiWeb hy vọng bạn đã hiểu rõ thẻ legend trong HTML không chỉ là một thẻ để trang trí. Nó là một công cụ mạnh mẽ giúp tổ chức form một cách logic, cải thiện trải nghiệm người dùng, và tăng cường khả năng tiếp cận cho website.

Việc kết hợp nhuần nhuyễn giữa <legend> và <fieldset> sẽ giúp các biểu mẫu của bạn trở nên chuyên nghiệp và thân thiện hơn rất nhiều. Bạn còn thắc mắc nào về chủ đề này hay có mẹo hay nào muốn chia sẻ không? Hãy để lại bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, nơi mỗi dòng code đều được chăm chút tỉ mỉ, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi để bắt đầu dự án của bạn ngay hôm nay!