Jaki jest prawidłowy element HTML do tworzenia pola wyboru?

Prawidłowym elementem HTML do tworzenia pola wyboru (checkboxa) jest <input type="checkbox">. Element ten pozwala użytkownikowi zaznaczyć lub odznaczyć wybraną opcję. Najczęściej jest wykorzystywany, gdy w ramach jednej grupy można zaznaczyć więcej niż jedną odpowiedź, na przykład w ankietach, preferencjach czy akceptacji warunków.

Składnia podstawowa checkboxa

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

• Type=”checkbox” – wskazuje, że pole jest polem wyboru;
• Name – określa nazwę pola, pod jaką zostanie przesłana jego wartość;
• Value – wartość przekazywana do formularza, gdy pole jest zaznaczone;
• Tekst po polu służy jako opis dla użytkownika.

Przykłady zastosowania

1. Pojedynczy checkbox

Checkbox można wykorzystać np. do zgód marketingowych:

<form>
  <input type="checkbox" name="zgoda_marketingowa" value="tak" id="zgoda">
  <label for="zgoda">Wyrażam zgodę na otrzymywanie informacji handlowych</label>
</form>

2. Lista wielokrotnego wyboru

Checkboxy najczęściej stosuje się w grupach – użytkownik może zaznaczyć więcej niż jedną opcję. Wszystkie checkboxy z tej samej grupy powinny mieć taką samą nazwę (name), by przesyłać tablicę odpowiedzi:

<form>
  <p>Wybierz swoje ulubione owoce:</p>
  <input type="checkbox" name="owoce[]" value="jabłko" id="owoc_jablko">
  <label for="owoc_jablko">Jabłko</label>
  <input type="checkbox" name="owoce[]" value="banan" id="owoc_banan">
  <label for="owoc_banan">Banan</label>
  <input type="checkbox" name="owoce[]" value="gruszka" id="owoc_gruszka">
  <label for="owoc_gruszka">Gruszka</label>
</form>

Po przesłaniu formularza do serwera trafią wszystkie zaznaczone wartości.

Przydatne atrybuty dla checkboxa

• Checked – domyślnie zaznacza pole przy załadowaniu strony;
• Disabled – pole jest wyszarzone, nieaktywne dla użytkownika;
• Id – unikalny identyfikator pomocny przy stosowaniu etykiet (<label>).

Przykład domyślnie zaznaczonego i nieaktywnego pola

<input type="checkbox" name="newsletter" value="tak" checked>
<input type="checkbox" name="test" value="nie" disabled>

Jak powiązać checkbox z etykietą (label)?

Stosowanie <label> poprawia dostępność i pozwala na zaznaczanie pola kliknięciem w tekst:

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

Checkbox vs. select/multiple

W wielu miejscach można spotkać podobny interfejs z użyciem select i atrybutu multiple. Oba mechanizmy służą do wyboru wielu odpowiedzi, ale checkboxy są bardziej czytelne, gdy opcji jest niewiele i zależy nam na szybkim wyborze. Gdy opcji jest wiele, lepszym wyborem będzie pole <select multiple>.

Przykład:

Stylizacja checkboxów

Domyślny wygląd checkboxa zależy od przeglądarki. Prostą manipulację można uzyskać za pomocą CSS, ale zaawansowane efekty zwykle wymagają dodatkowych rozwiązań (grafika, JavaScript).

Przykład podstawowej stylizacji:

input[type="checkbox"] {
  accent-color: green;
}

Podsumowanie

• Checkbox (<input type="checkbox">) służy do tworzenia pól wielokrotnego wyboru;
• Każdy checkbox można indywidualnie zaznaczać lub odznaczać;
• Do poprawnej obsługi checkboxów warto stosować opisowe etykiety <label>;
• Na potrzeby bardziej zaawansowanych formularzy lub większych list opcji rozważ użycie <select multiple>.

W projektach internetowych checkboxy są jednym z najczęściej wykorzystywanych elementów formularzy, zapewniając użytkownikom intuicyjną i szybką interakcję z wybraną zawartością.