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

Question

Tại sao chúng tôi cần thẻ <fieldset>? Bất kỳ mục đích nào nó phục vụ có lẽ là một tập hợp con của thẻ biểu mẫu.

Tôi nhìn lên một số thông tin trên W3Schools, mà nói:

• Thẻ <fieldset> được sử dụng để các yếu tố nhóm liên quan trong một biểu mẫu.
• Thẻ <fieldset> vẽ một hộp xung quanh các phần tử liên quan.

Giải thích thêm cho những người đang nhầm lẫn "lý do 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 bản vẽ không liên quan và tôi không thấy lý do tại sao chúng tôi cần một thẻ đặc biệt chỉ để nhóm một số phần tử có liên quan trong một biểu mẫu.

Answer 1

Rõ ràng nhất, ví dụ thực 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">Red</label> 
 

 
</fieldset>

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

Answer 2

Tôi thấy nó thuận tiện cho việc tạo kiểu CSS và liên kết nhãn với các điều khiển. Nó làm cho nó dễ dàng để đặt một container hình ảnh xung quanh một nhóm các lĩnh vực và sắp xếp các nhãn.

Answer 3

Fieldset tổ chức các mục theo 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 chúng cũng đã triển khai nó trong html.

Answer 4

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

Answer 5

Cần thiết cho khả năng truy cập.

Check-out: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML 4 yếu tố fieldset và legend cho phép bạn bố trí và sắp xếp một hình thức lớn với nhiều lĩnh vực khác nhau quan tâm trong một cách logic mà không sử dụng bảng. Bạn có thể sử dụng thẻ fieldset để tạo hộp xung quanh các phần tử đã chọn và thẻ legend sẽ cung cấp phụ đề cho các yếu tố đó. Bằng cách này, các phần tử biểu mẫu có thể được nhóm lại với nhau thành các danh mục được xác định.

Các trình duyệt khác nhau có thể hiển thị biên giới mặc định fieldset theo các 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ó.

Answer 6

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

Câu hỏi tương tự đã được trả lời here về SO.

Answer 7

Tôi thích khi bạn đặt radio của mình với fieldset và bạn không đặt id trên thẻ đầu vào nút radio, nhóm được đại diện bởi fieldset đượ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 biểu mẫu và khi bạn đến một fieldset, bạn có thể sử dụng các phím mũi tên để thay đổi radio đã chọn, sau đó nhấn tab khi bạn hoàn tất.

Ngoài ra, đừng quên trợ năng. Trình đọc màn hình cần fieldset + chú giải để 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 đó. Cảm thấy tự do để 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ó. Việc bố trí và tạo kiểu dáng chú thích ngay với CSS đôi khi là các trình duyệt chéo đặc biệt với các trình duyệt kế thừa, vì vậy tôi thấy rằng thẻ chú giải vô hình cho người dùng trình đọc màn hình và thêm khoảng cách riêng biệt, aria-hidden = "true" được tạo kiểu giống như nhãn người dùng có thể nhìn thấy 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.

Answer 8

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 chứa 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>