Kurs HTML

Umożliwianie użytkownikom dokonywania wyborów

Oprócz wprowadzania tekstu, formularze często wymagają od użytkowników dokonania wyboru spośród dostępnych opcji. Do tego celu służą głównie dwa typy pól <input>: przyciski opcji (radio buttons) i pola wyboru (checkboxes).

Przyciski opcji: <input type="radio">

Przyciski opcji (radio buttons) pozwalają użytkownikowi wybrać tylko jedną opcję z danej grupy. Są idealne do pytań typu "wybierz jedną odpowiedź".

Kluczowe cechy i atrybuty <input type="radio">:

• type="radio": Definiuje pole jako przycisk opcji.
• name: Kluczowy atrybut! Wszystkie przyciski opcji należące do tej samej grupy (z której można wybrać tylko jedną opcję) muszą mieć tę samą wartość atrybutu name. To właśnie wspólna nazwa grupuje je i zapewnia, że tylko jeden z nich może być zaznaczony jednocześnie.
• value: Określa wartość, która zostanie wysłana na serwer, jeśli dany przycisk opcji zostanie zaznaczony i formularz wysłany. Każdy przycisk w grupie powinien mieć unikalną wartość value.
• id: Unikalny identyfikator, niezbędny do powiązania z etykietą <label>.
• checked: Atrybut logiczny. Jeśli jest obecny, dany przycisk opcji będzie domyślnie zaznaczony przy załadowaniu strony. W danej grupie (o tej samej nazwie name) tylko jeden przycisk może mieć atrybut checked.
• required: Jeśli jest dodany do przynajmniej jednego przycisku radio w grupie o tej samej nazwie, użytkownik musi wybrać jedną z opcji w tej grupie przed wysłaniem formularza.

Przykład grupy przycisków opcji:

<form action="/submit" method="post">
  <fieldset>
    <legend>Wybierz ulubiony kolor:</legend>
    
    <div>
      <input type="radio" id="kolor-czerwony" name="ulubiony_kolor" value="czerwony" checked>
      <label for="kolor-czerwony">Czerwony</label>
    </div>
    
    <div>
      <input type="radio" id="kolor-zielony" name="ulubiony_kolor" value="zielony">
      <label for="kolor-zielony">Zielony</label>
    </div>
    
    <div>
      <input type="radio" id="kolor-niebieski" name="ulubiony_kolor" value="niebieski">
      <label for="kolor-niebieski">Niebieski</label>
    </div>
  </fieldset>
  
  <button type="submit">Wyślij</button>
</form>Kopiuj

W tym przykładzie wszystkie trzy przyciski mają name="ulubiony_kolor", co sprawia, że tworzą grupę. Tylko jeden z nich może być zaznaczony. Jeśli użytkownik wybierze "Zielony" i wyśle formularz, na serwer zostanie wysłana para ulubiony_kolor=zielony.

Pola wyboru: <input type="checkbox">

Pola wyboru (checkboxes) pozwalają użytkownikowi wybrać zero, jedną lub więcej opcji z danej grupy. Są idealne do pytań typu "zaznacz wszystkie pasujące odpowiedzi" lub jako pojedyncze przełączniki typu "tak/nie".

Kluczowe cechy i atrybuty <input type="checkbox">:

• type="checkbox": Definiuje pole jako pole wyboru.
• name: Określa nazwę, pod jaką wartość pola zostanie wysłana. W przeciwieństwie do radio buttons, pola wyboru w jednej grupie logicznej mogą (i często mają) ten sam atrybut name. Serwer musi być przygotowany na odebranie wielu wartości pod tą samą nazwą (np. jako tablica).
• value: Określa wartość, która zostanie wysłana na serwer, jeśli pole wyboru jest zaznaczone. Jeśli pole nie jest zaznaczone, nic nie jest wysyłane dla tego pola.
• id: Unikalny identyfikator, do powiązania z <label>.
• checked: Atrybut logiczny. Jeśli jest obecny, pole wyboru będzie domyślnie zaznaczone. Można zaznaczyć domyślnie wiele pól wyboru.
• required: Wymaga zaznaczenia tego konkretnego pola wyboru. Rzadziej używane dla grup checkboxów, częściej dla pojedynczych, np. akceptacji regulaminu.

Przykład grupy pól wyboru:

<form action="/submit" method="post">
  <fieldset>
    <legend>Jakie języki programowania znasz?</legend>
    
    <div>
      <input type="checkbox" id="lang-html" name="jezyki[]" value="html">
      <label for="lang-html">HTML</label>
    </div>
    
    <div>
      <input type="checkbox" id="lang-css" name="jezyki[]" value="css" checked>
      <label for="lang-css">CSS</label>
    </div>
    
    <div>
      <input type="checkbox" id="lang-js" name="jezyki[]" value="javascript" checked>
      <label for="lang-js">JavaScript</label>
    </div>
     <div>
      <input type="checkbox" id="lang-php" name="jezyki[]" value="php">
      <label for="lang-php">PHP</label>
    </div>
  </fieldset>
  
  <button type="submit">Wyślij</button>
</form>Kopiuj

W tym przykładzie wszystkie pola mają name="jezyki[]". Użycie nawiasów kwadratowych [] w nazwie jest konwencją (szczególnie popularną w PHP), która podpowiada serwerowi, aby potraktował te dane jako tablicę. Jeśli użytkownik zaznaczy CSS i JavaScript i wyśle formularz, serwer może otrzymać coś w rodzaju jezyki = ['css', 'javascript'] (dokładny format zależy od technologii serwerowej).

Pojedyncze pole wyboru (np. akceptacja regulaminu):

<div>
  <input type="checkbox" id="zgoda" name="akceptacja_regulaminu" value="tak" required>
  <label for="zgoda">Akceptuję regulamin serwisu.</label>
</div>Kopiuj

W tym przypadku, jeśli pole jest zaznaczone, wysłana zostanie para akceptacja_regulaminu=tak. Jeśli nie jest zaznaczone, nic nie zostanie wysłane pod tą nazwą. Atrybut required zapewnia, że użytkownik musi zaznaczyć to pole.

Dostępność i etykiety

Dla przycisków opcji i pól wyboru używanie poprawnie powiązanych etykiet <label> jest szczególnie ważne. Same kontrolki (kółka i kwadraty) są małe, a kliknięcie na tekst etykiety znacznie ułatwia ich zaznaczenie. Dla czytników ekranu etykieta jest jedynym sposobem, aby dowiedzieć się, czego dotyczy dana opcja.

Grupowanie powiązanych przycisków opcji lub pól wyboru wewnątrz <fieldset> z odpowiednią <legend> dodatkowo poprawia strukturę i dostępność, jasno komunikując cel całej grupy opcji.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Dodaj do formularza kontaktowego (w nowym <fieldset> z legendą "Preferencje kontaktu") dwie grupy opcji:

1. Przyciski opcji (radio) pozwalające wybrać preferowaną formę kontaktu: "E-mail" lub "Telefon" (domyślnie zaznaczony "E-mail"). Użyj wspólnej nazwy name="forma_kontaktu".
2. Pola wyboru (checkbox) pozwalające zaznaczyć zainteresowania: "HTML", "CSS", "JavaScript". Użyj wspólnej nazwy name="zainteresowania[]".

Pamiętaj o etykietach dla wszystkich opcji.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz Kontaktowy - Opcje</title>
    <style>
        /* Style z poprzedniej lekcji */
        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; padding: 15px; margin-bottom: 20px; }
        legend { font-weight: bold; color: navy; padding: 0 5px; }
        /* Dodatkowe style dla radio/checkbox */
        fieldset div { margin-bottom: 8px; }
        input[type="radio"], input[type="checkbox"] { margin-right: 5px; }
        label { display: inline-block; margin-top: 0; } /* Etykiety obok radio/checkbox */
        fieldset > div > label { display: block; margin-top: 10px; } /* Etykiety pól tekstowych w fieldset */
    </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-wiadomosc">Wiadomość:</label>
                <textarea id="contact-wiadomosc" name="tresc_wiadomosci" rows="4" required></textarea>
            </div>
        </fieldset>

        <fieldset>
            <legend>Preferencje kontaktu</legend>
            <p>Preferowana forma kontaktu:</p>
            <div>
                <input type="radio" id="kontakt-email" name="forma_kontaktu" value="email" checked>
                <label for="kontakt-email">E-mail</label>
            </div>
            <div>
                <input type="radio" id="kontakt-telefon" name="forma_kontaktu" value="telefon">
                <label for="kontakt-telefon">Telefon</label>
            </div>

            <p style="margin-top: 15px;">Zainteresowania:</p>
            <div>
                <input type="checkbox" id="zainteresowanie-html" name="zainteresowania[]" value="html">
                <label for="zainteresowanie-html">HTML</label>
            </div>
            <div>
                <input type="checkbox" id="zainteresowanie-css" name="zainteresowania[]" value="css">
                <label for="zainteresowanie-css">CSS</label>
            </div>
            <div>
                <input type="checkbox" id="zainteresowanie-js" name="zainteresowania[]" value="javascript">
                <label for="zainteresowanie-js">JavaScript</label>
            </div>
        </fieldset>
        
        <button type="submit">Wyślij wiadomość</button>
    </form>

</body>
</html>Kopiuj