Przełączniki za pomocą przycisków
W tym akapicie pokaże jak umieścić przycisk wewnątrz tagu label. Dzięki wykorzystaniu CSS oraz sprawdzenia stanu checkboxów możemy zmieniać style innych elementów poprzez kliknięcie w nasz przycisk w label.
Element input typu checkbox ma dwa główne stany – aktywny oraz nieaktywny. Aby nadać style zmieniające się w zależności od stanu inputa, wystarczy w CSS ustawić reguły dla elementów znajdujących się po zaznaczonym checkboxie. Gdy strona nie będzie zawierała zaznaczonego checkboxa, style po prostu nie będą działały.
Dla najlepszych efektów wizualnych należy też schować oryginalny checkbox, do którego przekazujemy kliknięcia. Możemy to zrobić poprzez użycie display: none lub atrybutem hidden.
Ostatnia rzecz do wykonania po schowaniu checkboxa jest nadanie stylów, które działają tylko w momencie, kiedy checkbox jest aktywny. W tym celu tworzymy regułę #id_checkboxa: checked ~ element_do_stylowania. Aby to zadziałało, stylowane elementy muszą znajdować się po tagu input.
Spójrz na poniżysz przykład:
Menu z tabami
Aby stworzyć taby, które przełączają content w naszej ramce, musimy zacząć od stworzenia tagów input. Dochodzi dodatkowa rzecz – typ inputów wykorzystywanych w takim menu to “radio” – w innym przypadku byłoby możliwe włączenie kilku tabów jednocześnie. Tagi input muszą mieć też taką samą wartość atrybutu name, aby radio działały zgodnie ze swoim przeznaczeniem.
Spójrz na poniższy przykład jak zastosowałem powyższą teorię:
Dobrnęliśmy do końca z materiałem o formularzach. Przedstawiłem Wam przez ostatnie kilka tygodni jak dodawać i edytować formularze. W przyszłą środę przygotuję Wam ćwiczenie podsumowujące. Tak więc, z góry zapraszam.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA