爲什麼我們需要fieldset標籤？

129

爲什麼我們需要<fieldset>標籤？無論它用於何種目的，可能都是表單標籤的一個子集。爲什麼我們需要fieldset標籤？

我擡頭對W3Schools的一些信息，它說：

的<fieldset>標籤用於在表單組相關的元素。
<fieldset>標記圍繞相關元素繪製一個框。

更多解釋爲那些誤解「爲什麼它存在於規範中」的「它是幹什麼」的。我認爲繪畫部分是無關緊要的，我不明白爲什麼我們需要一個特殊的標籤來將一些相關的元素分組。

來源

2012-03-16 Eastern Monk

+25

爲什麼我們需要任何標籤？爲什麼我們需要一個img標籤，當我們可以用1px的div創建一個具有背景色的圖片時？ – Oded 2012-03-16 16:53:38

+104

請注意：[W3C]（http://www.w3.org/）與w3schools沒有任何關係。 – 2012-03-16 16:54:46

+65

不要參考w3schools。只需使用MDN：[fieldset @ MDN]（https://developer.mozilla.org/en/HTML/Element/fieldset）。 – Sirko 2012-03-16 16:54:55

140

最明顯的，實際的例子是：

<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>

這允許每一個無線電按鈕，同時還提供該組作爲一個整體的標籤進行標記。這在使用輔助技術（例如屏幕閱讀器）的情況下尤爲重要，因爲在視覺呈現中不能隱含控件與圖例的關聯。

來源

2012-03-16 16:57:49 Quentin

我沒有方便的鏈接，但很顯然，許多屏幕閱讀器在字段集中的每個*標籤之前都閱讀了圖例文本。 – 2012-03-16 16:59:47

@Madmartigan - 這是一件好事，這意味着你知道你仍然在處理同一組單選按鈕。（這也是確保圖例簡潔的原因）。 – Quentin 2012-03-16 17:01:37

「輔助技術」，這很有意義。 – 2012-03-16 20:06:59

我發現它適用於CSS樣式並將標籤與控件相關聯。它可以很容易地將可視容器放在一組字段周圍並對齊標籤。

來源

2012-03-16 16:57:07

Fieldset以邏輯方式組織項目，但它也提高了使用聽覺瀏覽器的人的可訪問性。 Fieldset非常方便，因此它在過去很受歡迎，因此它們在html中也實現了它。

來源

2012-03-16 16:57:47

如here所述，此標記的目的是爲表單的組織提供清晰性，並允許設計者更容易地訪問裝飾表單元素。

來源

2012-03-16 16:58:06 dthagard

它是無障礙需要的。

退房： http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

的HTML 4個元素fieldset和legend讓你佈局和組織大型形式的以邏輯方式興趣許多不同的領域，而無需使用表。 fieldset標籤可用於圍繞選定元素創建框，legend標籤將爲這些元素提供標題。通過這種方式，表單元素可以組合在一起形成確定的類別。

不同的瀏覽器可能會以不同的方式顯示默認的fieldset邊框。級聯樣式表可用於刪除邊框或更改其外觀。

來源

2012-03-16 16:58:10

我使用fieldset將表單輸入分組，當我有一個巨大的表單並想要在某種形式嚮導中分解它時。

這個問題在SO上的回答是here。

來源

2012-03-16 16:58:42

我喜歡它，當你用fieldset環繞你的收音機，並且你沒有把id放在你的單選按鈕輸入標籤上時，那麼由fieldset表示的組就會被添加到tabchain中，就好像它是單個項目一樣。

這可讓您通過表格選項卡，當您進入字段集時，您可以使用箭頭鍵更改選定的收音機，然後在完成時將標籤頁移開。

此外，不要忘記無障礙。屏幕閱讀器需要fieldset + legend來理解你的表單，並能夠以某種自然的方式將其讀取給用戶。如果你不希望有遠見的用戶看到它，請隨意消失。使用CSS佈局和樣式化圖例有時是跨瀏覽器，特別是對於傳統瀏覽器，所以我發現使屏幕閱讀器用戶不可見的圖例標記，並添加一個單獨的，aria-hidden =「true」有遠見的用戶可以讓事物變得簡單，並且讓事物易於訪問。

來源

2014-09-02 21:17:55 DWoldrich

'這可以讓你選擇一個表格，當你到達一個字段集時，你可以使用箭頭鍵來改變所選擇的廣播，然後在你完成之後將其標記掉。' - 這是無線電輸入的默認行爲，與fieldsets無關。默認情況下，複選框的行爲不同。 – 2017-09-11 03:42:16

fieldset的另一個功能是禁用它將禁用其中包含的所有字段。

<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>

來源

2017-05-30 15:45:15

爲什麼我們需要fieldset標籤？

回答

相關問題