Labelki <label> i grupowanie <fieldset>

Aby formularze były bardziej czytelne i dostępne, warto używać specjalnych znaczników, które opisują i grupują elementy formularza.

<label> – opisuje pojedyncze pole formularza (np. pole tekstowe, checkbox, radio button).
<fieldset> i <legend> – grupują powiązane ze sobą elementy w bloki (np. dane kontaktowe, metody płatności).

1. Etykiety pól formularza: <label>

Znacznik <label> jest używany do opisywania pól formularza. Kliknięcie na tekst etykiety automatycznie aktywuje powiązane z nią pole formularza (np. zaznacza checkbox lub przenosi kursor do pola tekstowego).

Podstawowa składnia:

<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email">

Opis atrybutów:

for="id_elementu" – wskazuje, do którego pola odnosi się etykieta (musi zgadzać się z atrybutem id tego pola).

Efekt działania:

Dlaczego warto używać <label>?

Zwiększa dostępność formularzy (czytniki ekranowe odczytują etykiety).
Ułatwia korzystanie z formularza na urządzeniach mobilnych (większe pole do kliknięcia).

2. Grupowanie pól: <fieldset> i <legend>

Znacznik <fieldset> grupuje logicznie powiązane elementy formularza.
Dzięki temu formularz jest bardziej czytelny i uporządkowany.
<legend> to opis grupy, który pojawia się nad polem <fieldset>.

Podstawowa struktura:

<fieldset>
  <legend>Dane osobowe</legend>

  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie"><br><br>

  <label for="nazwisko">Nazwisko:</label>
  <input type="text" id="nazwisko" name="nazwisko">
</fieldset>

Efekt działania:

Dlaczego warto używać <fieldset>?

Poprawia czytelność formularza, szczególnie gdy zawiera on wiele pól.
Ułatwia organizację formularza, dzieląc go na logiczne sekcje (np. dane osobowe, informacje o płatności).
Zwiększa dostępność dla osób korzystających z czytników ekranowych.

3. Kompletny przykład formularza z <label> i <fieldset>

<form>

  <fieldset>
    <legend>Dane kontaktowe</legend>

    <label for="email">Adres e-mail:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="telefon">Telefon:</label><br>
    <input type="tel" id="telefon" name="telefon">
  </fieldset>

  <br>

  <fieldset>
    <legend>Zgody</legend>

    <input type="checkbox" id="regulamin" name="regulamin" value="tak">
    <label for="regulamin">Akceptuję regulamin</label><br>

    <input type="checkbox" id="newsletter" name="newsletter" value="tak">
    <label for="newsletter">Chcę otrzymywać newsletter</label>
  </fieldset>

  <br>

  <button type="submit">Wyślij formularz</button>

</form>

Efekt działania:

✅ Podsumowanie

<label> – opisuje pole formularza, zwiększając jego czytelność i dostępność.
<fieldset> – grupuje powiązane elementy formularza w jedną logiczną sekcję.
<legend> – opisuje grupę elementów w <fieldset>.

🎯 Ćwiczenie w JSFiddle

Przetestuj formularz z polami i grupowaniem w JSFiddle.

Wklej poniższy kod w sekcji HTML i kliknij Run:

<form>

  <fieldset>
    <legend>Dane osobowe</legend>

    <label for="imie">Imię:</label><br>
    <input type="text" id="imie" name="imie"><br><br>

    <label for="nazwisko">Nazwisko:</label><br>
    <input type="text" id="nazwisko" name="nazwisko">
  </fieldset>

  <br>

  <fieldset>
    <legend>Preferencje</legend>

    <input type="checkbox" id="newsletter" name="newsletter" value="tak">
    <label for="newsletter">Zapisz mnie do newslettera</label><br>

    <input type="checkbox" id="zgoda" name="zgoda" value="tak">
    <label for="zgoda">Akceptuję regulamin</label>
  </fieldset>

  <br>

  <button type="submit">Wyślij formularz</button>

</form>

Previous Temat

Back to Zagadnienie

Next Quiz