Checkbox html: przykłady pięknych przycisków na czystym CSS, tworzenie "akordeonu", uzyskiwanie wartości z formularzy za pomocą PHP i jQuery

07.03.2020

Opcje aplikacji Pole wyboru html jest bardzo obszerne, ale najczęściej ten element jest używany w formularzach przesyłania danych. Jednak może on robić o wiele więcej "sztuczek" niż uzyskiwanie wartości z formularzy. Wygodne jest użycie go do tworzenia różnych "akordeonów" na czystym CSS.

Simple Pure CSS "Accordion"

HTML:

       

CSS:

 label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;} 

W tym przykładzie, gdy najedziesz kursorem myszy na etykietę ("Punkt 1"), style zostaną przeniesione na wszystkie inne etykiety, które znajdują się poniżej (rodzeństwo, od angielskiego - rodzeństwo). Aby przekazać właściwości rodzeństwu, użyj znaku "~", aby przenieść style tylko do określonych etykiet, a nie wszystkich rodzeństwa na stronie. Symbol "^" oznacza "zaczyna się od ...", w przykładzie "dla ^ =" akordeon "-" dla wejścia (dla) id, który zaczyna się od słowa "akordeon":

 label[for^="accordion"] 

W rezultacie po najechaniu kursorem na etykietę zmienia się styl niższych etykiet.

Przenoszenie stylów do rodzeństwa przy użyciu pola wyboru etykiety

Etykiety są bardzo przydatne, ponieważ na ekranach telefonów komórkowych bardzo trudno jest kliknąć małe pole wyboru html, rozszerzają obszar dostępny dla użytkownika, aby wybrać pożądaną odpowiedź. Co więcej, dzięki metce możesz całkowicie usunąć kwadraty z ekranu:

 input[id^="accordion"]{position: absolute;left: -9999px;} 

Możesz także dodać kursor: wskaźnik, aby odwiedzający witrynę mogli zrozumieć, że elementy są "klikalne":

 label[for^="accordion"]:hover{cursor:pointer;} 

W rezultacie po najechaniu kursorem na tekst (na przykład "Punkt 1") kursor zamiast "strzałki" stanie się "ręką". Aby jeszcze bardziej ożywić "akordeon", możesz dodać dodatkowe style w CSS.

 label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;} 

Sztuczki CSS na tym się nie kończą. Dodaj ukryty tekst do naszego "akordeonu".

   
Tekst 1.

Tekst 2.

Tekst 3.

Style ukrytego tekstu:

 [id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Aby tekst pojawił się po kliknięciu na etykiecie, dodaj max-height: 100% do stylów:

 input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;} 

Proces rozpoczyna się, gdy użytkownik "kliknie" na etykiecie, pole wyboru html jest zaznaczone (dane wejściowe: sprawdzone), a następnie przekazane za pomocą znaku "+" (co oznacza "tylko pierwsze rodzeństwo poniżej")) właściwość max-wysokość: 100% na

z tekstem.

Po wybraniu odpowiedniego tekstu pojawi się element.

checkbox html przykład akordeonu z ukrytym tekstem

HTML:

   
Tekst 1.

Tekst 2.

Tekst 3.

CSS:

 label[for^="accordion"]{font-size: 20px;}label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;}label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;}input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;margin: 10px;}input[id^="accordion"]{position: absolute;left: -9999px;}[id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Odbieranie i przetwarzanie wartości za pomocą PHP

Zastanów się nad przykładami html użycia w formularzach, gdzie można również uzyskać wartości (value = "my_value").

Wartości są zapisywane do operatora value = "".















Podczas przesyłania formularza tablica $ _POST będzie zawierać operator name = "" w kluczu tablicy, a wartość - wartość = "".

Jeśli byłaby to zwykła tablica, wyglądałoby to tak:

 $post = array(name => value); 

lub

 $post = array("HTML_name" => "HTML","CSS_name" => "CSS","javascript_name" => "Javascript","jQuery_name" => "jQuery","PHP_name" => "PHP","ajax_name" => "Ajax",); 

Konwertujemy tablicę $ _POST na ciąg znaków za pomocą funkcji PHP implode () i przypisujemy wartość $ _POST ["ajax_name"] do zmiennej $ ajax. Zwykle dla wszystkich wartości $ _POST tworzone są zmienne, ale na przykład napiszemy tylko jeden, aby nie przeładować kodu niepotrzebnymi informacjami. Konieczne jest również sprawdzenie bezpieczeństwa danych wejściowych $ _POST, ale tutaj tego nie zrobimy, wiele o tym napisano w innych artykułach.

PHP:

 echo " 

Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
{$ajax = $_POST["ajax"];} echo "

Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
  "; var_dump ($ _ POST); echo" 
";

Pobieranie kluczy i wartości formularza za pomocą jQuery

Aby pobrać wartości z formularza bez ponownego ładowania strony, użyj skryptów (javascript lub jQuery):

 $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 

");});});
{$("input.my-class").on("click", function(e) {var val = [];$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + "

");});});

Utwórz tablicę:

 var val = []; 

Następnie każdy (każdy) wybrany element ("input: checked") za pomocą funkcji push jest zapisywany w tablicy val ():

 $("input:checked").each( function(){val.push( $(this).val() );}); 

Zawartość tablicy val () zostanie wyświetlona na stronie, do której dodamy obiekt html

jQuery:

 $("#log").html("Выбрано: " + val.join( ", " ) + " 

");

Możesz sprawdzić, czy pole wyboru html zostało zaznaczone przy użyciu .is (": checked") i .prop ("checked").

Otrzymamy wartości (val) każdego zaznaczonego pola i wyprowadzimy je przez alert ():

 if ( $(this).is(':checked') ) alert($(this).val()); 

Zrób to samo, aby uzyskać identyfikator (id) przy użyciu .prop ("checked"):

 if ( $(this).prop('checked') ) alert($(this).attr("id")); 

Dane wyjściowe kluczy i wartości za pomocą alertu () są na przykład tylko, nie są potrzebne, aby formularz działał, więc powinny zostać usunięte z kodu.

Ustaw przycisk przesyłania formularza niedostępny ("wyłączony"), jeśli nie zaznaczono żadnego pola wyboru:

  
 $('#submitButton').prop("disabled", !$(this).prop("checked")); 

Zwróć uwagę na dwukropek: .is (": checked") działa poprawnie z dwukropkiem, a .prop ("checked") działa bez dwukropka !!!

Dodaj możliwość oznaczania wszystkich elementów naraz.

   
 if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked); 

Cały kod.

HTML:

Wymagane umiejętności:

















jQuery:

 $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("input.my-class").on("click", function(e) {var val = [];if ( $(this).is(':checked') ) alert($(this).val());if ( $(this).prop('checked') ) alert($(this).attr("id"));$('#submitButton').prop("disabled", !$(this).prop("checked"));if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked);$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: ALL

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: " + val.join( ", " ) + "

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });});

PHP:

 if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 

Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
{$ajax = $_POST["ajax"];} if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo "

Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
  "; var_dump ($ _ POST); echo" 
";

Czysty projekt przycisku CSS

Aby rozmieścić przyciski zgodnie z projektem strony, użyjemy tylko CSS. Ukryj oryginalny kwadrat przy użyciu właściwości z-index i krycia, w tym przypadku kwadraty nie przesuwają się z ekranu, ale po prostu stają się przezroczyste (nieprzezroczystość: 0).

CSS:

  position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px; 

W tym samym miejscu wyświetlamy przyciski z naszym własnym projektem.

Znacznik wejściowy może pojawić się przed tagiem etykiety, a następnie użyć pierwszego przykładu przycisków stylizacji:

 .my-class {position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.my-class + label {position: relative;padding: 0 0 0 60px;cursor: pointer;}.my-class + 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);transition: 1.2s;}.my-class + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.my-class:checked + label:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.my-class:checked + label:after {left: 26px;}.my-class:focus + label:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

Jeśli dane wejściowe znajdują się wewnątrz znacznika etykiety, tekst pola wyboru jest umieszczony w elemencie div z klasą "text". Style są przekazywane z wejścia: sprawdzane do elementu div z klasą "text" w drugim przykładzie:

 .label input{position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.text {position: relative;padding: 0 0 0 60px;cursor: pointer;}.text: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);transition: .2s;}.text:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.label input:checked + .text:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.label input:checked + .text:after {left: 26px;}.label input:focus + .text:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

HTML:

Wymagane umiejętności:

Zaznacz wszystko
HTML
CSS
JavaScript
jQuery
Php
Mysql
Ajax
Pole wyboru css

Tak więc, w zależności od sytuacji, zawsze możesz wybrać odpowiednią lokalizację dla danych wejściowych i etykiety. Jeśli z jakiegoś powodu opcja, w której dane wejście znajduje się przed etykietą, nie jest odpowiednia, można umieścić dane wejściowe w znaczniku etykiety.

Możesz także stylizować pole wyboru przy pomocy html skrypty (javascript, jQuery), nowoczesne przeglądarki wykonują z nich świetną robotę. Ale jeśli użytkownik wejdzie na stronę ze starej przeglądarki, to nadal preferuje CSS.

Należy również wziąć pod uwagę, że w różnych systemach operacyjnych style pól wyboru będą wyglądać inaczej. Jeśli Google Chrome spróbuje wygładzić te różnice, to w innych przeglądarkach projekt przycisków może się bardzo różnić.