Pola wyboru: <select>, <option>, <checkbox>, <radio>

Pola wyboru: <select>, <option>, <checkbox>, <radio>

W formularzach HTML często zachodzi potrzeba umożliwienia użytkownikowi wyboru jednej lub kilku opcji. W tym celu używamy specjalnych elementów formularzy: list rozwijanych, przycisków radiowych oraz pól typu checkbox.

1. Listy rozwijane: <select> i <option>

Listy rozwijane pozwalają użytkownikowi wybrać jedną (lub wiele, przy odpowiednich ustawieniach) opcji z listy.

Podstawowa struktura:

<select name="kraj">
  <option value="pl">Polska</option>
  <option value="de">Niemcy</option>
  <option value="fr">Francja</option>
</select>

Opis atrybutów:

• name – nazwa pola, która zostanie przesłana na serwer.
• value w <option> – wartość, która zostanie przesłana po wyborze.

Efekt działania:

Dodatkowe opcje:

• selected – oznacza opcję domyślnie zaznaczoną.
• disabled – wyłącza możliwość wyboru opcji.

Przykład z domyślnym wyborem:

<select name="kraj">
  <option value="pl" selected>Polska</option>
  <option value="de">Niemcy</option>
  <option value="fr">Francja</option>
</select>

2. Przycisk jednokrotnego wyboru: <input type=”radio”>

Przyciski typu radio umożliwiają wybranie **jednej** opcji z grupy.
Każda opcja ma ten sam atrybut name, co grupuje je razem.

Podstawowa struktura:

<input type="radio" name="platnosc" value="karta"> Karta kredytowa <br>
<input type="radio" name="platnosc" value="paypal"> PayPal <br>
<input type="radio" name="platnosc" value="blik"> BLIK

Opis atrybutów:

• type="radio" – definiuje pole typu radio.
• name – łączy opcje w jedną grupę (można zaznaczyć tylko jedną z nich).
• value – wartość wysyłana po zaznaczeniu opcji.

Efekt działania:

Dodatkowe opcje:

• checked – zaznacza domyślnie jedną z opcji.

<input type="radio" name="platnosc" value="paypal" checked> PayPal

3. Pole wielokrotnego wyboru: <input type=”checkbox”>

Pola typu checkbox pozwalają użytkownikowi zaznaczyć **jedną, wiele lub żadną** z dostępnych opcji.
Każde pole działa niezależnie, w przeciwieństwie do radio buttonów.

Podstawowa struktura:

<input type="checkbox" name="zgoda" value="tak"> Akceptuję regulamin

Efekt działania:

Dodatkowe opcje:

• checked – opcja zaznaczona domyślnie.

<input type="checkbox" name="zgoda" value="tak" checked> Akceptuję regulamin

4. Kompletny przykład formularza z polami wyboru

<form>
  <label for="kraj">Wybierz swój kraj:</label><br>
  <select id="kraj" name="kraj">
    <option value="pl">Polska</option>
    <option value="de">Niemcy</option>
    <option value="fr">Francja</option>
  </select><br><br>

  <p>Wybierz metodę płatności:</p>
  <input type="radio" name="platnosc" value="karta"> Karta kredytowa<br>
  <input type="radio" name="platnosc" value="paypal" checked> PayPal<br>
  <input type="radio" name="platnosc" value="blik"> BLIK<br><br>

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

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

Efekt działania:

✅ Podsumowanie

• <select> i <option> – tworzą listę rozwijaną.
• <input type="radio"> – umożliwia wybór jednej opcji z grupy.
• <input type="checkbox"> – pozwala zaznaczyć jedną lub więcej opcji niezależnie.

🎯 Ćwiczenie w JSFiddle

Przetestuj formularz z różnymi polami wyboru w JSFiddle.

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

<form>
  <label for="kraj">Wybierz kraj:</label><br>
  <select id="kraj" name="kraj">
    <option value="pl">Polska</option>
    <option value="de">Niemcy</option>
    <option value="fr">Francja</option>
  </select><br><br>

  <p>Twoja ulubiona metoda płatności:</p>
  <input type="radio" name="platnosc" value="karta"> Karta<br>
  <input type="radio" name="platnosc" value="paypal"> PayPal<br>

  <p>Zgody:</p>
  <input type="checkbox" name="regulamin" value="tak"> Akceptuję regulamin<br>
  <input type="checkbox" name="newsletter" value="tak"> Chcę otrzymywać newsletter<br><br>

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