Tại sao chúng ta cần một thẻ fieldset?

Tại sao chúng ta cần một <fieldset>thẻ? Dù mục đích của nó có lẽ là một tập hợp con của thẻ biểu mẫu.

Tôi đã tra cứu một số thông tin trên W3Schools, cho biết:

• Các <fieldset>thẻ được sử dụng để các yếu tố nhóm liên quan trong một biểu mẫu.
• Các <fieldset>thẻ rút ra một hộp xung quanh các yếu tố liên quan.

Giải thích thêm cho những người đang nhầm lẫn "tại sao nó tồn tại trong đặc điểm kỹ thuật" cho "những gì nó làm". Tôi nghĩ rằng phần vẽ là không liên quan và tôi không hiểu tại sao chúng ta cần một thẻ đặc biệt chỉ để nhóm một số yếu tố liên quan trong một biểu mẫu.

Ví dụ thực tế, rõ ràng nhất là:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

Điều này cho phép mỗi nút radio được gắn nhãn đồng thời cung cấp nhãn cho toàn bộ nhóm. Điều này đặc biệt quan trọng khi công nghệ hỗ trợ (như trình đọc màn hình) đang được sử dụng trong đó sự liên kết của các điều khiển và huyền thoại của chúng không thể được ngụ ý bằng cách trình bày trực quan.

Một tính năng khác của fieldset là vô hiệu hóa nó sẽ vô hiệu hóa tất cả các trường có trong nó.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

Nó cần thiết cho khả năng tiếp cận.

Kiểm tra: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identifying/

Các phần tử HTML 4 fieldsetvà legendcho phép bạn bố trí và sắp xếp một biểu mẫu lớn với nhiều lĩnh vực quan tâm khác nhau một cách hợp lý mà không cần sử dụng bảng. Các fieldsetthẻ có thể được sử dụng để tạo ra các hộp xung quanh các yếu tố được lựa chọn và các legendthẻ sẽ cung cấp cho một chú thích cho những yếu tố này. Theo cách này, các yếu tố hình thức có thể được nhóm lại thành các loại được xác định.

Các trình duyệt khác nhau có thể hiển thị fieldsetđường viền mặc định theo những cách khác nhau. Cascading Style Sheets có thể được sử dụng để loại bỏ đường viền hoặc thay đổi diện mạo của nó.

Như được mô tả ở đây , mục đích của thẻ này là cung cấp sự rõ ràng cho tổ chức của biểu mẫu và cho phép một nhà thiết kế truy cập dễ dàng hơn để trang trí các yếu tố của biểu mẫu.

Fieldset tổ chức các mục trong các biểu mẫu một cách hợp lý nhưng nó cũng cải thiện khả năng truy cập cho những người sử dụng trình duyệt âm thanh. Fieldset rất tiện dụng và do đó nó rất phổ biến trong quá khứ trong nhiều ứng dụng nên họ cũng đã triển khai nó trong html.

Tôi thích rằng khi bạn bao quanh bộ đàm của mình bằng bộ lọc trường và bạn không đặt id trên thẻ đầu vào nút radio, thì nhóm được đại diện bởi bộ trường được thêm vào tabchain như thể nó là một mục duy nhất.

Điều này cho phép bạn tab thông qua một biểu mẫu và khi bạn đến một bộ trường, bạn có thể sử dụng các phím mũi tên để thay đổi radio đã chọn và sau đó bỏ đi khi bạn hoàn thành.

Ngoài ra, đừng quên khả năng tiếp cận. Trình đọc màn hình cần fieldset + chú thích để hiểu biểu mẫu của bạn và có thể đọc nó cho người dùng theo một cách tự nhiên nào đó. Hãy biến mất huyền thoại nếu bạn không muốn người dùng nhìn thấy nó. Đặt ra và tạo kiểu huyền thoại vừa phải với CSS đôi khi là các trình duyệt chéo đặc biệt là với các trình duyệt cũ, vì vậy tôi thấy làm cho thẻ chú thích trở nên vô hình đối với người dùng trình đọc màn hình và thêm một khoảng riêng, aria-hidden = "true" được tạo kiểu như một nhãn cho người dùng có tầm nhìn làm cho mọi thứ trở nên đơn giản để tạo kiểu và giữ cho mọi thứ có thể truy cập được.

Tôi thấy nó thuận tiện cho việc tạo kiểu CSS và liên kết các nhãn với các điều khiển. Nó giúp bạn dễ dàng đặt một thùng chứa trực quan xung quanh một nhóm các trường và căn chỉnh các nhãn.

Tôi sử dụng các trường để nhóm các đầu vào biểu mẫu, khi tôi có một biểu mẫu lớn và muốn chia nó thành một loại trình hướng dẫn biểu mẫu.

Câu hỏi tương tự đã được trả lời ở đây trên SO.

Chỉ cần tóm tắt một số lợi thế:

Phần <fieldset> tử HTML  được sử dụng để nhóm một số điều khiển cũng như nhãn ( <label>) trong một biểu mẫu web do MDN xác định .

Nói cách khác: Thẻ fieldset cho phép bạn nhóm các nhóm trường một cách hợp lý để các biểu mẫu của bạn được mô tả nhiều hơn. Vì vậy, một tập hợp các điều khiển biểu mẫu được nhóm tùy ý dưới một tên chung.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

" Ưu điểm " của việc sử dụng bộ trường là:

• họ cho phép bạn đánh dấu dữ liệu của mình (trong trường hợp này là một biểu mẫu) theo cách ngữ nghĩa nhất có sẵn. Hãy xem xét rằng việc đặt các trường của bạn trong một bộ trường là mô tả nhiều hơn là đặt các trường của bạn trong một div. Div không cho bạn biết gì về mối quan hệ giữa các trường, một fieldset cho bạn biết có một mối quan hệ.
• bằng cách sử dụng bị vô hiệu hóa , nó cho phép bạn vô hiệu hóa và tất cả nội dung của nó trong một lần.
• nó hữu ích cho khả năng tiếp cận

Đối với tôi, một trong những lợi thế lớn nhất của <fieldset>...</fieldset>yếu tố này là khả năng bảo tồn <form>...</form>bối cảnh ngay cả khi <fieldset>...</fieldset>không nằm trong biểu mẫu.

Ví dụ: mẫu sau:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

giống hệt về mặt ngữ nghĩa với hình thức sau:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>