Dlaczego potrzebujemy tagu fieldset?

165

Dlaczego potrzebujemy <fieldset>tagu? Niezależnie od celu, jaki służy, jest prawdopodobnie podzbiorem tagu formularza.

Wyszukałem informacje o W3Schools, które mówią:

  • <fieldset>Znacznik jest używany do grupowania elementów w formie.
  • <fieldset>Tag rysuje ramkę wokół powiązanych elementów.

Więcej wyjaśnień dla tych, którzy mylą „dlaczego istnieje w specyfikacji” z „tym, co robi”. Myślę, że część rysunkowa jest nieistotna i nie widzę powodu, dla którego potrzebujemy specjalnego znacznika tylko po to, aby zgrupować niektóre powiązane elementy w formie.

Wschodni mnich
źródło
30
Po co nam jakiś tag? Po co nam tag img, skoro możemy stworzyć obraz z 1px div z kolorami tła?
Oded
127
Uwaga: W3C nie ma nic wspólnego z w3schools.
Wesley Murch
82
Nie odwołuj się do w3schools. Po prostu użyj MDN: fieldset @ MDN .
Sirko
9
@Madmartigan Wiem. Ale W3C podaje tylko specyfikację, która nie była dla mnie przydatna, aby uzyskać odpowiedź na moje pytanie.
Eastern Monk
2
O (nie) korzystaniu z W3Schools i korzystaniu z bardziej wiarygodnych witryn w celu uzyskania informacji technicznych: w3fools.com
Denilson Sá Maia

Odpowiedzi:

187

Najbardziej oczywistym, praktycznym przykładem jest:

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

Pozwala to na oznaczenie każdego przycisku radiowego, zapewniając jednocześnie etykietę dla całej grupy. Jest to szczególnie ważne, gdy używana jest technologia wspomagająca (taka jak czytnik ekranu), gdzie skojarzenia elementów sterujących i ich legendy nie można implikować za pomocą prezentacji wizualnej.

Quentin
źródło
4
Nie mam pod ręką linku, ale najwyraźniej wielu czytników ekranu czyta tekst legendy przed każdą etykietą w zestawie pól.
Wesley Murch
8
@Madmartigan - To dobrze, oznacza to, że wiesz, że nadal masz do czynienia z tym samym zestawem przycisków opcji. (Jest to również powód, aby zapewnić zwięzłość legendy ).
Quentin
1
„technologia wspomagająca”, która ma dużo sensu.
Eastern Monk
5
Ponadto <fieldset> może służyć do „wyłączania” zgrupowanych elementów. Spodziewałbym się, że <fieldset> należy również użyć do określenia, czy grupa jest wymagana, dodając atrybut „required” do tagu, niestety to nie działa!
Simon Savai
41

Inną cechą zestawu pól jest to, że wyłączenie go powoduje wyłączenie wszystkich zawartych w nim pól.

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

Collin Price
źródło
6
Oczywiście można by argumentować, że disabledatrybut funkcjonujący dla fieldsetkontrolek s i form, powinien być słusznie zaimplementowany również dla formelementu. Miałoby to sens, prawda?
rano
25

Jest potrzebny do ułatwienia dostępu.

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

Elementy HTML 4 fieldseti legendpozwalają na układanie i organizowanie dużego formularza z wieloma różnymi obszarami zainteresowań w logiczny sposób bez użycia tabel. fieldsetZnacznik mogą być wykorzystywane do tworzenia bloki wybranych elementów i legendznaczników daje podpis do tych elementów. W ten sposób elementy formularza można pogrupować w określone kategorie.

Różne przeglądarki mogą wyświetlać domyślne fieldsetobramowanie na różne sposoby. Aby usunąć obramowanie lub zmienić jego wygląd, można użyć kaskadowych arkuszy stylów.

Eric Sites
źródło
zestaw pól nie występuje w HTML4. Jest to funkcja HTML5
radio_head
5
Wyszło w HTML 4.0.1 - w3.org/TR/html401/interact/forms.html#h-17.10
Eric Sites
14

Jak opisano tutaj , celem tego znacznika jest zapewnienie przejrzystości organizacji formy i umożliwienie projektantowi łatwiejszego dostępu do ozdabiania elementów formularza.

dthagard
źródło
6

Fieldset logicznie organizuje elementy w formularzach, ale także poprawia dostępność dla tych, którzy używają przeglądarek słuchowych. Fieldset jest poręczny i dlatego był bardzo popularny w przeszłości w wielu aplikacjach, więc zaimplementowano go również w html.

Boris D. Teoharov
źródło
4

Podoba mi się to, że kiedy otaczasz swoje radia zestawem pól i nie umieszczasz identyfikatorów na tagach wejściowych przycisku radiowego, wówczas grupa reprezentowana przez zestaw pól jest dodawana do tabchain tak, jakby była pojedynczym elementem.

Umożliwia to przechodzenie przez formularz, a kiedy dojdziesz do zestawu pól, możesz użyć klawiszy strzałek, aby zmienić wybrane radio, a po zakończeniu możesz odejść tabulatorem.

Nie zapomnij też o dostępności. Czytniki ekranu potrzebują zestawu pól + legendy, aby zrozumieć formularz i móc odczytać go użytkownikowi w jakiś naturalny sposób. Możesz zniknąć legendę, jeśli nie chcesz, aby widzący użytkownicy ją widzieli. Układanie i stylizowanie legendy za pomocą CSS jest czasami ryzykowne, zwłaszcza w starszych przeglądarkach, więc uważam, że znacznik legendy jest niewidoczny dla użytkowników czytników ekranu i dodam oddzielny zakres aria-hidden = "true" w stylu etykiety dla widzący użytkownicy ułatwiają stylizację i zapewniają dostępność.

DWoldrich
źródło
This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- To jest domyślne zachowanie wejść radiowych i nie ma nic wspólnego z zestawami pól. Pola wyboru domyślnie zachowują się inaczej.
Vladimir Kornea,
2

Uważam, że jest to przydatne do stylizacji CSS i kojarzenia etykiet z kontrolkami. Ułatwia umieszczenie wizualnego kontenera wokół grupy pól i wyrównanie etykiet.

Chuck Spohr
źródło
2

Używam zestawów pól do grupowania danych wejściowych formularzy, gdy mam ogromny formularz i chcę go rozbić w rodzaju kreatora formularzy.

Na te same pytania odpowiedziano tutaj na SO.

Eric H.
źródło
2

Podsumowując tylko niektóre zalety:

Element HTML  <fieldset> służy do grupowania kilku kontrolek, a także etykiet ( <label>) w formularzu internetowym, zgodnie z definicją MDN .

Innymi słowy: tag fieldset umożliwia logiczne grupowanie zestawów pól, aby formularze były bardziej opisowe. Tak więc zestaw formantów formularza jest opcjonalnie zgrupowanych pod wspólną nazwą.

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

Zalety ” korzystania z zestawu pól to:

  • Umożliwiają one oznaczenie danych (w tym przypadku formularza) w najbardziej dostępny semantyczny sposób. Weź pod uwagę, że umieszczanie pól w zestawie pól jest bardziej opisowe niż umieszczanie pól w div. Element div nie mówi nic o relacji między polami, a zestaw pól mówi, że istnieje związek.
  • używając opcji disabled , pozwala na wyłączenie i całej jego zawartości za jednym razem.
  • pomocna jest dostępność
mmsilviu
źródło
1

Jak dla mnie, jedną z największych zalet <fieldset>...</fieldset>elementu jest możliwość zachowania <form>...</form>kontekstu, nawet jeśli <fieldset>...</fieldset>nie ma go wewnątrz formularza.

Na przykład następujący formularz:

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

jest semantycznie identyczna z następującą postacią:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>
altgov3en
źródło