Elementy formularza: pole checkbox oraz radio

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>.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 06.02.2024 do 15.02.2024 trwa w Helion.pl walentynkowa akcja promocyjna "Pokochaj kodowanie!" - otrzymujemy drugą książkę gratis albo -35% na jedną książkę drukowaną oraz -40% na ebooka. Zobacz promocję walentynkową tutaj.

Bądź na bieżąco
Pasja informatyki