16. Co to jest element `<fieldset>` w HTML i jak się go używa?

Co to jest element <fieldset> w HTML i jak się go używa?

Element <fieldset> w HTML jest używany do grupowania powiązanych elementów w formularzu. Jest to element blokowy, który pozwala wizualnie i semantycznie organizować sekcje formularza, co ułatwia użytkownikom zrozumienie i nawigację, a deweloperom utrzymanie kodu.

Podstawowe użycie

Aby użyć elementu <fieldset>, po prostu otocz nim elementy formularza, które chcesz pogrupować. Możesz również użyć elementu <legend>, aby dodać nagłówek do grupy, który zazwyczaj jest wyświetlany jako tytuł na górze grupy.

<form>
  <fieldset>
    <legend>Informacje osobiste</legend>
    <label for="name">Imię:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>Szczegóły konta</legend>
    <label for="username">Nazwa użytkownika:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">Hasło:</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <input type="submit" value="Wyślij">
</form>

W tym przykładzie formularz jest podzielony na dwie sekcje: "Informacje osobiste" i "Szczegóły konta". Każda sekcja jest otoczona przez <fieldset>, a <legend> zapewnia tytuł dla każdej grupy.

Dostępność i stylizacja

Używanie <fieldset> i <legend> zwiększa dostępność formularza, ponieważ czytniki ekranowe ogłoszą legendę podczas nawigacji po polach formularza. Poprawia to doświadczenie użytkownika dla osób korzystających z technologii wspomagających.

Z perspektywy stylizacji, elementy <fieldset> często mają domyślną stylizację, która obejmuje ramkę. Możesz dostosować tę stylizację za pomocą CSS:

fieldset {
  border: 2px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-weight: bold;
}

Podsumowanie

Element <fieldset> to potężne narzędzie do strukturyzacji formularzy, zwiększające zarówno użyteczność, jak i dostępność. Poprzez logiczne grupowanie elementów formularza, deweloperzy mogą tworzyć formularze, które są łatwiejsze do zrozumienia i interakcji, co przyczynia się do lepszego ogólnego doświadczenia użytkownika.