Dlaczego potrzebujemy tagu fieldset?

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.

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.

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>

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.

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

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.

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ść.

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.

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.

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

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>