Računala » Checkbox html: primjeri lijepih gumba na čistom CSS-u, stvaranje "harmonika", dobivanje podataka o obrascima pomoću PHP-a i jQuery

Checkbox html: primjeri lijepih gumba na čistom CSS-u, stvaranje "harmonika", dobivanje podataka o obrascima pomoću PHP-a i jQuery

Računala

Mogućnosti za korištenje potvrdnog okvira za unos html vrlo su velike, ali najčešće se taj element koristi u oblicima prijenosa podataka. Međutim, on je sposoban obavljati mnogo više "trikova" nego dobivanja vrijednosti oblika. To je prikladno koristiti za stvaranje različitih "harmonika" na čistom CSS-u.

Jednostavna čista CSS harmonika

HTML:




]



CSS:

oznaka [za ^ =] harmonika "]: hover ~ oznaka [za ^ =" harmonika "] {
 neprozirnost: 0,8;
text-shadow: 1px 1px 2px currentColor; 
}

U ovom primjeru, kada pređete pokazivačem iznad oznake na naljepnici ("stavak 1"), stilovi se prenose na sve ostale oznake ispod (braća i sestre, s engleskog - braća i sestre) , Za prijenos svojstava na braću i sestre koristite znak "~" za prijenos stilova samo na određene oznake, a ne na sve braće i sestre na stranici. Znak "^" označava "počinje s", u primjeru "za unos ^ = 'harmonika' -" (za), koji počinje riječju "harmonika":

Kao rezultat toga, kada prelazite pokazivačem na naljepnicu, stil donjih oznaka se mijenja.

Oznake su vrlo korisne jer je na zaslonima mobilnih telefona vrlo teško kliknuti na potvrdni okvir html u maloj kutiji, oni proširuju zonu koja je dostupna korisniku da bira željeni odgovor. Štoviše, zahvaljujući etiketi možete potpuno ukloniti kvadrate s ekrana:

ulaz [id ^ = "harmonika"] {
 položaj: apsolutni;
lijevo: -9999px; 
}

Možete dodati i pokazivač: pointer tako da posjetitelji mogu razumjeti web-lokaciju,da točke "clickable":

oznaka [za ^ = "harmonika"]: hover {
 kursor: pokazivač; 
}

Kao rezultat toga, kada postavite pokazivač iznad teksta (npr. "Stavka 1"), pokazivač će biti "ruka" umjesto strelice. Možete dodati dodatne CSS stilove još više harmonici.


CSS "Stunts" ne završavaju tamo. Dodajmo skriveni tekst našoj "harmonici".



Tekst 1.



Stavak 2

Tekst 2.





Tekst 3.

Stilovi za skriveni tekst:

[id ^ = "harmonika-kutija -"] {
 preljev: skriven;
max-visina: 0; 
}

Da biste dobili tekst klikom na oznaku, dodajte max-height: 100% u stilu:

input [id ^ = "harmonika" ]: označeno + [id ^ = "harmonika-kutija -"] {
 max-height: 100%; 
}

Proces počinje kada korisnik klikne na oznaku, potvrdni okvir html odabran (unos: označen), a zatim prođe sa znakom "+" (što znači "samo prvi brat ispod") svojstvo max-height: 100% na

s tekstom.

Kada odaberete odgovarajuću stavku, pojavljuje se tekst.

HTML: 



Tekst 1. 

96) 


Tekst 2.




)
Tekst 3.

CSS:

oznaka [za ^ = "harmonika"] {
 veličina fonta: 20px; 
}
naljepnica [za ^ = "harmonika"]: hover {
 kursor: pokazivač;
boja: crvena;
text-shadow: 1px 1px 2px currentColor; 
}
oznaka [za ^ = "harmonika"]: hover ~ oznaka [za ^ = "harmonika"] {
 neprozirnost: 0,8;
text-shadow: 1px 1px 2px currentColor; 
}
ulaz [id ^ = "harmonika"]: označeno + [id ^ = "harmonika-kutija -"] {
 max-height: 100%;
margina: 10px; 
}
ulaz [id ^ = "harmonika"] {
 pozicija: apsolutna;
lijevo: -9999px; 
}
[id ^ = "harmonika-kutija -"] {
 preljev: skriven; 
max-visina: 0; 
}

Dobivanje i obrada vrijednosti pomoću PHP-a

Razmotrite, na primjer, primjere checkbox-a html u oblicima gdje je također moguće dobiti vrijednost (value = "my_value").

Zapisujemo vrijednost u operator value = "".

Kada šaljete obrazac, polje $ _POST će sadržavati polje name = "" u nizu i vrijednost value = "".



Ako je to bio normalni niz, onda je izgledao ovako:

$ post = array ("name" => gt; vrijednost);
"$ css_name" = & gt;

ili

$ post = array (
 "HTML_name" = & gt; HTML; CSS,
javascript_name = & gt; javascript,
jQuery_name = & gt; jQuery,
PHP_name = & gt; PHP,
ajax_name = & gt; Ajax, 
);

Pretvorite niz $ _POST niza koristeći funkciju PHP implode () i dodijelite vrijednost $ _POST ["ajax_name"] promjenom $ ajax. Tipično, za sve vrijednosti $ _POST stvaraju se varijable, ali na primjer, samo ćemo ih napisati, tako da ne preopterećujemo kod s viškom podataka. Također morate provjeriti sigurnost ulaznih podataka $ _POST, ali to nećemo učiniti ovdje, mnogo je napisano u drugim člancima.
Moje vještine: ".implode (',', $ _POST);
ako (isset ($ _POST [" ajax "])) {
$ ajax = $ _POST [
}
ako je (isset ($ ajax)) {
echo "

postavljena je varijabla $ ajax ;;
}
echo"

"
 var_dump ($ _ POST);
echo"
";

Primanje ključeva i vrijednosti obrazaca pomoću jQuery

Za dobivanje vrijednosti iz obrasca bez ponovnog učitavanja stranice,koristiti javascript ili jQuery skripte):

$ (document) .ready (function () {
 $ ("input.my-class"). on ("klik", funkcija (e } {{219}} {{219}} {{219}} {{219}} {{219}} { )
$ ("# log") Html ("Odabrano:" + val.join (",") "" 

"); 
}); 
}) ;

Kreiramo niz:

var val = [];

Tada će svaka (odabrana) stavka ("ulaz: označena") pomoću funkcije push zapisati val () polje:

$ ("ulaz: označeno") (funkcija () {
 val.push ($ (this) .val ()); 
});

Sadržaj niza val () bit će prikazan na stranici, za što ćemo dodati objekt html

jQuery: 240] 

$ ("# log") Html ("Odabrano:" + val.join (",") "" 

");

Saznajte je li odabran potvrdni okvir html, možete koristiti .is (": označeno"). Prop ("označeno").

Dobivamo vrijednost (val) svake zastavice i izvest ćemo je putem upozorenja ():

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

Ista stvar koju radimo za id (id) s .prop ("čekom"):

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

Izlaz ključeva i vrijednosti kroz alert () je samo za primjer, oni nisu potrebni za posao, pa ih treba ukloniti iz koda.

Gumb za slanje obrasca bit će nedostupan ("onemogućen") ako nije postavljen potvrdni okvir:


) $ ('# submitButton'). prop ("onemogućeno", $ (this) .prop ("označeno"));

Zabilježite dvotočku: .is (": checked") ispravno radi s dvotočkom, a .prop ("označeno") radi bez dvotočke !!!

Dodamo priliku da odmah označimo sve točke.


ako ($ ("# checkAll") prop ("označeno") ))$ ('input.my-class'). nije (ovo) .prop ('označeno', ovo je označeno);

Svi kodovi.

HTML: 

Potrebne vještine: 



283)

jQuery:

$ (document) .ready (funkcija () {
 $ ("input.my-class"). "klik", funkcija (e) {
 može val = [];
ako ($ (this) .is (': checked')) alert ($ (this) .val ());
) ($ (this) .prop ('označeno')) upozorenje ($ (this) .attr ("id"));
$ ('# submitButton'). Ovo (označeno)); (proxy ("označeno"));
ako ($ ("# checkAll"). Prop ("označeno")) $ ('input.my-class'). Nije (ovo) .prop ('
$ ("input: checked"). svaki (function () {
 val.push ($ (this) .val ()); 
}) 335) ako ($ ("# checkAll") prop ("označeno")) {
 $ ("# log"). Html ("Odabrano: ALL

"); 
} inače {{340} $ ("# log"). html ("Odabrano:" + val.join (",") + "
 
"); 
} 
}) 
});

PHP:

if (isset ($ _ POST ["ALL"])) {
 echo "Moje vještine: sve navedene"; 
} else {
 echo "

Moje vještine:" .implode (',', $ _POST); 
}
if (isset ($ _POST ["ajax"]))) {
 $ ajax = $ _POST ["ajax"]; 
}
if (isset ($ ajax)) {
 echo '

Varijabilni skup $ ajax'; 
}
echo
";
var_dump ($ _ POST);
jeka "
";

Dekoriranje gumba na čistom CSS-u

Za izradu gumba u skladu s dizajnom stranice, koristit ćemo samo CSS. Sakrij izvorni kvadrat s svojstvima z-indeksa i neprozirnosti, u ovom slučaju, kvadrati se ne pomiču s ekrana, već jednostavno postaju prozirni (neprozirnost: 0).

CSS:

pozicija: apsolutna;
z-indeks: -1;
neprozirnost: 0;
margina: 10px 0020px;

Na istom mjestu prikazujemo gumbe s vlastitim dizajnom.

Ulazna oznaka može biti ispred oznake oznake, a zatim koristiti prvi primjer oblikovanja gumba:

.my-class {
 pozicija: apsolutna;
z-indeks: -1;
neprozirnost: 0;
margina: 10px 0020px; 
}
.my-class + oznaka {
 pozicija: relativna;
obloga: 000 60px;
pokazivač: pokazivač;
pozicija: apsolutna,
gore: -4px;
lijevo: 0;
širina:
visina: 26px;
granični polumjer: 13px;
pozadina: # CDD1DA;
okvir-sjena: umetak 0 2px 3px rgba (000.2);
prijelaz: 1.2 s; 
}
oznaka "my-class": nakon {
 sadržaja: ";
pozicija: apsolutna;
gore: -2px;
lijevo: 2px;
širina: 22px;
visina: 22px;
granični polumjer: 10px;
pozadina: #FFF;
kutija-sjena: 2px 0 5px rgba (000.3);
prijelaz: .2s; 
}
.my-class: označeno + oznaka: prije {
 pozadine: # 87CEFA;
-webkit-animacija: blackblur 2s 015 s 1 alternativa;

}
.my-class: označeno + oznaka: nakon {
 lijevo: 26px;

}
.my-class: focus + oznaka: prije {
 box-shadow: umetak 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}


@ -webkit-keyframes blackblur {
 od {box-shadow: 0072px black; boja: transparentna;}
do {box-shadow: 0; boja: crna;} 
}

Ako je unos unutar oznake oznake, tada tekst teksta u polju za označavanje s tekstom "text". Stilovi se prenose s ulaza: označeni su na div s klasom "tekst" u drugom primjeru:

.label input {
 position: absolute;
z-indeks: -1;
neprozirnost: 0;
margina: 10px 0020px; 
}
.text {
 pozicija: relativna;
obloga: 000 60px;
pokazivač: pokazivač;
lijevo: 0;
širina: 50px;


granica-radius: 13px;
pozadina: # CDD1DA;
box-shadow: umetak 0 2px 3px rgba (000.2);
prijelaz: .2s; 
}
.tekst: nakon {
 sadržaja: ";
pozicija: apsolutna;
vrh: -2px;
lijevo: 2px;
širina: 22px;
visina: 22px;
granični polumjer: 10px;
pozadina: #FFF;
kutija-sjena: 2px 0 5px rgba (000.3);
prijelaz: .2s; 
}
.label input: označeno + .text: prije {
 pozadine: # 87CEFA;
-webkit-animacija: blackblur 2s 015 s 1 alternativa; 
}
 .label input: označeno + .text: nakon {
 lijevo: 26px; 
}
.label input: focus + .text: prije {
 box-shadow: umetak 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}
@ -webkit-keyframes blackblur {
 od {box-shadow: 0072px black; boja: transparentna;}
do {box-shadow: 0;












javascript









Dakle, ovisno o situaciji, uvijek možete odabrati odgovarajuću opciju ulaza i oznake mjesta. Ako iz nekog razloga opcija nije prikladna kada se ulaz nalazi ispred naljepnice, možete staviti ulaz unutar oznake naljepnice. Također možete označiti html pomoću skripti (javascript, jQuery), moderni preglednici ih mogu savršeno obraditi. Ali ako korisnik unese stranicu iz starog preglednika, onda je prednost vrijedan davanja CSS-a. Također morate uzeti u obzir da će u različitim operacijskim sustavima potvrdni okviri izgledati drugačije na različite načine. Ako Google Chrome pokuša ugladiti te razlike, u drugim preglednicima, dizajn gumba može se uvelike razlikovati.
Učitavanje ...

Materijali na temu:

(The 612)
Što je vrsta ulaza HTML-a?

Povezane publikacije

HTML: izgled tablice. Primjeri, opis, primjena, savjeti Kako promijeniti boju teksta u HTML-u: primjeri i ideje Kako umetnuti hipervezu u HTML? Stvorite i koristite hiperveze u HTML-u HTML atributi: vrste i aplikacije. HTML referenca Tri načina za stvaranje gumba u Excelu Kako resetirati "Android" pomoću gumba?