Kurs HTML

Poprawa użyteczności i dostępności formularzy

Aby formularze były łatwe w obsłudze i dostępne dla wszystkich użytkowników, w tym osób korzystających z technologii wspomagających, kluczowe jest stosowanie etykiet do opisywania pól oraz logiczne grupowanie powiązanych elementów. Służą do tego znaczniki <label>, <fieldset> i <legend>.

Etykiety: <label>

Jak wspomniano w poprzedniej lekcji, znacznik <label> służy do tworzenia opisu (etykiety) dla elementu formularza (np. <input>, <textarea>, <select>). Jest to niezbędne dla dostępności i znacznie poprawia użyteczność.

Sposoby powiązania <label> z polem:

1. Jawne powiązanie (zalecane): Użycie atrybutu for w znaczniku <label>, którego wartość jest identyczna jak wartość atrybutu id powiązanego elementu formularza.

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

To podejście jest najbardziej elastyczne, ponieważ etykieta i pole nie muszą być obok siebie w kodzie HTML.

2. Niejawne powiązanie: Umieszczenie elementu formularza wewnątrz znacznika <label>. W tym przypadku nie trzeba używać atrybutów for i id (choć nadal warto nadać id dla innych celów, np. CSS/JS).

<label>
  Nazwa użytkownika:
  <input type="text" name="username">
</label>Kopiuj

Chociaż ten sposób działa, jawne powiązanie za pomocą for i id jest generalnie uważane za bardziej niezawodne i zalecane, zwłaszcza dla technologii wspomagających.

Korzyści z używania <label>:

• Dostępność: Czytniki ekranu odczytują tekst etykiety, gdy użytkownik trafi na powiązane pole, informując go, jakie dane ma wprowadzić.
• Użyteczność: Kliknięcie na tekst etykiety (w przypadku jawnego powiązania) automatycznie ustawia fokus na powiązanym polu formularza. Jest to szczególnie pomocne przy małych elementach, takich jak przyciski opcji (radio) czy pola wyboru (checkbox).
• Przejrzystość kodu: Jasno pokazuje, który opis dotyczy którego pola.

Zawsze używaj etykiet dla wszystkich interaktywnych elementów formularza!

Grupowanie elementów: <fieldset>

W dłuższych lub bardziej złożonych formularzach często warto grupować powiązane ze sobą elementy (np. pola adresu, zestaw opcji wyboru). Do tego celu służy znacznik <fieldset>.

<fieldset> tworzy logiczną grupę dla zawartych w nim elementów formularza. Domyślnie przeglądarki często rysują ramkę wokół zawartości <fieldset>, ale wygląd ten można łatwo zmienić za pomocą CSS.

Tytuł grupy: <legend>

Aby nadać grupie elementów wewnątrz <fieldset> opisowy tytuł (legendę), używa się znacznika <legend>.

• Znacznik <legend> musi być pierwszym dzieckiem znacznika <fieldset>.
• Tekst zawarty w <legend> jest odczytywany przez czytniki ekranu jako tytuł grupy pól, co pomaga użytkownikom zrozumieć kontekst.
• Domyślnie przeglądarki często wyświetlają tekst legendy wkomponowany w górną ramkę <fieldset>.

Przykład użycia <fieldset> i <legend>:

<form action="/submit" method="post">
  <fieldset>
    <legend>Dane osobowe</legend>
    
    <div>
      <label for="fs-imie">Imię:</label>
      <input type="text" id="fs-imie" name="imie">
    </div>
    
    <div>
      <label for="fs-nazwisko">Nazwisko:</label>
      <input type="text" id="fs-nazwisko" name="nazwisko">
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Dane kontaktowe</legend>
    
    <div>
      <label for="fs-email">E-mail:</label>
      <input type="email" id="fs-email" name="email">
    </div>
    
    <div>
      <label for="fs-telefon">Telefon:</label>
      <input type="tel" id="fs-telefon" name="telefon">
    </div>
  </fieldset>
  
  <button type="submit">Zapisz</button>
</form>Kopiuj

W tym przykładzie mamy dwie grupy pól (<fieldset>): "Dane osobowe" i "Dane kontaktowe", każda z własnym tytułem (<legend>). Poprawia to wizualną organizację formularza i pomaga użytkownikom technologii wspomagających zrozumieć strukturę.

Stylizacja <fieldset> i <legend>

Domyślna ramka <fieldset> i wygląd <legend> mogą nie pasować do designu strony. Można je łatwo stylizować za pomocą CSS:

fieldset {
  border: 1px solid #ddd; /* Zmiana stylu ramki */
  padding: 20px;          /* Wewnętrzny odstęp */
  margin-bottom: 20px;    /* Odstęp między grupami */
  border-radius: 5px;     /* Zaokrąglenie rogów */
}

legend {
  font-weight: bold;    /* Pogrubienie tytułu */
  color: #333;
  padding: 0 10px;      /* Odstępy po bokach legendy */
  margin-left: 10px;    /* Małe przesunięcie od lewej krawędzi */
}Kopiuj

Aby całkowicie usunąć ramkę, można ustawić border: none; dla fieldset.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: W formularzu kontaktowym z poprzedniej lekcji (zawierającym pola: imię, hasło, wiadomość) użyj znacznika <fieldset>, aby zgrupować wszystkie te pola. Dodaj <legend> z tytułem "Dane wiadomości". Upewnij się, że wszystkie pola mają poprawnie powiązane etykiety <label>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Grupowanie</title>
    <style>
        label {
            display: block; 
            margin-top: 10px;
        }
        input[type="text"], input[type="password"], textarea {
            width: 90%;
            max-width: 300px;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
        }
        button {
            margin-top: 15px;
            padding: 10px 15px;
        }
        fieldset {
            border: 1px dashed #aaa; /* Stylizacja ramki */
            padding: 15px;
            margin-bottom: 20px;
        }
        legend {
            font-weight: bold;
            color: navy;
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <h1>Kontakt</h1>
    
    <form action="/wyslij-wiadomosc" method="POST">
        <fieldset>
            <legend>Dane wiadomości</legend>
            
            <div>
                <label for="contact-imie">Imię:</label>
                <input type="text" id="contact-imie" name="imie_uzytkownika" required>
            </div>
            
            <div>
                <label for="contact-haslo">Hasło (dla ćwiczenia):</label>
                <input type="password" id="contact-haslo" name="haslo_uzytkownika">
            </div>
            
            <div>
                <label for="contact-wiadomosc">Wiadomość:</label>
                <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required></textarea>
            </div>
        </fieldset>
        
        <button type="submit">Wyślij wiadomość</button>
    </form>

</body>
</html>Kopiuj