Potrditveno polje html: primeri lepih gumbov na čisti CSS, ustvarjanje "harmonike", pridobivanje vrednosti iz obrazcev s pomočjo PHP in jQuery

Ko izberete ustrezno postavko, se prikaže besedilo.

HTML:

 Пункт 1  
  Besedilo 1. 

  Točka 2.  T 
  Besedilo 2. 

  Točka 3 
  Besedilo 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;} 

Sprejemanje in obdelava vrednosti s pomočjo PHP

Razmislite za potrditveno polje html primere uporabe v obrazcih, kjer je možno dobiti tudi vrednosti (value = "my_value").

Vrednosti so zapisane v vrednost = "" operator.

  HTML 

  CSS 

  Javascript 

  jQuery 

  Php 

  Mysql 

  Ajax 

Ko je obrazec poslan, bo polje $ _POST vsebovalo ime operaterja imena = "" v ključu polja in vrednost - vrednost = "".

Če bi bilo običajno polje, bi izgledalo takole:

 $post = array(name => value); 

ali

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

Matriko $ _POST pretvorimo v niz z uporabo funkcije implode PHP () in spremenljivki $ ajax dodelite vrednost $ _POST ["ajax_name"]. Običajno se za vse vrednosti $ _POST ustvarjajo spremenljivke, vendar bomo na primer napisali samo eno, da ne bi preobremenili kode z nepotrebnimi informacijami. Prav tako je potrebno preveriti varnost vhodnih podatkov $ _POST, toda tukaj ne bomo naredili tega, o tem smo v drugih člankih veliko napisali.

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); odmev" 
  "; 

Pridobivanje ključev in vrednosti obrazcev z uporabo jQuery

Za pridobitev vrednosti iz obrazca brez ponovnega nalaganja strani uporabite skripte (javascript ali 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( ", " ) + " 
 
 ");});}); 

Ustvarite polje:

 var val = []; 

Nato se vsaka (vsaka) izbrana postavka ("input: checked") s pomočjo push funkcije zapiše v val () polje:

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

Vsebina matrike val () bo prikazana na strani, za katero bomo dodali html objekt

jQuery:

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

Ugotovite lahko, ali je bila izbrana potrditvena polja html z uporabo .is (": checked") in .prop ("označeno").

Dobili bomo vrednosti (val) vsakega označenega polja in ga poslali preko opozorila ():

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

Naredite enako, da dobite identifikator (id) z uporabo .prop ("označeno"):

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

Izhod ključev in vrednosti preko alert () je na primer samo, da niso potrebni za delovanje obrazca, zato jih je treba odstraniti iz kode.

Če ni izbranega potrditvenega polja, gumb za pošiljanje obrazca ni na voljo (»onemogočen«)

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

Bodite pozorni na dvopičje: .is (": checked") deluje pravilno z dvopičjem, in .prop ("označeno") deluje brez dvopičja!

Dodajte možnost označevanja vseh elementov hkrati.

  Отметить все 

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

Vsa koda.

HTML:

  Zahtevane spretnosti: 
  Označi vse 

  HTML 

  CSS 

  Javascript 

  jQuery 

  Php 

  Mysql 

  Ajax 

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); odmev" 
  "; 

Čisti gumb CSS Design

Če želite urediti gumbe v skladu z zasnovo spletne strani, bomo uporabili le CSS. Skrij prvotni kvadrat z lastnostmi z-indeksa in motnosti, v tem primeru se kvadrati ne premaknejo od zaslona, ​​ampak preprosto postanejo pregledni (motnost: 0).

CSS:

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

Na istem mestu prikazujemo gumbe z lastnim dizajnom.

Vhodna oznaka se lahko prikaže pred oznako oznake, nato pa uporabite prvi primer gumbov za oblikovanje:

 .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; }} 

Če je vnos znotraj oznake etikete, se besedilo potrditvenega polja postavi v div z razredom "besedilo". Slogi se prenašajo z vnosa: preverjajo se v divu z razredom "besedilo" v drugem primeru:

 .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:

  Zahtevane spretnosti: 
  
  Označi vse 
  
  HTML 
  
  CSS 
  
  Javascript 
  
  jQuery 
  
  Php 
  
  Mysql 
  
  Ajax 

Tako lahko glede na situacijo vedno izberete ustrezno mesto za vnos in oznako. Če iz nekega razloga možnost, ko je vhod pred nalepko, ni ustrezna, lahko vhod postavite znotraj oznake etikete.

Lahko tudi stilizirate potrditveno polje html z uporabo skripte (javascript, jQuery), moderni brskalniki opravijo odlično delo z njimi. Če pa uporabnik vstopi v spletno mesto iz starega brskalnika, je prednost še vedno CSS.

Upoštevati je treba tudi, da bodo različni operacijski sistemi na različnih načinih izgledali drugače. Če Google Chrome poskuša izravnati te razlike, je lahko v drugih brskalnikih oblikovanje gumbov zelo različno.