U procesu kreiranja web stranice ili bloga i njegovog daljeg popunjavanja sadržajem, iz različitih razloga, ponekad je potrebno sakriti dio teksta, staviti obimnije informacije u blok koji je za sada skriven, ali ipak ukazati na korisniku ono što je dostupno nešto drugo, te mu dati priliku da vidi skriveni sadržaj bez prelaska na sljedeći red ili stranicu.
Ranije je gomila javascripta korištena za implementaciju takvog rješenja, ali sada se sve to može učiniti vrlo lako koristeći nevjerovatna svojstva.

Danas ćemo pogledati najjednostavniji način kreiranja skrivenih blokova sadržaja na stranicama web-mjesta i u pojedinačnim porukama koje se otvaraju kada kliknete na određeni tekstualni element, koristeći isključivo CSS3 svojstva. Prekidač može biti jedna riječ, istaknuta fraza, cijela rečenica ili informativna ikona.
Takvi blokovi se često koriste na stranicama s velikom količinom sadržaja, kako bi bili strukturiraniji i kompaktniji, sav sadržaj je podijeljen u takozvane grupe, u kojima se korisniku prikazuju samo naslovi, sav tekst je po defaultu skriven i može se vidjeti klikom na određeni element (vidi gore).

Pokušajmo bez nepotrebne vode, pogledajte cijeli ovaj jednostavan mehanizam na djelu, sa jasnim primjerom, a možete i urediti nešto ako želite:

Primjer br. 1

Neodabrani i neoznačeni tekst se koristi kao prekidači za padajuće blokove sa dodatnim informacijama, uz nedvosmislenu pozivnicu da kliknete na njega, što morate učiniti bez straha ili sumnje da biste vidjeli)))

Kao što vidite, sve radi više nego savršeno, skriveni sadržaj se pojavljuje bez problema i nestaje laganim klikom miša, a pritom smo koristili minimalan izvršni kod, kako u html framework-u tako i u formiranju css stilova. Bez povezivanja dodatnih javascript biblioteka, uz vječnu brigu da li su one onemogućene na strani korisnika.
Implementacija sve ove akcije postala je moguća zahvaljujući pseudo-klasi CSS3 :provjereno, primijenjen na elemente interfejsa kao što su radio dugmad (). Šta smo zapravo uradili u oznaci Atributu tipa smo dodijelili polje za potvrdu vrijednosti, kao i identifikator id="hd-1" koji odgovara jedinstvenom identifikatoru for="hd-1" strujni blok prekidač. Potvrde ćemo sakriti temeljito i zauvijek postavljanjem svojstva display: none u class.hide.
Zapravo, ovdje nema ništa posebno objašnjavati; cijeli mehanizam za uključivanje i isključivanje skrivenih blokova sastoji se od tri elementa:

• Polje za potvrdu - oznaka sa značenjem polje za potvrdu atribut tip i sa specifičnim identifikatorom povezivanja
• Naslov (prekidač teksta) - oznaka sa jedinstvenom vrijednošću identifikatora za atribut za, (identifikator mora biti isti kao identifikator oznake unos sa značenjem polje za potvrdu atribut tip).
• Blok sadržaja je div tag, koji će sadržavati, do boljih vremena, dok korisnik ne klikne, različite skrivene sadržaje (tekst, slike itd., itd.)

Nadam se da je iz mog haotičnog objašnjenja postalo jasno u čemu je poenta. CSS primjenjuje nove stilove (koristeći pseudo-klasu provjereno) za prikaz bloka sadržaja koji je prethodno bio sakriven samo kada korisnik klikne na element koji je jedinstvenim identifikatorom povezan s potvrdnim okvirom.

Iz svega proizilazi važna napomena:

Kada koristite više skrivenih blokova na istoj stranici, svako radio dugme mora imati jedinstveni ID koji će se razlikovati od ID-ova u drugim blokovima.

Dakle, riječima smo sredili šta ide kamo i zašto, sada pogledajmo html okvir cijele strukture:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Kliknite ovdje da otvorite! < div>Skriveni sadržaj..... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Kliknite ovdje da pročitate više! < div>Skriveni sadržaj...

Kliknite ovdje da otvorite!

Kliknite ovdje da pročitate više!

Zatim prelazimo direktno na formiranje CSS stilova, bez kojih cijeli ovaj dizajn neće funkcionirati. Sasvim minimum koda, bez ikakvog ukrasa, samo je malo istaknuo pozadinu za padajući blok da biste definirali i prikazali okvir skrivenog teksta. Možete dizajnirati blokove kako želite, dodati ivice, zaobljene uglove, istaknuti tekst ili .

1.CSS

. sakriti,. sakriti + label ~ div (prikaz: nema;) /* tip teksta oznake */. sakriti + oznaka, . sakriti: označeno + oznaka (dopuna: 0; boja: zelena; kursor: pokazivač; obrub-dno: 1px tačkasto zeleno; ) . hide: označeno + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

/* sakrij potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div (prikaz: nema; ) /* izgled teksta oznake */ .hide + label, .hide:checked + label (dopuna: 0; boja: zelena ; kursor: pokazivač; border-bottom: 1px tačkasto zeleno; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide: označeno + oznaka (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir je aktivan, prikaži blokove sa sadržajem */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

Ovo je sve, za jedan asketski primjer, sasvim dovoljan minimum. Ali nećemo uopće biti mi ako ne dodamo barem neke dobrote, a bolje je vizualno reći korisniku gdje da klikne.
U drugom primjeru sam dodao jednostavan simbol u obliku plusa koji jasno ukazuje da je ovdje skriveno nešto drugo; kada se pritisne, odmah se pretvara u minus, a skrivenim blokovima sa sadržajem sam dodao malo animacije kada pojavljuju se, a sve to isključivo uz pomoć magije CSS3.

2.CSS

/* sakrij potvrdne okvire i blokove sadržaja */. sakriti,. sakriti + label ~ div (prikaz: nema;) /* tip teksta oznake */. sakriti + oznaka ( margina: 0; padding: 0; boja: zelena; kursor: pokazivač; prikaz: inline-blok; ) /* izgled teksta oznake kada je prekidač aktivan */. sakriti: označeno + oznaka (boja: crvena; obrub-dolje: 0 ; ) /* kada je potvrdni okvir aktivan, prikaži blokove sa sadržajem */. hide: označeno + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;margin-left: 20px;padding: 10px; /* malo animacije pri pojavljivanju */- webkit- animacija: fade ease- za 0.5s; - moz- animacija: fade ease- za 0.5s; animacija: bledenje u 0.5s; ) /* animacija kada se pojave skriveni blokovi */@- moz- ključni kadrovi blijedi ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) @- webkit- ključni kadrovi blijedi ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) @ ključni kadrovi blijedi ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) . sakriti + oznaka: prije ( boja pozadine: #1e90ff; boja: #fff; sadržaj: " \002 B"; displej: blok; float: lijevo; veličina fonta: 14px; font-weight: bold; visina: 16px; visina linije: 16px; margina: 3px 5px; poravnanje teksta: centar; širina: 16px; - webkit- granica- radijus: 50%; - moz- granica- radijus: 50%; radijus granice: 50%; ) . sakriti: označeno + oznaka: prije ( sadržaj: " \221 2" ; }

/* sakriti potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div (prikaz: nema; ) /* izgled teksta oznake */ .hide + label ( margina: 0; padding: 0; boja: zelena; kursor: pointer; display: inline-block; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide:checked + label (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir aktivan, prikaži blokovi sa sadržajem */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* mala animacija kada se pojavi */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease -za 0,5s; animacija: fade ease-in 0,5s; ) /* animacija kada se pojave skriveni blokovi */ @-moz-keyframes blijedi (od (prozirnost: 0; ) do (prozirnost: 1)) @-webkit-keyframes fade ( od ( neprozirnost: 0 ; ) do ( neprozirnost: 1 ) ) @keyframes fade ( od ( neprozirnost: 0; ) do ( neprozirnost: 1 ) ) .hide + label:before ( boja pozadine: #1e90ff; boja: #fff; sadržaj: "\002B"; displej: blok; float: lijevo; veličina fonta: 14px; font-weight: bold; visina: 16px; visina linije: 16px; margina: 3px 5px; text-align: centar; širina: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; radijus granice: 50%; ) .hide:checked + label:before (sadržaj: "\2212"; )

Po svemu sudeći, metoda je nesumnjivo dobra, ali kao i uvijek, i nimalo iznenađujuće, problemi nastaju sa vječnom kočnicom napretka, IE pretraživačem, pseudo-klasom provjereno podržavaju samo verzije 9 i novije ovog pretraživača. Za starije verzije IE-a sve ostaje isto, morat ćete koristiti javascript.

Koristeći skrivene potvrdne okvire, možete jednostavno implementirati stilizirane blokove, klizače, galerije i još mnogo toga.

Uz svo poštovanje, Andrew

Opis

HTML oznaka koristi se za kreiranje padajuće (padajuće) liste koja se pojavljuje kada se klikne na element obrasca i omogućava posjetiocu stranice da odabere jednu od unaprijed definiranih opcija.

Element

može sadržavati dvije ili više oznaka , definišući dostupne izbore u padajućoj listi. Tekst prvog podređenog elementa će u početku biti prikazan u padajućoj listi, odnosno biće zadana vrijednost za listu. Promijenite ili postavite zadanu vrijednost za Odabrani atribut možete dodati željenoj opciji:

Volvo Saab VW Audi

Širina padajućeg menija će biti određena najdužim tekstom navedenim u oznaci .

Atributi

autofocus: Određuje da element treba automatski dobiti fokus kada se web stranica učita. Moguće vrijednosti za boolean atribut autofokusa: Primjer »

Napomena: Atribut autofokusa nije podržan u IE9 i ranijim verzijama i Firefoxu.

Onemogućeno: Označava da je element neaktivan, što znači da korisnik neće moći komunicirati s elementom. Moguće vrijednosti za onemogućeni Boolean atribut:

Primjer » forma: Definira oblik s kojim je element povezan. Vrijednost atributa je identifikator elementa

. Ovaj atribut vam omogućava da postavite element na bilo kojem mjestu u dokumentu, a ne samo kao potomak elementa .

Napomena: atribut forme nije podržan u Firefoxu.

Višestruko: Označava da se istovremeno može odabrati više opcija. Nekoliko opcija varira u zavisnosti od operativnog sistema:

• Windows: držite pritisnutu tipku CTRL da odaberete više opcija.
• Mac: držite tipku CMD da odaberete više opcija.

Moguće vrijednosti za višestruki logički atribut: Primjer »

Napomena: Zbog različitih načina na koje se može odabrati više stavki i dodatnog obavještenja korisnicima da je višestruki izbor dostupan, preporučuje se da koristite potvrdne okvire umjesto padajuće liste.

Ime: Definira naziv za padajuću listu. Može se koristiti za pristup podacima obrasca nakon što su poslani, ili za referenciranje elementa u JavaScriptu. veličina: Određuje broj vidljivih opcija na padajućoj listi. Ako je vrijednost atributa size veća od 1, ali manja od ukupnog broja opcija na listi, pretraživač će automatski dodati traku za pomicanje kako bi označio da ima više opcija za pregled.

HTML oznake koje definiraju HTML forme na web lokaciji

Izrađujemo web stranice i pojedinačne stranice na Internetu za komunikaciju sa posetiocima.

HTML forme se koriste za registraciju posjetitelja na stranici, za interaktivne ankete i glasanje, omogućavaju vam slanje poruka, kupovinu itd. HTML Obrazac je kreiran za jednu svrhu: prikupljanje i naknadno prenošenje informacija za obradu softverskom skriptom ili putem e-pošte.

Primjer HTML forme | Uđite na stranicu

Oznake, atributi i vrijednosti

- odrediti oblik.
• name="" - definira naziv obrasca.
• method="" - definira način slanja podataka iz obrasca. Vrijednosti: "get" (podrazumevano) i "post" . Često se koristi metoda "post" jer omogućava prijenos velikih količina podataka.
• action="" - definira url na koji se podaci šalju na obradu. U našem slučaju - enter_data.php ..
• - definirati elemente forme kao što su dugmad, prekidači, tekstualna polja za unos podataka.
• type="text" - definira tekstualno polje za unos podataka.
• type="password" - definira polje za unos lozinke, sa tekstom prikazanim u obliku zvjezdica ili kružića.
• type="checkbox" - definira radio dugme.
• type="hidden" - definira skriveni element forme - koristi se za prijenos dodatnih informacija na server.
• size="25" - dužina tekstualnog polja u znakovima.
• maxlength="30" - maksimalni dozvoljeni broj unesenih znakova.
• value="" - definira vrijednost koja će biti poslana na obradu ako se odnosi na radio dugmad ili prekidače. Vrijednost ovog atributa kao dijela tekstualnog polja ili gumba bit će prikazana kao, na primjer, Vasya ili Login u gornjem primjeru.

Primjer HTML forme | Komentari na stranici

Ime Mail

Oznake, atributi i vrijednosti

• action="http://site/comments.php" - definiše url na koji će se slati podaci iz obrasca.
• id="" - definira ime i identifikator elementa obrasca.
• name="" - definira ime elementa obrasca.
• - definirati tekstualno polje kao dio obrasca.
• cols="" - određuje broj kolona u tekstualnom polju obrasca.
• rows="" - definira broj redova tekstualnog polja obrasca.

Ako između stavite tekst, on će biti prikazan unutar polja kao primjer koji se može lako ukloniti.

Primjer HTML forme | Padajuća lista

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Oznake, atributi i vrijednosti

• - definirati listu sa pozicijama za odabir.
• size="" - određuje broj vidljivih pozicija liste. Ako je vrijednost 1, imamo posla sa padajućom listom.
• - odrediti pozicije (stavke) liste.
• value="" - sadrži vrijednost koju će obrazac poslati na navedeni URL na obradu.
• selected="selected" - ističe stavku liste kao primjer.

Primjer HTML forme | Lista sa trakom za pomeranje

Povećanjem vrijednosti atributa size="" dobijamo listu sa trakom za pomicanje:

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Prva pozicija Druga pozicija Treća pozicija Četvrta pozicija

Za ovu opciju koristite oznaku multiple="multiple" koja omogućava odabir više pozicija. Njegov nedostatak omogućava vam da odaberete samo jednu stavku.

type="submit" - definira dugme.

type="reset" - definira dugme za resetiranje.

value="" - definira oznaku na gumbu.

Pogledajte dodatno:

Opis

Tag omogućava vam da kreirate element interfejsa u obliku padajuće liste, kao i liste sa jednim ili višestrukim izborom, kao što je prikazano u nastavku. Konačni izgled ovisi o korištenju atributa size oznake koji postavlja visinu liste. Širina liste je određena najširim tekstom navedenim u oznaci , a može se mijenjati i korištenjem stilova. Svaka stavka se kreira pomoću oznake , koji bi trebao biti ugniježđen u kontejner . Ako planirate da pošaljete podatke liste na server, onda morate postaviti element unutar forme. Ovo je takođe neophodno kada se podacima liste pristupa putem skripti.

Sintaksa

Stav 1 Tačka 2

Atributi

Omogućava vam da skočite na listu pomoću neke prečice na tastaturi. Postavlja listu da prima fokus nakon što se stranica učita. Blokira pristup i modifikaciju elementa. Povezuje listu sa obrascem. Omogućava vam da odaberete više stavki liste odjednom. Ime elementa koji se šalje na server ili mu se pristupa putem skripti. Listu je potrebno odabrati prije podnošenja obrasca. Broj redova liste za prikaz. Definira redoslijed prijelaza između elemenata kada se pritisne tipka Tab

Oznaka za zatvaranje

Obavezno.

HTML5 IE Cr Op Sa Fx

Izaberite heroja Cheburashka Krokodil Gena Shapoklyak Rat Larisa

HTML oznaka opcije se koristi za kreiranje padajuće liste koja omogućava korisniku da izabere jednu opciju iz unapred definisanog skupa vrednosti.

Tekst koji je vidljiv korisniku može se razlikovati od teksta navedenog u atributu vrijednosti. Evo kako napraviti padajuću listu:

Zeleno Žuta Crna

• Padajuća lista se kreira pomoću oznake ;
  Unutar oznake
  opcije za izbor su definisane pomoću oznake ;
• U oznaci možete koristiti atribut value da pristupite odabranoj opciji koristeći PHP, JS, Jquery, itd.

Također je moguće odrediti CSS klasu umjesto korištenja ID-a za stiliziranje padajuće liste.

U sljedećem odjeljku ću pokazati primjere korištenja HTML padajuće liste u JavaScript/JQuery. Primjeri će također pokazati kako postaviti stilove koristeći CSS/CSS3 i Bootstrap framework.

Primjer kreiranja jednostavne padajuće liste

Ovaj primjer koristi opciju odabira HTML-a za kreiranje padajuće liste sa tri opcije za odabir:

Gornji primjer koristi sljedeće oznake za kreiranje padajuće liste:

5 10 15 20 25

Korištenje atributa vrijednosti

Kao što je ranije spomenuto, vrijednost atributa value može se razlikovati od teksta prikazanog na stranici. Na primjer, možete prikazati imena zemalja ili boja za korisnike i koristiti kratke kodove u atributu vrijednosti.

U sljedećem primjeru kreirat ćemo padajuću listu s atributom vrijednosti:

Pogledajte online demo i kod

Za oznaku Koristi se sljedeći kod:

Maroon Zeleno Žuta Plava Crveni

Primjer pristupa odabranoj opciji u JavaScript-u

Sada napravimo primjer pristupa vrijednosti odabrane opcije i izvođenja nekih radnji. Kreiramo istu listu kao u gornjem primjeru s opcijama boja. Kada odaberete, kliknite na dugme da primenite tu boju na dokument:

Pogledajte online demo i kod

Za vrijednost opcije HTML koristi se sljedeći kod:

Maroon Zeleno Žuta Plava Crveni Ostalo

Sljedeća linija koda se koristi u JavaScriptu za pristup vrijednosti atributa vrijednosti opcije :

var seltheme = document.getElementById(“selcolor”).value;

Kada se klikne na dugme, poziva se JS funkcija koja promenljivoj dodeljuje vrednost izabranu na padajućoj listi. Ova vrijednost se koristi za primjenu boje na tekući dokument.

Pristup vidljivom tekstu u JQueryju

Ovaj put ću koristiti JQuery za pristup vrijednosti odabrane opcije: i tekstu i vrijednosti. U ovoj demonstraciji, pristupit ću vidljivom tekstu u oznaci opcije u HTML-u:

Pogledajte online demo i kod

U kodu za svaku opciju u oznaci

značenje je drugačije od teksta. Jednom kada odaberete boju, jQuery prikazuje vidljivi tekst u upozorenju. Tag code sljedeći:

Maroon Zeleno Žuta Plava Crveni

Evo kako pristupiti ovoj vrijednosti u HTML odaberite opciju odabran JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Također možete pristupiti vrijednosti koristeći JQuery $.val() metod:

var selectedcolor = $("#jqueryselect").val();

Zamijenite ovu liniju u primjeru iznad i kod će prikazati vrijednost kratkog koda/boje u atributu value, a ne u vidljivom tekstu.

Primjer dobivanja vrijednosti u PHP skripti

U ovom primjeru dobivanja vrijednosti opcije odabrane sa padajuće liste, obrazac se kreira pomoću oznake u odjeljku za označavanje. Nakon što odaberete boju sa padajuće liste, kliknite na dugme „Pošalji“. Podaci obrasca će biti proslijeđeni u istu PHP datoteku, nakon čega će se prikazati odabrana boja:

Pogledajte online demo i kod

Metoda obrasca korištena u primjeru je POST, tako da možete dobiti vrijednosti obrasca koristeći PHP $_POST[“”] niz. Ovo je kod obrasca korišten u primjeru:

Odaberite boju:

Maroon Zeleno Žuta Plava Crveni