Pole wyboru <input "checkbox">

Pole wyboru <input "checkbox"> #

<form action="...">
	<input type="checkbox" name="nazwa" value="wartość">Tu wpisz opis pola
</form>

Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!

Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi.

Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikalny identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.
Jeżeli wysyłasz formularz do skryptu po stronie serwera (np. PHP lub CGI), może to wymagać nadania innej nazwy (atrybut name="...") dla każdego pola tego typu, nawet jeśli dotyczą one tego samego pytania. Jeśli chodzi o PHP jako nazwy wszystkich pól tego samego pytania można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych elementów (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile pól zostanie zaznaczonych).

Przykład <input "checkbox">

Zwróć uwagę, że możesz zaznaczyć więcej niż jedno pole tego typu lub nawet nie zaznaczać żadnego. Zaznaczone pole możesz także "odznaczyć", powtórnie klikając na nie myszką:

Domyślne zaznaczenie pola <input "checkbox" checked> #

<input type="checkbox" name="nazwa" value="wartość" checked>Opis pola

Podanie atrybutu checked powoduje domyślne zaznaczenie pola. Możliwe jest zaznaczenie kilku pól tego typu, które dotyczą tego samego pytania.

Przykład <input "checkbox" checked>

Blokada pola <input "checkbox" disabled> #

<input type="checkbox" name="nazwa" value="wartość" disabled>Opis pola

Wstawienie atrybutu disabled powoduje zablokowanie pola.

UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

Przykład <input "checkbox" disabled>

Etykieta <label> #

Opis pola nie jest z nim w żaden sposób związany logicznie. Aby to zmienić, należy użyć dodatkowego znacznika <label>...</label>, wewnątrz którego wpisujemy opis kontrolki formularza, który ma być z nią związany:

📋 Zaznacz kod ▶ Edytuj na żywo

<label><input type="checkbox" name="nazwa" value="wartość">
To jest etykieta pola obok</label>

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" id="pole1">
<label for="pole1">To jest etykieta pola obok</label>

Polecenie takie wprowadza na ekran etykietę z tekstowym opisem pola, która jest z nim skojarzona logicznie. Dzięki temu kliknięciu etykiety powoduje zwykle taki sam efekt jak kliknięcie samego pola, tzn. jego zaznaczenie lub odznaczenie, a dodatkowo wskazanie etykiety myszką może spowodować "podświetlenie" pola. Tekst etykiety może się znajdować przed lub za elementem formularza, do którego się odnosi.

Zwykle zupełnie wystarczający jest pierwszy z podanych sposobów przypisywania etykiety. Wyobraźmy sobie jednak sytuację, kiedy elementy formularza są umieszczone w tabeli w taki sposób, że w pierwszej kolumnie każdego wiersza znajdują się opisy (etykiety), a w drugiej - pola. W takim przypadku nie można objąć znacznikiem <label>...</label> zarówno tekstu opisu jak i pola formularza, ponieważ etykieta musiałaby obejmować dwie różne komórki tabeli, co jest niedozwolone. W takim właśnie przypadku należy wykorzystać drugi z wymienionych sposobów - z podaniem identyfikatora id="..." i odniesieniem do niego for="...". Zwróć uwagę, że wartości wyróżnionych atrybutów muszą być takie same dla etykiety oraz dla pola, którego dotyczy. Ponadto w jednym dokumencie nie mogą znajdować się dwa pola o takim samym identyfikatorze (atrybut id="...").

Etykiety można przypisywać do wszystkich typów pól formularza.

UWAGA! Etykiet nie można zagnieżdżać, tzn. umieszczać jednej wewnątrz drugiej.

Przykład <label, input "checkbox">

(spróbuj kliknąć opisy powyższych pól)

Klawisz skrótu <input "checkbox" accesskey> #

Możliwe jest przypisanie klawisza skrótu do danego pola (atrybut accesskey="klawisz"). Jeśli wciśniemy na klawiaturze kombinację Alt+klawisz (w przeglądarce Opera należy wcisnąć Shift+Esc+klawisz), zogniskowanie zostanie przeniesione do danego pola. Jeżeli będzie to pole tekstowe, pojawi się w nim kursor tekstowy, natomiast dla pola wyboru (oraz opcji) spowoduje to jego zaznaczenie/odznaczenie. O dostępnych klawiszach skrótu informuje się zwykle poprzez podkreślenie litery w opisie pola, która stanowi skrót:

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" accesskey="a">Pole <u>a</u> (wciśnij Alt+A; jeśli używasz opery, wciśnij Shift+Esc+A)

Atrybut accesskey="..." można zastosować dla znaczników: A, AREA, BUTTON, LABEL, LEGEND, TEXTAREA oraz INPUT.

Przykład <input "checkbox" accesskey>

Dynamiczne blokowanie pól formularza #

Zdarza się, że niektóre pola powinny stać się dostępne dopiero po zaznaczeniu określonej opcji wyboru, np. kiedy w formularzu umieszczona jest grupa pól wyboru, z których jedno nosi nazwę "Inne", a obok znajduje się pole tekstowe do wpisania innej możliwości przez użytkownika, ale tylko gdy wcześniej zostanie zaznaczone to pole wyboru. Normalnie istnieje możliwość wpisania przez użytkownika tekstu w to pole, ale bez zaznaczenia odpowiedniej opcji wyboru "Inne". Lepiej by było, aby pole tekstowe było zablokowane, dopóki użytkownik nie zaznaczy tego pola wyboru. Statyczny HTML nie udostępnia takich możliwości, jednak problem daje się łatwo rozwiązać za pomocą JavaScript:

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>

Przykład <input "checkbox" onclick>

Po wybraniu opcji, pole tekstowe zostanie odblokowane:

Możliwe jest również odblokowanie kilku pól naraz (dowolnych typów):

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<input type="text" name="nazwa2" disabled>
<input type="text" name="nazwa3" disabled>

Po wybraniu opcji, oba pola tekstowe zostaną odblokowane:

Czasem w formularzach mamy do czynienia z sytuacją odwrotną, tzn. jakieś pole lub kilka pól tekstowych (albo dowolnych innych typów) powinny stać się niedostępne po zaznaczeniu określonej opcji wyboru. Na przykład nie ma sensu pytać użytkownika o dalsze szczegóły dotyczące jego samochodu, gdy wcześniej zaznaczy opcję, że nie posiada własnego pojazdu.

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.checked">
<input type="text" name="nazwa2">

Po wybraniu opcji, pole tekstowe zostanie zablokowane:

Podobnie jak w poprzednim przypadku, możliwe jest zablokowanie kilku pól naraz (dowolnych typów):

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<input type="text" name="nazwa2">
<input type="text" name="nazwa3">

Po wybraniu opcji, oba pola tekstowe zostaną zablokowane:

Dynamiczne ukrywanie pól formularza

Samo blokowanie niepotrzebnych pól formularza w większości przypadku jest zupełnie wystarczające. Czasem jednak formularze są na tyle skomplikowane, że wyświetlanie wszystkich zablokowanych pól znacznie zaciemniłoby i bardzo utrudniło poprawne wypełnienie danych. W takiej sytuacji lepiej wyświetlić określona pola, dopiero gdy będą potrzebne, tzn. gdy użytkownik zaznaczy odpowiednią opcję wyboru:

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'block' : 'none'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = !this.checked">
<div id="identyfikator" style="display: none">
	<input type="text" name="nazwa2" disabled>
	<input type="text" name="nazwa3" disabled>
</div>

Przykład <input "checkbox" onclick>

Tym sposobem, razem z polami tekstowymi (lub innych typów), możemy ukrywać również dowolne inne treści, jak np. etykiety tekstowe itp.

Ukrywanie elementów po wybraniu opcji:

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="checkbox" name="nazwa" value="wartość" onclick="document.getElementById('identyfikator').style.display = this.checked ? 'none' : 'block'; this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled = this.checked">
<div id="identyfikator">
	<input type="text" name="nazwa2">
	<input type="text" name="nazwa3">
</div>

W jednym dokumencie nie mogą znajdować się dwa elementy o tym samym identyfikatorze - atrybut id="..."!

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
<input type="checkbox">	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23	100%