Input Checkbox HTML

Input Type Checkbox

<input type="checkbox">

Szczególnym rodzajem input’ów są inputy checkbox. Używane są one zazwyczaj do potwierdzania, np. jeśli mamy zgodzić się z regulaminem to najprawdopodobniej użyjemy właśnie tego input’u.

<input type="checkbox">

Input Checkbox – Label

label

Pokazał nam się element <input> typu checkbox, jednak na razie nie wiemy czego on dotyczy. W celu opisania tego elementu pomocny nam będzie znany nam już element <label>.

<label><input type="checkbox"> Potwierdzam 100% nieznajomość regulaminu. Kto ma czas na czytanie regulaminów</label>

Checkbox’y bardzo często wykorzystywane są właśnie do potwierdzenia znanych nam już regulaminów.

Umiejscowienie elementu <label> jest w zasadzie dowolne, zależne zupełnie od nas. Kliknięcie na element label spowoduje zaznaczenie pola checkbox.

A czasem spotykamy się z checkbox’ami, które zostały już, jakby za nas zaznaczone. Jak tego dokonać?

Input Checkbox – Checked

checked

Jeśli chcemy, żeby checkbox był domyślnie zaznaczony możemy posłużyć się atrybutem checked (ang. sprawdzony, zaznaczony). Atrybut ten nie potrzebuje deklarowania wartości. Żeby atrybut ten zadziałał wystarczy jak posłużymy się jedynie jego nazwą, czyli checked. Możemy również spotkać się z zapisem checked="checked", który jednak nie jest konieczny w specyfikacji HTML5.

<label><input type="checkbox" checked>Regulamin</label>
 

Zaznaczoną domyślnie wartość checked możemy oczywiście dowolnie zmieniać, chyba że zablokujemy użytkownikowi tą możliwość poprzez atrybut disabled.

Input Checkbox – Disabled

disabled

<label><input type="checkbox" checked disabled>Regulamin</label>
 
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.