Dzięki CSS3 możemy osiągnąć niemal każdy potrzebny nam efekt na ekranie. W tym samouczku przyjrzymy się, jak możemy stylizować pola wyboru i przyciski radiowe.
Input:checked + label:before ( content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )
Teraz, gdy naciśniemy przycisk radiowy, w głównym szarym kółku powinno pojawić się małe białe kółko.
Pola wyboru stylu
Przejdźmy teraz do stylizacji pól wyboru. Najpierw ponownie ukryjmy element:
Wejście ( wyświetlacz: brak; )
Ponieważ usuwamy domyślne wyświetlanie pola wyboru z pseudoelementem :before, dodamy tylko obramowanie:
Etykieta pola wyboru:przed ( border-radius: 3px; )
Następnie dodajemy symbol znacznika wyboru, który pojawi się po kliknięciu pola wyboru. Zróbmy to przez analogię do koła radiowego. Czy tym razem musimy przekonwertować znak HTML? ✓.
Input:checked + label:before ( content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; wysokość linii: 15px; )
W końcu oto, co powinniśmy otrzymać:
Wyniki
W tym samouczku przyjrzeliśmy się metodzie, której możesz użyć do wyświetlenia potrzebnych przycisków radiowych i pól wyboru. Ponieważ używaliśmy CSS3, ta technika będzie działać tylko w przeglądarkach obsługujących tę technologię. Aby osiągnąć podobne wyniki w starszych przeglądarkach, możesz użyć odpowiedniego
Aby zaprojektować checkboxy i przyciski radiowe zgodnie z wymogami projektu, dziś nie trzeba używać rozwiązań JavaScript (takich jak moja wtyczka), ponieważ. do tego możesz używać tylko CSS i z wstecznie kompatybilny dla starszych przeglądarek (tj. nie kosztem użyteczności), które nie obsługują nowoczesnych reguł CSS.
Innymi słowy - in nowoczesne przeglądarki pola wyboru i przyciski radiowe będą wyglądać ładnie, zgodnie z zamierzonym projektem, ale w starych (dotyczy to Internet Explorer wersja 8 i poniżej) pozostaną z "domyślnym" projektem, specyficznym dla każdego konkretnego systemu operacyjnego.
Oprócz, zachowuje możliwość walidacji HTML5 elementy stylizowane (co może nie mieć miejsca w przypadku korzystania z wtyczek JavaScript). W nowoczesnych przeglądarkach jego obsługa od dawna jest normą.
Ważne cechy
Aby odnieść sukces, należy wziąć pod uwagę następujące kwestie:
- Z wyjątkiem samego tagu elementu, który chcemy pięknie wystylizować ( lub ), potrzebujesz tagu
- Etykietka musi być przed tagiem
Sztuczka polega na użyciu pseudoselektorów :checked i :not. Jednocześnie sam checkbox lub przycisk radiowy staje się niewidoczny, a ich emulacja odbywa się za pomocą pseudoelementów: before i: after dla tagu
Stylizacja dla nowoczesnych przeglądarek
Rozważ obie opcje lokalizacji stylizowanego elementu formularza. Który z nich jest najwygodniejszy, zależy od Ciebie. Istota tego się nie zmienia.
Tagi pól wyboru i przycisków radiowych są umieszczane przed tagiem
W kodzie HTML To wygląda tak:
Jeszcze raz chcę zwrócić twoją uwagę - tag koniecznie powinien być zlokalizowany zanim etykietka
Kod CSS pola wyboru będzie tak:
Pole wyboru ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox + etykieta ( pozycja: względna; dopełnienie: 0 0 0 60px; kursor: wskaźnik; ) .checkbox + etykieta :before ( content: ""; pozycja: bezwzględna; góra: -4px; lewy: 0; szerokość: 50px; wysokość: 26px; obramowanie-promień: 13px; tło: #CDD1DA; box-shadow: wstawka 0 2px 3px rgba( 0,0,0,.2); przejście: .2s; ). -radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); przejście: .2s; .checkbox:zaznaczone + label:before ( background: #9FD468; ) .checkbox:zaznaczone + label:after (po lewej: 26px; ) .checkbox:focus + label:before ( box-shadow: wstawka 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 ,0,.7); )
Kod CSS przycisku radiowego będzie tak:
Radio ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 7px; ) .radio + etykieta ( pozycja: względna; dopełnienie: 0 0 0 35px; kursor: wskaźnik; ) .radio + etykieta :before ( content: ""; pozycja: bezwzględna; góra: -3px; lewy: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) . radio + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0,.5); krycie: 0; przejście: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Dzięki właściwościom position , z-index i opacity klas .checkbox i .radio wizualnie ukrywamy oryginalne elementy, zachowując je w tym samym miejscu, w którym powinny znajdować się elementy stylizowane. I za pomocą marginesu przesuwamy je trochę, aby komunikat walidacji HTML5 wyglądał harmonijnie. W zależności od projektu pola wyboru i przycisku radiowego to wcięcie można dostosować.
Tagi pól wyboru i przycisków radiowych znajdują się wewnątrz tagu
Kod HTML w tym przypadku byłoby to:
Przez analogię z Poprzednia wersja- tag koniecznie powinien być zlokalizowany zanim znaczniki z klasami .checkbox__text i .radio__text .
Kod CSS pola wyboru będzie tak:
Wejście pola wyboru ( pozycja: bezwzględna; indeks z: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox__text ( pozycja: względna; dopełnienie: 0 0 0 60px; kursor: wskaźnik; ) .checkbox__text:before ( treść: ""; pozycja: bezwzględna; góra: -4px; lewa: 0; szerokość: 50px; wysokość: 26px; promień obramowania: 13px; tło: #CDD1DA; cień pudełka: wstawka 0 2px 3px rgba(0,0 ,0,.2); przejście: .2s; ). background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);przejście: .2s; ) :zaznaczone + .checkbox__text:after (po lewej: 26px; ) .checkbox input:focus + . checkbox__text:before ( box-shadow: wstawka 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255.255.0.7); )
Kod CSS przycisku radiowego będzie tak:
Wejście radiowe ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 7px; ) .radio__text ( pozycja: względna; dopełnienie: 0 0 0 35px; kursor: wskaźnik; ) .radio__text:before ( content: ""; pozycja: bezwzględna; góra: -3px; lewa: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) .radio_text:after ( content: ""; pozycja: bezwzględna; góra: 1px; lewa: 4px; szerokość: 16px; wysokość: 16px; border-radius: 50%; tło: #9FD468; box-shadow: wstawka 0 1px 1px rgba(0, 0,0,.5); krycie: 0; przejście: .2s; ) .radio input:zaznaczone + .radio__text:after ( krycie: 1; ) .radio input:focus + .radio__text:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Style tutaj są takie same jak w poprzedniej metodzie, tylko są stosowane do innych selektorów.
Stylizacja dla starszych przeglądarek
Kod CSS pola wyboru. W komentarzach do kodu dodałem wyjaśnienia dotyczące przeglądarek:
/* Najpierw określ style dla IE8 i starszych wersji, tj. tutaj mamy trochę nobilitujące standardowe pole wyboru. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* To jest dla wszystkich przeglądarek z wyjątkiem bardzo starych, które nie obsługują selektorów plus. Pokazujemy, że etykieta jest klikalna. */ .checkbox + label ( cursor: pointer; ) /* Następnie przychodzi stylizacja pola wyboru w nowoczesnych przeglądarkach, a także w IE9 i nowszych. Ze względu na to, że starsze przeglądarki nie obsługują selektorów :not i :checked, wszystkie poniższe style nie będą w nich działać. W tym przypadku check jest podany bez dwukropka na początku, z jakiegoś powodu działa to w ten sposób. */ .checkbox:not(zaznaczone) ( pozycja: bezwzględna; z-index: -1; krycie: 0; margines: 10px 0 0 20px; ) .checkbox:not(zaznaczone) + etykieta ( pozycja: względna; dopełnienie: 0 0 0 60px; ) .checkbox:not(checked) + label:before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background : #CDD1DA; box-shadow: inset 0 2px 3px rgba (0,0,0,.2); przejście: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolutne ; góra: -2px; lewa: 2px; szerokość: 22px; wysokość: 22px; promień obramowania: 10px; tło: #FFF; cień pudełka: 0 2px 5px rgba (0,0,0,.3); przejście: .2s; ). rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )
Kod CSS przycisku radiowego:
Radio ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label ( kursor: wskaźnik; ) .radio:not(checked) ( position: absolute; z-index: -1; krycie: 0; margines: 10px 0 0 7px; .radio:not(zaznaczone) + etykieta ( pozycja: względna; dopełnienie: 0 0 0 35px; ) .radio:not(zaznaczone) + label:before ( zawartość : ""; pozycja: bezwzględna; góra: -3px; lewa: 0; szerokość: 22px; wysokość: 22px; obramowanie: 1px solid #CDD1DA; obramowanie-promień: 50%; tło: #FFF; ) .radio:not( zaznaczone) + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba (0,0,0,.5); krycie: 0; przejście: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )
Przykłady
Tak to się robi w tak prosty sposób. Dzięki Ta metoda, zaprojektuj pola wyboru i przyciski radiowe z za pomocą CSS możesz to zrobić tak, jak chcesz.
W tym artykule omówimy pole wyboru typu danych wejściowych HTML oraz sposób ich obsługi w PHP.
Pojedyncze pole wyboru
Stwórzmy prosty formularz z jednym polem wyboru:
W skrypcie PHP ( checkbox-form.php) możemy pobrać wybraną opcję z tablicy $_POST. Jeśli $_POST['formWheelchair'] to " TAk”, to pole wyboru opcji jest zaznaczone. Jeśli pole wyboru nie zostało zaznaczone, $_POST['formWheelchair'] nie zostanie ustawione.
Oto przykład przetwarzania formularzy w PHP:
$_POST['formSubmit'] został ustawiony na " TAk”, ponieważ ta wartość jest ustawiona w atrybucie pola wyboru wartości:
Zamiast " TAk” można ustawić wartość „ 1 " lub " na”. Upewnij się, że kod walidacji w skrypcie PHP również został zaktualizowany.
Grupa Che-box
Czasami musisz wyświetlić w formularzu grupę powiązanych pól wyboru typu wejściowego PHP. Zaletą grupy pól wyboru jest to, że użytkownik może wybrać wiele opcji. W przeciwieństwie do przycisku radiowego, w którym z grupy można wybrać tylko jedną opcję.
Weźmy powyższy przykład i na jego podstawie udostępnimy użytkownikowi listę budynków:
Zauważ, że pole wyboru typu danych wejściowych ma taką samą nazwę (formDoor ). I że każda nazwa kończy się na . Używając tej samej nazwy, wskazujemy, że pola wyboru są połączone. Za pomocą wskazujemy, że wybrane wartości będą dostępne dla skryptu PHP jako tablica. Oznacza to, że $_POST['formDoor'] zwraca więcej niż jeden wiersz, jak w powyższym przykładzie; zamiast tego zwracana jest tablica składająca się ze wszystkich zaznaczonych wartości pól wyboru.
Na przykład, jeśli zaznaczyłbym wszystkie opcje, $_POST['formDoor'] byłaby tablicą składającą się z: (A, B, C, D, E). Poniżej znajduje się przykład, jak wyświetlić wartość tablicy:
Jeśli żadna opcja nie zostanie wybrana, $_POST['formDoor'] nie zostanie ustawiona, więc użyj funkcji "pustej", aby przetestować ten przypadek. Jeśli podano wartość, przechodzimy przez tablicę za pomocą funkcji count(), która zwraca rozmiar tablicy i wyświetla wybrane budynki.
Jeśli pole wyboru jest zaznaczone dla „ Budynek Żołądź”, tablica będzie zawierać wartość 'A'. Podobnie, jeśli „ Kompleks Carnegie”, tablica będzie zawierać C .
Sprawdzanie, czy wybrano określoną opcję
Często konieczne jest sprawdzenie, czy dana opcja została wybrana spośród wszystkich dostępnych elementów w grupie pól wyboru typu wejściowego HTML. Oto funkcja, która to sprawdza:
function IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( zwróć prawdę; ) ) ) zwróć fałsz; )
Aby z niego skorzystać, wystarczy wywołać IsChecked ( checkbox_name, wartość). Na przykład:
if(IsChecked("formDoor","A")) ( //zrób coś... ) //lub użyj w obliczeniach... $price += IsChecked("formDoor","A") ? 100; $cena += IsChecked("formDoor","B") ? 20:0;
Pobierz przykładowy kod
Pobierz przykładowy kod formularza PHP z pola wyboru typu wejściowego PHP .
Niniejsza publikacja jest tłumaczeniem artykułu „ Obsługa pola wyboru w Formularz PHP edytor» przygotowany przez zaprzyjaźniony zespół projektowy
Zaznacz znak w Formularz HTML lub "pole wyboru" jest ustawione przez tag Wejście, który ma typ pole wyboru.
Znacznik wyboru wskazuje na zgodę lub niezgodę. Jeżeli checkbox jest zaznaczony, to przeglądarka wysyła do serwera zmienną z nazwą pola. Jeśli go nie ma, przeglądarka nie wysyła niczego. Dlatego atrybut wartość nie może być uważane za obowiązkowe.
Jeśli istnieje potrzeba, aby pole wyboru było domyślnie obecne, należy dodać atrybut do tagu w kratę. Będzie to wyglądać tak:
A tak wygląda checkbox w przeglądarce:
Obecność pola wyboru nie oznacza, że należy wybrać jeden element spośród obecnych. W związku z tym, jeśli w jednym formularzu znajduje się kilka pól wyboru, należy im nadać różne nazwy.
Kod formularza podany na początku artykułu będzie wyglądał następująco:
Jeśli chodzi o nazwę, w środowisku zawodowym pole to nazywa się „pole wyboru”.
Witam, drodzy czytelnicy serwisu. Następny element, który dzisiaj będziemy mieli czas na demontaż przyciski radiowe i pola wyboru w html. Zwykle służą do zadania pytania w formularzu (rozmawialiśmy o tworzeniu formularzy) i odpowiednio za ich pośrednictwem możemy zaoferować osobie opcje odpowiedzi. Może jednak wybrać tylko jedną z tych opcji.
Przyciski radiowe - typ radia
Zacznijmy implementację przycisków radiowych. Przejdźmy do kodu i wybierzmy osobny akapit dla przycisków radiowych. W nim utworzymy nasz przycisk radiowy. Przycisk jest tworzony za pomocą tagu Wejście.
Określ typ radio. Nadajmy przyciskowi nazwę i określmy wartość, tj. jaka wartość zostanie wysłana do modułu obsługi, jeśli ten przycisk jest aktywny. Dla tego przycisku określimy wartość " tak", dlatego ten przycisk będzie odpowiedzialny za pozytywną odpowiedź.
Dodajmy etykietę etykieta z odpowiedzią " TAk”, aby osoba kliknęła etykietę, a przycisk aktywował się automatycznie.
Teraz stwórzmy dla niego przeciwny przycisk z odpowiedzią " Nie”. Aby to zrobić, skopiuj etykieta i wstawiaj po pierwszym etykieta. Zmień „Tak” na „Nie” i zmień wartość „tak” na „nie”. Pamiętaj, że musimy pozostawić tę samą nazwę. To powie przeglądarce, że te przyciski opcji należą do tej samej grupy i wzajemnie się wykluczają. Oznacza to, że jeśli aktywujesz jeden przycisk, drugi zostanie dezaktywowany. Jeżeli nazwy przycisków są różne, to oba przyciski można aktywować jednocześnie.
W ten sposób możesz przekazać wartość = wybór tej lub innej odpowiedzi do handler'a.
Dodajmy samo pytanie po otwarciu akapitu. Zapytajmy osobę, czy lubi oszczędzać czas?
Lubisz oszczędzać czas?
I jeszcze jedna rzecz, która może ci się przydać to automatyczna aktywacja przyciski początkowo. Aby to zrobić, istnieje specjalny atrybut, który można dodać do żądanego przycisku. Ten przycisk będzie początkowo włączony. Atrybut nazywa się w kratę- można przetłumaczyć jako oznaczone. Ten atrybut nie musi mieć żadnej wartości.
Lubisz oszczędzać czas?
A oto efekt końcowy.
Pola wyboru - typ pola wyboru
Alternatywą dla przycisków radiowych w HTML są pola wyboru, tylko w tym przypadku można wybrać kilka elementów. Na przykład utwórzmy nowy akapit i zapytajmy, jakich narzędzi oszczędzających czas lubisz używać?
Po pytaniu wskażemy nowy akapit do tworzenia tych samych pól wyboru. Pierwsze pole wyboru będzie dotyczyło pamiętnika.
Jeśli sprawdzisz nasz kod w przeglądarce, będzie to wyglądało tak:
Teraz w ten sam sposób utworzymy jeszcze dwa pola wyboru: pomiar czasu i własne zmiany.
Z jakich narzędzi oszczędzasz czas?
Pamiętaj, aby nazwać każde pole wyboru swoją unikalną nazwą.
Jeśli zapiszesz plik i sprawdzisz, zobaczysz następujące elementy.