Ostatnia aktualizacja 24 kwietnia, 2024
Checkbox w HTML-u to jeden z podstawowych elementów formularza. Pozwala on użytkownikom na wybieranie jednej lub więcej opcji z zestawu informacji. Dzięki temu formularz zyskuje większą interaktywność i elastyczność pod kątem wprowadzania danych lub wyboru elementów koniecznych do zaznaczenia w danej sytuacji. W dzisiejszym tekście omówimy, jak stworzyć podstawowy kod na checkbox, który możemy wykorzystać podczas tworzenia formularza.
Sprawdź: Formularz w HTML-u krok po kroku
Checkbox w HTML-u – podstawowy kod
Kod HTML dla checkboxa wygląda następująco:
<form action="/submit">
<input type="checkbox" id="opcja1" name="opcja1">
<label for="opcja1">Opcja 1</label><br>
<input type="checkbox" id="opcja2" name="opcja2">
<label for="opcja2">Opcja 2</label><br>
<input type="submit" value="Submit">
</form>Co oznaczają poszczególne elementy w powyższym kodzie?
- “input” to element wejściowy,
- “type=’checkbox'” definiuje typ wejścia jako checkbox,
- “id” i “name” służą do identyfikacji checkboxa,
- Etykiety “label” używa się do opisania checkboxa.
Każdy z checkboxów można zaznaczyć niezależnie, co umożliwia wybór wielu opcji jednocześnie. Można też ustawić checkbox jako domyślnie zaznaczony, dodając do tagu “input” atrybut “checked”, jak w poniższym przykładzie:
<input type="checkbox" id="opcja1" name="opcja1" checked>Atrybuty checkboxa
Atrybuty przypisane do checkboxów w HTML pozwalają na zarządzanie ich zachowaniem, a także danymi przesyłanymi formularzem.
Atrybut checked określa, czy pole checkbox ma być domyślnie zaznaczone, co jest przydatne, na przykład, gdy chcemy, aby użytkownicy aktywnie potwierdzili swoją zgodę na warunki przed przesłaniem formularza.
Użycie atrybutu disabled powoduje, że checkbox jest nieaktywny (nie można go zaznaczyć ani odznaczyć). Można to stosować w sytuacjach, w których pewne opcje są dostępne tylko pod określonymi warunkami.
Atrybut name identyfikuje checkbox w kontekście formularza, co jest istotne przy przetwarzaniu danych, ponieważ wartość tego atrybutu służy jako klucz w przesyłanych danych.
Natomiast value określa wartość, która zostanie przesłana, jeśli checkbox jest zaznaczony. Bez tego atrybutu przesłana wartość dla zaznaczonego checkboxa zazwyczaj jest „on”. W efekcie może to być niejednoznaczne w analizie odpowiedzi. Dlatego określenie konkretnej wartości value pozwala na jednoznaczne zidentyfikowanie wybranej opcji użytkownika.
Checkbox – stylizowanie za pomocą CSS-a
Zaawansowane techniki CSS dla checkboxów pozwalają na znaczne wzbogacenie interfejsu użytkownika poprzez dodanie niestandardowych animacji i efektów wizualnych. Przykładowo, można zastosować animacje, które zmieniają wygląd checkboxa przy zaznaczaniu i odznaczaniu. Oto przykład kodu z krótkim wyjaśnieniem:
.checkbox-custom {
display: none;
}
.checkbox-custom + label {
cursor: pointer;
position: relative;
padding-left: 30px;
}
.checkbox-custom + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
transition: all 0.3s ease;
}
.checkbox-custom:checked + label:before {
background-color: #0D6EFD;
border-color: #0D6EFD;
box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.2);
}
.checkbox-custom:checked + label:after {
content: '\2714';
position: absolute;
top: -2px;
left: 4px;
color: white;
}W tym przykładzie, .checkbox-custom jest ukrytym polem wyboru, a stylizacja odbywa się na etykiecie (label). Pseudo-element :before tworzy niestandardowy kwadrat, który służy jako wizualna reprezentacja checkboxa. Gdy checkbox jest zaznaczony (:checked), pseudo-element :before zmienia kolor tła na niebieski i dodaje subtelny cień (box-shadow), tworząc efekt głębi. Dodatkowo, pseudo-element :after wyświetla znak zaznaczenia (\2714) w białym kolorze, co wskazuje na zaznaczenie opcji. Całość jest animowana za pomocą transition, co sprawia, że zmiana stanu jest płynna i estetycznie przyjemna.
Gdzie wykorzystać checkbox?
Checkboxy mają szerokie zastosowanie w formularzach różnego typu:
- Formularze zgłoszeniowe: w takich formularzach używa się chceckboxów do wyboru różnych opcji, np. płci, zainteresowań czy zgody na otrzymywanie newslettera.
- Ankiety i kwestionariusze: w tym przypadku checkboxy pozwalają respondentom na zaznaczanie wszystkich odpowiedzi, które uważają za prawdziwe.
- Koszyki zakupowe: w sklepach internetowych checkboxy mogą służyć do wyboru różnych opcji związanych z zakupem, np. wyboru metody dostawy czy akceptacji warunków zakupu.
- Filtrowanie wyników: checkboxy mogą służyć do filtrowania różnych wyników wyszukiwania np. według kategorii lub innego warunku.
- Zarządzanie danymi: checkboxy mogą służyć do wyboru rekordów, które mają być modyfikowane lub usunięte.
Dalsza część tekstu znajduje się pod materiałem wideo:
Choć domyślny wygląd checkboxa jest ustalany przez przeglądarkę, da się go modyfikować za pomocą CSS-a. Możemy zmienić rozmiar, kolor, a nawet całkowicie przeprojektować checkbox, aby pasował do reszty naszego interfejsu.
W bardziej zaawansowanym programowaniu z wykorzystaniem JavaScriptu możemy wdrożyć działania o większej złożoności. Dzięki temu da się wprowadzić wyświetlenie dodatkowych opcji po zaznaczeniu checkboxa albo walidację formularza przed wysłaniem.
Warto pamiętać, że niektóre starsze przeglądarki lub czytniki ekranowe dla osób niewidomych mogą nie obsługiwać wszystkich funkcji checkboxów. Dlatego warto testować formularze w różnych środowiskach, aby zapewnić dobrą kompatybilność i dostępność.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
JavaScript i TypeScript – znajomość potrzebna w gamingu
Mozilla Thunderbird – filtrowanie poczty
Specjalista e-commerce – co robi, ile zarabia?
