HTML - Tworzenie stron | Artykuł

Elementy formularza: pole checkbox oraz radio

MIROSŁAW ZELENT

Pole typu checkbox

Klasyczny element wielu formularzy - checkbox, czyli małe kwadratowe pole, które można zaznaczyć (ang. checkmark = zaznaczenie, box = pudełko). Tego typu element służy zazwyczaj do potwierdzania np. przeczytania regulaminu, włączenia opcji w ustawieniach konta etc.

 <input type="checkbox" id="zazn">
 <label for="zazn">Akceptuję regulamin</label> 

Szczególnie w przypadku checkboxa ważne jest prawidłowe użycie znacznika <label>. Kliknięcie w prawidłowo ustawioną etykietę zmienia stan pola, zaś zwykły tekst nie spełnia tej roli.

Co do sprawdzenia wartości zaznaczenia, w sensie: czy ten checkbox był zaznaczony czy nie w momencie podsumowania formularza, to rzecz jasna dokonamy tego w pełnoprawnych językach programowania, czy to w JavaScript czy w PHP.

Jeśli chcielibyśmy stworzyć checkboxa, który już na starcie byłby zaznaczony, to możemy mu dopisać atrybut checked (można to uczynić na co najmniej kilka sposobów, z różną wartością atrybutu, albo nawet bez ustawionej wartości):

 <input type="checkbox" id="zazn" checked>
 <label for="zazn">Akceptuję regulamin</label>

 <input type="checkbox" id="zazn" checked="checked">
 <label for="zazn">Akceptuję regulamin</label>

 <input type="checkbox" id="zazn" checked="on">
 <label for="zazn">Akceptuję regulamin</label> 

Pole typu radio

Pole typu radio - skąd taka nazwa? Otóż kiedy słuchamy radia, to możemy słuchać tylko jednej stacji. I tak samo w polach typu radio możemy wybrać tylko jedną opcję z możliwych:

 <label>
   <input type="radio" name="plec" value="m"> Mężczyzna
 </label>

 <label>
   <input type="radio" name="plec" value="k"> Kobieta
 </label> 

Aby automatyczne odznaczanie pozostałych opcji działało, każdego inputa typu radio wyposażamy w tę samą wartość atrybutu name. Zaś odróżnienie poszczególnych wartości w trakcie przetwarzania formularza, nastąpi za sprawą atrybutów value. Nie zapominajmy także (przynajmniej na dalszym etapie realizowania projektów), iż jako elementy formularza, również pola radio powinny zostać wyposażone w znaczniki <label>.