×

Cách sử dụng thẻ <fieldset> và <legend> để nhóm trường nhập liệu trong HTML

Avatar of admin
admin 0 Views

Khi tạo ra các mẫu biểu mẫu phức tạp trong HTML, việc sắp xếp và nhóm các trường nhập liệu hợp lý là rất cần thiết để cải thiện trải nghiệm người dùng. Một trong những cách tốt nhất để thực hiện điều này là sử dụng thẻ <fieldset> cùng với thẻ <legend>. Hai thẻ này không chỉ giúp tổ chức các trường nhập liệu mà còn làm cho biểu mẫu trở nên trực quan và dễ hiểu hơn.

Tìm hiểu về thẻ <fieldset>

Thẻ <fieldset> được sử dụng để nhóm một loạt các trường liên quan trong một biểu mẫu HTML. Điều này giúp tách biệt các phần khác nhau của một biểu mẫu, tạo nên các khối dữ liệu rõ ràng và dễ dàng cho người dùng theo dõi. Khi sử dụng thẻ này, trình duyệt sẽ tự động thêm một đường viền xung quanh nhóm các trường nhập liệu, giúp người dùng dễ dàng nhận biết vùng dữ liệu cụ thể.

Cú pháp

Cú pháp cơ bản của thẻ <fieldset> rất đơn giản:

<fieldset>
    <!-- Các trường nhập liệu nằm ở đây -->
</fieldset>

Sử dụng thẻ <legend>

Thẻ <legend> được sử dụng để cung cấp tiêu đề hoặc nhãn cho một nhóm các trường nhập liệu được bọc bởi thẻ <fieldset>. Thẻ này nên được đặt là phần tử con đầu tiên của thẻ <fieldset>. Điều này sẽ giúp người dùng hiểu rõ hơn về nội dung của nhóm trường và mục đích của chúng.

Cú pháp

Thẻ <legend> thường đi kèm với thẻ <fieldset> như sau:

<fieldset>
    <legend>Tiêu đề của nhóm trường</legend>
    <!-- Các trường nhập liệu nằm ở đây -->
</fieldset>

Ví dụ minh họa

Hãy cùng xem một ví dụ thực tế về cách sử dụng thẻ <fieldset> và <legend> để tạo nhóm các trường nhập liệu trong một biểu mẫu đăng ký đơn giản:

<form>
    <fieldset>
        <legend>Thông tin cá nhân</legend>
        <label for="firstname">Họ:</label>
        <input type="text" id="firstname" name="firstname"><br><br>
        
        <label for="lastname">Tên:</label>
        <input type="text" id="lastname" name="lastname"><br><br>
        
        <label for="email">Email:</label>
        <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 tài khoản:</label>
        <input type="text" id="username" name="username"><br><br>
        
        <label for="password">Mật khẩu:</label>
        <input type="password" id="password" name="password"><br><br>
    </fieldset>
    
    <input type="submit" value="Đăng ký">
</form>

Trong ví dụ này, chúng ta đã tạo ra hai nhóm trường nhập liệu riêng biệt: một nhóm cho "Thông tin cá nhân" và một nhóm cho "Thông tin tài khoản". Mỗi nhóm được bọc bởi một thẻ <fieldset> và có nhãn riêng được định nghĩa bởi thẻ <legend>.

Lợi ích của việc sử dụng <fieldset> và <legend>

  1. Tổ chức thông tin tốt hơn: Nhóm các trường nhập liệu liên quan lại với nhau giúp người dùng dễ dàng nắm bắt thông tin và điền vào biểu mẫu nhanh chóng.

  2. Tăng tính trực quan: Thiết kế giao diện của bạn sẽ trở nên trực quan và đẹp mắt hơn khi các trường nhập liệu được tổ chức rõ ràng.

  3. Cải thiện khả năng truy cập: Các công cụ hỗ trợ đọc màn hình sẽ cho biết đâu là nhóm các trường nhập liệu liên quan, giúp người dùng khiếm thị hiểu rõ cấu trúc của biểu mẫu.

  4. Dễ dàng bảo trì: Mã nguồn HTML của biểu mẫu trở nên rõ ràng và dễ dàng chỉnh sửa khi cần thiết.

Kết luận

Sử dụng thẻ <fieldset> và <legend> là một phương pháp hiệu quả để tổ chức các trường nhập liệu trong biểu mẫu HTML. Điều này không chỉ giúp cải thiện trải nghiệm người dùng mà còn làm cho mã nguồn của bạn trở nên sạch sẽ và dễ hiểu hơn. Bằng cách tận dụng tốt các thẻ này, bạn có thể tạo ra các biểu mẫu không chỉ đẹp mà còn trực quan và dễ sử dụng.

Comments

Bài viết liên quan