Formulare HTML. Crearea și lucrul cu formulare în html Selectarea intrărilor din listă

Descriere

Etichetă HTML folosit pentru a crea o listă derulantă (drop-down) care apare atunci când se face clic pe un element de formular și permite vizitatorului site-ului să selecteze una dintre opțiunile predefinite.

Element

poate conține două sau mai multe etichete , definind Optiuni Disponibile selecție din lista derulantă. Textul primului element copil va fi afișat inițial în lista derulantă, adică va fi valoarea implicită pentru listă. Modificați sau setați valoarea implicită pentru Puteți adăuga atributul selectat la opțiunea dorită:

Volvo Saab VW Audi

Lățimea listei derulante va fi determinată de cel mai mult text lung specificate în etichetă .

Atribute

autofocus: Specifică faptul că elementul ar trebui să primească automat focalizare atunci când pagina web se încarcă. Valori posibile pentru atributul boolean autofocus: Exemplu »

Notă: atributul de focalizare automată nu este acceptat în IE9 și ulterioare versiuni anterioare, și în Firefox.

Dezactivat: indică faptul că elementul este inactiv, ceea ce înseamnă că utilizatorul nu va putea interacționa cu elementul. Valori posibile pentru atributul boolean dezactivat:

Exemplu » formular: Definește forma cu care este asociat elementul. Valoarea atributului este identificatorul elementului

. Acest atribut vă permite să plasați un element în orice loc din document, și nu doar ca descendent al elementului .

Notă: atributul formular nu este acceptat în Firefox.

Multiple: Indică faptul că mai multe opțiuni pot fi selectate simultan. Selecțiile multiple variază în funcție de sistem de operare:

• Windows: țineți apăsată tasta CTRL pentru a selecta mai multe opțiuni.
• Mac: țineți apăsată tasta CMD pentru a selecta mai multe opțiuni.

Valori posibile pentru atributul logic multiplu: Exemplu »

Notă: datorită în diverse moduri selectând mai multe articole și notificând suplimentar utilizatorii că sunt disponibile mai multe opțiuni, se recomandă să utilizați casete de selectare în loc de o listă derulantă.

Nume: definește numele pentru lista verticală. Poate fi folosit pentru a accesa datele din formular după ce au fost trimise sau pentru a face referire la un element în JavaScript. dimensiune: Specifică numărul de opțiuni vizibile din lista verticală. Dacă valoarea atributului dimensiune este mai mare decât 1, dar mai mică decât numărul total de opțiuni din listă, atunci browserul va adăuga automat o bară de defilare pentru a indica faptul că există mai multe opțiuni de vizualizat.

O listă derulantă în HTML poate fi creată folosind o etichetă Selectați. Pe lângă lista drop-down (sau „drop-down”), eticheta Selectați vă permite să creați un element de listă cu selecție multiplă. Sintaxa de utilizare a etichetelor Selectați HTML-ul arată astfel:

Elektronik Syroezhkin Cijikov Kukushkina

Aici folosind eticheta opțiune sunt specificate elementele listei.

Rezultatul aplicarii:

Electronice Syroezhkin Chizhikov Kukushkina

SELECTAȚI atributele etichetei

Să ne uităm la atributele etichetei Selectați:

• Nume
• mărimea- numărul de linii afișate în listă (număr);
• multiplu- permite funcția de selecție multiplă a elementelor listei derulante;
• dezactivat- blochează accesul la element;
• formă- vă permite să legați o listă derulantă la un formular (poate fi necesar dacă lista în sine se află în afara formularului la care ar trebui să fie legată). Id-ul formularului este transmis ca argument.

Poate că acestea sunt toate atributele principale ale etichetei Selectați care sunt cel mai des folosite. Să vedem acum cum să facem o listă drop-down în HTML folosind atributele specificate:

Elektronik Syroezhkin Cijikov Kukushkina

Atributele etichetei OPTION

Etichetă opțiune, după cum sa menționat deja, ne permite să determinăm elemente copil lista verticală Selectați, care, la rândul său, joacă rolul unui container. Etichetă opțiune are propriile sale atribute:

• dezactivat- interzice alegerea a acestui element listă;
• eticheta- vă permite să setați o etichetă pentru elementul de listă curent (în loc de textul specificat în etichetă, este afișată valoarea etichetei, ceea ce vă permite să afișați o valoare prescurtată); Vă rugăm să rețineți: acest atribut nu este acceptat în Firefox.
• selectat- elementul curent din listă va fi selectat implicit;
• valoare- valoarea care va fi transferata pe server;

Să ne uităm la un caz de utilizare avansat pentru etichetă opțiune:

Domnule Electronic Syroezhkin Cijikov Kukushkina

Rezultatul exemplului de mai sus va arăta astfel:

Domnul Electronics Syroezhkin Cijikov Kukushkina

Generatorul de site-uri web Nubex vă permite să creați formulare personalizate folosind modulul de generare a formularelor. Funcționarea listelor derulante în Nubex este descrisă în articol:

Adesea, pe site-urile Web puteți găsi pagini cu formulare HTML plasate pe ele. Formularele web sunt o modalitate convenabilă de a primi informații de la vizitatorii site-ului dvs. Un exemplu în acest sens este - , - care oferă părere cu vizitatorii site-ului și dezvoltatorii. Formularele sunt, de asemenea, convenabile pentru dezvoltatorii de site-uri atunci când dezvoltă un CMS, ceea ce le permite să mențină proprietatea principală a site-ului - relevanța. Acest articol este dedicat elementelor de bază ale creării formularelor HTML, procesării acestora și modalităților de transfer de date din formularele de ecran în scripturile PHP.

1) Creați un formular simplu

Etichete

Și

definiți începutul și sfârșitul formularului. Eticheta formular de pornire

contine doua atribute: acțiuneȘi metodă. Atributul acțiune conține adresa URL script care trebuie apelat pentru a procesa scriptul. Atribut metodă spune browserului ce fel Solicitare HTTP trebuie folosit pentru a trimite formularul; valori posibile POSTȘi OBȚINE.

cometariu

Principala diferență dintre metodele POST și GET este modul în care sunt transferate informațiile. În metoda GET, parametrii sunt trecuți prin bara de adrese, adică. în esență în antetul cererii HTTP, în timp ce în metoda POST parametrii sunt transmisi prin corpul solicitării HTTP și nu se reflectă în niciun fel în bara de adrese.

$text = nl2br($_POST[„textul meu”]);
?>

Sarcină: Să presupunem că trebuie să creați o listă derulantă cu ani de la 2000 la 2050.
Soluţie: Trebuie să creați formular HTML cu elementul SELECT și PHP – script pentru procesarea formularului.

Discuţie:

Mai întâi, să creăm două fișiere: form.htmlȘi acțiune.php. În dosar form.html va conține un formular html cu o listă derulantă. În plus, valorile din listă pot fi specificate în două moduri:

I. Introducerea manuală a datelor:

2000
2001
2002
……………………………………………
2050

II. Introducerea datelor printr-o buclă:

$an = 2000 ;
pentru ($i = 0; $i<= 50 ; $i ++) // Ciclul de la 0 la 50
{
$ani_noui = $an + $i ; // Formează o nouă valoare
ecou" " . $new_years ."" ; //Formați o nouă linie
}
?>

După cum puteți vedea, al doilea exemplu cu o buclă este mai compact. Cred că nu este nevoie să furnizați scriptul de gestionare pentru acest formular, deoarece este procesat exact la fel ca un câmp de text, de exemplu. valorile listei pot fi preluate dintr-o matrice superglobală $_POST.

Descriere:

Să creăm un formular HTML pentru a trimite un fișier către server.

Acest formular html conține un element naviga, care deschide o casetă de dialog pentru selectarea unui fișier de încărcat pe server. Când apăsați butonul „Transferați fișierul”, fișierul este transmis scriptului de gestionare.

Apoi trebuie să scrieți un script de gestionare acțiune.php. Înainte de a scrie handler-ul, trebuie să decidem în ce director vom copia fișierul:

if(isset($_FILES [ "fișierul meu" ])) // Dacă fișierul există
{
$catalog = "../imagine/" ; // Catalogul nostru
if (este_dir($catalog)) // Dacă un astfel de director există
{
$myfile = $_FILES [ "fișierul meu" ][ "nume_tmp" ]; // Fișier temporar
$myfile_name = $_FILES [ "fișierul meu" ][ "nume" ]; // Nume de fișier
if(! copie ($fișierul meu, $catalog)) echo „Eroare la copierea fișierului”. $myfile_name // Dacă copierea fișierului a eșuat
}
else mkdir (""../imagine/" ); // Dacă nu există un astfel de director, îl vom crea
}
?>

cometariu

Dacă aveți încredere în utilizatorii să încarce orice fișiere pe serverul dvs., trebuie să fiți extrem de atenți. Atacatorii pot încorpora codul „rău” într-o imagine sau într-un fișier și îl pot trimite la server. În astfel de cazuri, trebuie să controlați strict descărcarea fișierelor.

Acest exemplu demonstrează crearea unui director și copierea unui fișier în acel director pe server.

De asemenea, aș dori să demonstrez un exemplu cu elementul Caseta de bifat. Acest element este ușor diferit de alte elemente, dacă nu unul dintre elemente Caseta de bifat’a nu este selectată, atunci variabila superglobală $_POST va returna valoarea goala:

Albastru
Negru
alb

if (!empty($_POST [ "culoarea mea" ])) echo $_POST [ "culoarea mea" ]; // Dacă este selectat cel puțin 1 element
altfel ecou „Selectați valoarea”;
?>

window.onresize = … ​​​​;

Evenimentul onresize al obiectului fereastră este responsabil pentru redimensionarea ferestrei browserului. Prin urmare, evenimentul aparține obiectului fereastră.

Pentru că printre elemente html Nu există nicio etichetă identificată cu fereastra browserului, atunci puteți procesa evenimentul onresize în javascript prin alocarea unei funcții unei proprietăți a obiectului fereastră.

Să ne uităm la un exemplu:

Exemplu: Scrieți un script care să afișeze un mesaj atunci când dimensiunea ferestrei este schimbată „Fereastra a fost redimensionată!”

Scenariul:

window.onresize = function message() (alerta ("Fereastra a fost redimensionata!");)

Cod HTML:

vă rugăm să redimensionați această fereastră.

obiect listă derulantă javascript - selectați

Obiectul selectat, o listă derulantă, oferă o listă de valori din care să selectați. Alegerea poate fi fie un articol, fie mai multe articole deodată. Acest obiect complex, care este accesat în script atât ca obiect selectat, cât și ca element de opțiune.

Proprietățile obiectului selectat:

• lungime — numărul de elemente din listă
• nume — atribut nume
• opțiuni — gamă de articole
• selectedIndex — indexul elementului de opțiune selectat
• defaultSelected — opțiune implicită selectată
• selectat - elementul selectat

Puteți obține valoarea unei liste derulante (selectați) în javascript prin proprietatea value. Dar există și alte moduri.

Să ne uităm la un exemplu:

Exemplu: Plasați o listă derulantă cu trei elemente - orașe: Moscova, Saint Petersburg, o alta. Făcând clic pe butonul, obțineți valoarea proprietății valorii a opțiunii (articolului) selectat din listă și afișați-o pe ecran

Cod HTML:

<numele formularului = "f1" > Oraș:<br> <select name = "oraș" id = "s1" > <valoarea opțiunii = "msk" > !} Moscova</opțiune> <valoarea opțiunii = "spb" > !} Saint Petersburg</opțiune> <valoarea opțiunii = "altul" > !} o alta</opțiune> </selectare> <tip de intrare = "buton" onclick = "f()" valoare = "ok" > !} </form>

Oraș:
Moscova Saint Petersburg o alta

Identificarea valorii din listă:

funcția f() ( var a= document.getElementById ("s1") .value ; alert(a) ; )

funcția f())( var a=document.getElementById("s1").value; alert(a); )

Sarcina js13_1. Când schimbați un element din listă, adăugați textul din elementul de meniu selectat (opțiune) în câmpul de text.

Detalii:

• Adăugați un câmp de text și o listă de selectare cu patru opțiuni cu text.
• În eticheta de selectare de deschidere, adăugați un handler de evenimente onchange.
• Identificați handlerul de evenimente onchange cu o funcție care modifică textul în câmpul de text (plasați valoarea elementului de meniu selectat în câmpul de text).

Completează codul:

Scenariul:

function check() ( document.getElementById ("t1") .value = ...; )

function check() ( document.getElementById("t1").value= ...; )

<tip de intrare = "text" id = "t1" > <br> <select id = "menu1" onchange = "..." > <valoarea opțiunii = "1" > 1</opțiune> <valoarea opțiunii = "2" > 2</opțiune> <valoarea opțiunii = "3" > 3</opțiune> </selectare>

1 2 3

Sarcina js13_2. Creați o pagină pentru a testa cunoștințele unui student cu o întrebare: „În ce unități se măsoară munca?” si doua raspunsuri: "Cârtiță"(greșit) și "Joule"(corect), conceput ca element de meniu cu o listă (selectare). Rulați funcția de verificare

Să ne uităm la un exemplu de utilizare a proprietății select object - selectedIndex - element de opțiune selectat:

Exemplu: Afișați indexul alternativei selectate într-o fereastră de text:

Uzina de automobile: GAZ VAZ Index selectat:

ÎN în acest exemplu Când se modifică un element de meniu, este generat evenimentul onChange. Un script este executat ca valoare a atributului onChange: câmpul text este accesat printr-o matrice de elemente de formular (câmpul text este primul element al matricei, deoarece al 0-lea element este lista derulantă select). Ca valoare câmp de text indică numărul elementului din listă selectat (selectedIndex).

obiect opțiune javascript - element de meniu

Elementul de meniu de selectare din javascript - opțiune - este tratat ca un obiect separat cu proprietăți proprii:

Un anumit element de meniu este accesat prin intermediul opțiuni de colectare (matrice).:

<numele formularului = "f1" > <selectați numele = "s1" > <valoarea opțiunii = "1" > 1</opțiune> <valoarea opțiunii = "2" > 2</opțiune> <valoarea opțiunii = "3" > 3</opțiune> </selectare>

1 2 3

Script pentru accesarea primului element al meniului derulant (element zero al matricei de opțiuni):

funcția myFunc())( document.f1.s1.options....=...; ...; )

Rostov-Don Vladimir Moscova

Să ne uităm la un exemplu de utilizare a proprietății text a unui obiect opțiune:

Exemplu: Când schimbați selecția unui element de listă într-un câmp de text, scoateți text din alternativa de listă selectată

<formular > <select id = "s1" onChange = "document.getElementById("t1").value= document.getElementById("s1").options.text;"> <opțiunea > GAZ<opțiunea > VAZ</selectare> <tip de intrare = "text" id = "t1" > </form>

GAZ VAZ

Să ne uităm la o altă soluție folosind o listă cu variante multiple:

Exemplu: Când modificați o listă cu opțiuni multiple, afișați indexurile alternativelor selectate într-o fereastră de text
(setați atributul listei multiple)

<formular > Set de papetărie:<select onChange = "form.elements.value=""; pentru(i=0;i<6;i++) if(form.elements.options[i].selected==true) form.elements.value = form.elements.value+i;" multiplu> <opțiunea > Creioane<opțiunea > Pixuri<opțiunea > Conducători<opțiunea > Caiete<opțiunea > Radiere<opțiunea > Butoane</selectare> Articole selectate:<nume de intrare = "s1" dimensiune = "7" lungime maximă = "7" > </form>

Set de papetărie: Creioane Pixuri Conducători Caiete Radiere Butoane Articole selectate:

Exemplu:

Exemplu: Făcând clic pe un paragraf (etichetă p), modificați textul conținutului acestei etichete și centrați textul în ea

<p onclick = "this.outerHTML=" text modificat</p>"">conținut modificabil</p>

text modificat

"">conținut modificabil

În procesul de creare a unui site web sau blog și de completare în continuare a acestuia cu conținut, din diverse motive, uneori devine necesară ascunderea unei părți a textului, plasarea informațiilor mai voluminoase într-un bloc ascuns deocamdată, dar totuși indicarea utilizatorului ceea ce este disponibil altceva și oferi-i posibilitatea de a vedea conținut ascuns fără a trece la următoarea linie sau pagină.
Anterior, o grămadă de javascript au fost folosite pentru a implementa o astfel de soluție, dar acum toate acestea pot fi făcute foarte ușor folosind proprietăți uimitoare.

Astăzi ne vom uita la cel mai simplu mod crearea pe paginile site-ului și în mesajele individuale blocuri de conținut ascunse care se deschid atunci când dai clic pe un anumit element de text, folosind exclusiv proprietăți CSS3. Un comutator poate fi un singur cuvânt, o frază evidențiată, o propoziție întreagă sau o pictogramă informativă.
Astfel de blocuri sunt adesea folosite pe paginile cu o cantitate mare conținut, pentru a-l face mai structurat și mai compact, tot conținutul este împărțit în așa-numitele grupuri, în care numai titlurile sunt prezentate utilizatorului, tot textul este ascuns implicit și poate fi văzut făcând clic pe un anumit element (vezi de mai sus).

Să încercăm să facem fără apă inutilă, să privim întreg acest mecanism simplu în acțiune, cu un exemplu clar și, de asemenea, poți edita ceva dacă vrei:

Exemplul nr. 1

Ca comutatoare pentru blocurile drop-down cu Informații suplimentare se folosește text care nu este evidențiat sau marcat, cu o invitație fără echivoc de a face clic pe el, ceea ce trebuie să faci fără teamă sau îndoială pentru a vedea)))

După cum puteți vedea, totul funcționează mai mult decât perfect, conținutul ascuns apare fără probleme și dispare cu un ușor clic al mouse-ului și, în același timp, am folosit foarte puțin cod executabil, atât în ​​cadrul html, cât și în formație. a stilurilor css. Fără a conecta biblioteci javascript suplimentare, cu veșnica griji dacă sunt dezactivate din partea utilizatorului.
Implementarea tuturor acestor acțiuni a devenit posibilă datorită pseudoclasei CSS3 :verificat, aplicat elementelor de interfață, cum ar fi butoanele radio (). Ce am făcut de fapt în etichetă Am atribuit atributului tip caseta de selectare valoare , precum și identificatorul id="hd-1" corespunzător identificatorului unic for="hd-1" comutator bloc curent. Vom ascunde casetele de selectare complet și pentru totdeauna prin setarea afișajului: nicio proprietate în class.hide.
De fapt, nu este nimic special de explicat aici; întregul mecanism de activare și dezactivare a blocurilor ascunse constă din trei elemente:

• Casetă de selectare - etichetă cu sens Caseta de bifat atribut tipși cu un identificator de legătură specific
• Titlu (comutator text) - etichetă cu o valoare de identificare unică pentru atribut pentru, (identificatorul trebuie să fie același cu identificatorul etichetei intrare cu sens Caseta de bifat atribut tip).
• Blocul de conținut este o etichetă div, care va conține, până la vremuri mai bune, până când utilizatorul dă clic, diverse conținut ascuns (text, imagini etc., etc.)

Sper că din explicația mea haotică, a devenit clar care este rostul. CSS aplică stiluri noi (folosind pseudo-clasa verificat) pentru a afișa un bloc de conținut care a fost ascuns anterior numai atunci când utilizatorul face clic pe un element care este asociat cu o casetă de selectare printr-un identificator unic.

Din toate acestea rezultă notă importantă:

atunci când utilizați mai multe blocuri ascunse pe o pagină, fiecare buton radio trebuie să aibă identificator unic, care va fi diferit de identificatorii din alte blocuri.

Deci, în cuvinte, am aranjat ce merge unde și de ce, acum, să ne uităm la cadrul html al întregii structuri:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Click aici pentru a deschide! < div>Conținut ascuns...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Click aici pentru a citi mai multe! < div>Conținut ascuns...

Click aici pentru a deschide!

Click aici pentru a citi mai multe!

În continuare, trecem direct la formație Stiluri CSS, fără de care întreaga structură nu va funcționa. Minimul de cod, fără nicio decorație, a evidențiat doar puțin fundalul pentru ca blocul derulant să îl definească pentru tine și să arate cadrul textului ascuns. Puteți proiecta blocurile după cum doriți, puteți adăuga chenare, colțuri rotunjite, evidenția text sau .

1.CSS

. ascunde, . ascunde + etichetă ~ div ( afișare: niciunul; ) /* tip text etichetă */. ascunde + etichetă, . ascunde: bifat + etichetă ( umplutură: 0 ; culoare: verde; cursor: indicator; chenar- jos: 1px verde punctat; ) . ascunde: bifat + etichetă + div ( afișare: bloc; fundal: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; umplutură: 10px; )

/* ascunde casetele de selectare și blocurile de conținut */ .hide, .hide + label ~ div ( display: none; ) /* etichetă aspectul textului */ .hide + label, .hide:bifat + etichetă ( padding: 0; culoare: verde ; cursor: indicator; chenar-jos: 1px punctat verde; ) /* aspectul textului etichetei când comutatorul este activ */ .hide: bifat + etichetă (culoare: roșu; chenar-jos: 0; ) /* când caseta de selectare este activă, afișați blocurile cu conținut */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; umbră casetă: inserție 3px 3px 10px #7d8e8f; umplutură: 10px; )

Toate acestea sunt, pentru un exemplu ascetic, un minim complet suficient. Dar nu vom fi deloc noi dacă nu adăugăm măcar câteva bunătăți și este mai bine să spunem vizual utilizatorului unde să facă clic.
În cel de-al doilea exemplu, am adăugat un simbol simplu sub forma unui plus, care indică clar că altceva este ascuns aici; atunci când este apăsat, se transformă instantaneu într-un minus și am adăugat puțină animație la blocurile ascunse cu conținut atunci când ele apar, și toate acestea exclusiv cu ajutorul magiei CSS3.

2.CSS

/* ascunde casetele de selectare și blocurile de conținut */. ascunde, . ascunde + etichetă ~ div ( afișare: niciunul; ) /* tip text etichetă */. ascunde + etichetă ( marjă: 0 ; umplutură: 0 ; culoare: verde; cursor: indicator; afișare: bloc inline; ) /* aspectul textului etichetei când comutatorul este activ */. ascunde: bifat + etichetă (culoare: roșu; chenar- jos: 0 ; ) /* când caseta de selectare este activă, arată blocurile cu conținut */. ascunde: bifat + etichetă + div ( afișare: bloc; fundal: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;marja-stânga: 20px;padding: 10px; /* o mică animație când apare */- webkit- animatie: fade ease- in 0. 5s; - moz- animatie: fade ease- in 0. 5s; animație: fade ease- in 0. 5s; ) /* animație când apar blocuri ascunse */@- moz- se estompează cadrele cheie ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ) ) @- webkit- se estompează cadrele cheie ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ) ) @ cadrele cheie se estompează ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ) ) . ascunde + etichetă: înainte (culoare de fundal: #1e90ff; culoare: #fff; conținut: " \002 B"; afisare: bloc; plutește la stânga; dimensiunea fontului: 14px; greutate font: bold; înălțime: 16px; înălțimea liniei: 16px; marjă: 3px 5px; text- aliniere: centru; lățime: 16px; - webkit- bordura- raza: 50%; - moz- bordura- raza: 50%; raza-limită: 50%; ). ascunde: bifat + etichetă: înainte ( conținut: " \221 2" ; }

/* ascunde casetele de selectare și blocurile de conținut */ .hide, .hide + label ~ div ( display: none; ) /* etichetă aspectul textului */ .hide + label ( margine: 0; padding: 0; culoare: verde; cursor : pointer; afișare: inline-block; ) /* aspectul textului etichetei când comutatorul este activ */ .hide:marcat + etichetă (culoare: roșu; margine-jos: 0; ) /* când caseta de selectare este activă, afișați blocuri cu conținut */ . hide:marcat + etichetă + div ( afișare: bloc; fundal: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: insert 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* puțină animație când apare */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease -în 0,5 s; animație: fade ease-in 0,5 s; ) /* animație când apar blocuri ascunse */ @-moz-keyframes se estompează ( de la ( opacitate: 0; ) la ( opacitate: 1 ) ) @-webkit-keyframes fade ( de la ( opacitate: 0 ; ) la ( opacitate: 1 ) ) @keyframes fade ( de la ( opacitate: 0; ) la ( opacitate: 1 ) ) .hide + label:before ( culoare de fundal: #1e90ff; culoare: #fff; conținut: „\002B”; afisare: bloc; plutește la stânga; dimensiunea fontului: 14px; greutate font: bold; înălțime: 16px; înălțimea liniei: 16px; marjă: 3px 5px; text-align: centru; latime: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; raza-limită: 50%; ) .hide:bifat + label:before (conținut: „\2212”; )

Din toate punctele de vedere, metoda este, fără îndoială, bună, dar, ca întotdeauna, și deloc surprinzător, apar probleme cu veșnica frână a progresului, browserul IE, pseudo-clasa verificat acceptă numai versiunile 9 și ulterioare ale acestui browser. Pentru versiunile mai vechi de IE, totul rămâne la fel, va trebui să utilizați javascript.

Folosind casetele de selectare ascunse, puteți implementa cu ușurință blocuri stilizate, glisoare, galerii și multe altele.

Cu tot respectul, Andrew