Creăm liste derulante elegante. Selectarea dintr-o listă drop-down în HTML Extinderea unei liste cu mai multe niveluri pe html hover

În acest articol, vom analiza elementele care vă permit să creați liste derulante, să învățați cum să formați grupuri în aceste liste, să vedem cum să dezactivați elemente și chiar grupuri de liste, să vă familiarizați cu un element care vă permite să creați un câmp text cu mai multe linii, pe care îl puteți utiliza ulterior în formularele HTML (element

Lista verticală

Primul articol din listă apare de obicei ca fiind selectat, dar puteți adăuga un atribut selectat articolului pentru a specifica o opțiune predefinită.

hai sa

</span> Exemplu de utilizare a unui element <select><span>

În acest exemplu etichetăm

În browser arată așa:

Gruparea elementelor de meniu

Să ne uităm la următoarea etichetă , care este utilizat pentru a grupa datele asociate într-o listă derulantă nume = "alb-negru" > etichetă = „Lista albă” >

În acest exemplu, am evidențiat 2 grupuri cu eticheta . Atributul etichetă al elementului specifică numele grupului selectat, scris cu caractere aldine:

În exemplul următor, folosind atributul boolean dezactivat, vom dezactiva un grup (" Grupa B"):

</span> Un exemplu de utilizare a atributului dezactivat al unei etichete HTML <optgroup><span>

Rezultatul exemplului nostru:

Dezactivați lista și selectarea multiplă

</span> Atributele etichetelor dezactivate și multiple <select><span>

În acest exemplu, am creat două liste derulante. Pentru prima listă, am folosit atributul disabled, care împiedică interacțiunea cu lista (o dezactivează).

Pentru a doua listă, am folosit atributul multiplu, care indică faptul că este posibil să selectați mai multe opțiuni în listă simultan (prin Ctrl pe Windows și prin Comanda pe Mac).

În browser arată așa:

Zona de text

Rezultatul exemplului nostru:

Dezactivarea zonei de text

Prin analogie cu elementele de etichetă discutate anterior are un atribut boolean dezactivat care specifică că zona de text ar trebui să fie dezactivată (nu este disponibilă pentru interacțiunea utilizatorului). Atributul poate fi folosit împreună cu scripturi, de exemplu, până când este îndeplinită o condiție, elementul este inactiv.</p> <p>Să ne uităm la un exemplu de utilizare:</p> <span><!DOCTYPE html> <html> <head> <title> </span> Atributele dezactivate și eticheta de nume <textarea><span></title> </head> <body> <form> <textarea name = "userInfo" > </span> Câmpul de text este disponibil pentru completare. <span> </span> Câmpul de text nu este disponibil pentru completare.

), pentru prima și a doua zonă setăm nume unice cu atributul name. Pentru a doua zonă de text am specificat cu atributul disabled că va fi dezactivată la încărcarea paginii.</p> <p>În plus, am plasat un buton în interiorul formularului care servește la trimiterea formularului (element <input>cu butonul tastați „submit form”: tip = „submit” ).</p> <p>Rezultatul exemplului nostru:</p> <h2>Indicator pentru zona de text</h2> <p>Și așa ne vom uita la exemplul final și vom trece la sarcina practică a articolului din acest manual.</p> <p>Datorită atributului (eticheta HTML <textarea>) este permisă specificarea textului sfaturii explicative care descrie valoarea așteptată pentru introducerea utilizatorului în element.</p> <p>Textul indicativ este ascuns atunci când utilizatorul introduce o valoare (orice caracter) în câmpul de text; dacă este eliminat, balonul va fi afișat din nou.</p> <p>Să ne uităm la un exemplu de utilizare:</p> <span><!DOCTYPE html> <html> <head> <title> </span> Substituent și atribute de etichetă numai în citire <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>„Introduceți informații în câmpul de text”</span>> „Câmpul este doar pentru citire”</span> numai citire >
tip = "submit" name = "submitInfo" value = "submit" > !}

În acest exemplu, am creat două zone de text (elementul ), pentru prima și a doua zonă am setat atributul la un indiciu pentru utilizator, care este afișat în culoarea textului pal în interiorul elementului. Pentru a doua zonă de text, am specificat cu atributul readonly că va fi doar citire (conținutul nu poate fi modificat).</p> <p>Rețineți că, dacă un câmp de text este doar pentru citire, conținutul nu poate fi modificat, dar utilizatorul poate naviga, selecta și copia conținutul.</p> <p>În plus, am plasat un buton în interiorul formularului care servește la trimiterea formularului (element <input>cu butonul tastați „submit form”: tip = „submit” ).</p> <p>Rezultatul exemplului nostru:</p> <h2>Întrebări și sarcini pe această temă</h2> <p>Înainte de a trece la următorul subiect, finalizați sarcina de practică:</p> <ul><li>Folosind cunoștințele pe care le-ați dobândit, creați următorul formular de postare de locuri de muncă:</li> </ul><p>Înainte de a începe sarcina, deschideți exemplul într-o fereastră nouă și examinați cu atenție formularul pentru a repeta toate punctele sale. Pentru a finaliza sarcina veți avea nevoie de cunoștințele din articol. Dacă l-ai ratat, revino să-l studiezi.</p> <p>După ce finalizați exercițiul, inspectați codul paginii deschizând exemplul într-o fereastră separată pentru a vă asigura că ați făcut totul corect.</p> <p>Bună ziua, dragi cititori ai blogului. Ca parte a studiului nostru asupra complexităților, ca sarcină următoare, vom continua să analizăm detaliile creării formularelor pe site folosind cele adecvate.</p> <p>Astăzi vom vedea cum să creăm <b>liste derulante (derulante).</b>, inclusiv alegere multiplă, folosind select și opțiune, cum să construiți <b>câmp de text</b> prin textarea și, de asemenea, vorbim despre posibilitatea extinderii funcționalității formularelor prin utilizarea etichetelor <b>set de câmpuri, etichetă și legendă</b>.</p> <p>Permiteți-mi să vă reamintesc că orice formular prezent pe pagină este creat folosind și are scopul de a introduce orice informație de la utilizator și de a o trimite către server (exemplu - ).</p> <p>Din păcate, instrumentele limbajului de marcare hipertext nu ne permit să procesăm direct aceste informații, așa că folosind HTML creăm doar aspectul formularului, iar datele necesare sunt trimise pentru prelucrare. În acest scop, pe serverul web este creat în mod intenționat un fișier special, scris într-una dintre limbile serverului (cel mai adesea, PHP). Să presupunem că, pentru feedback, puteți crea un fișier mail.php, care va fi handler.</p> <p>Când utilizați în practică informațiile obținute în această publicație, nu uitați cum ar trebui să arate, unde codurile tuturor elementelor vizibile ale paginii, inclusiv formularele, sunt întotdeauna situate în eticheta body.</p> <p>Aceste informații sunt extrem de necesare, deoarece, chiar dacă utilizați toate instrumentele moderne de dezvoltare integrate în ele (să vă reamintesc, primul semn în implementarea acestei funcționalități a fost), trebuie să înțelegeți clar mecanismul de utilizare a etichetelor principale, atunci editarea codului HTML, a cărui nevoie apare din când în când, se va transforma într-o activitate plăcută.</p> <p>2. <b>Multiplu</b>— acest atribut, care nu are parametri, permite selecția multiplă, spre deosebire de exemplul de mai sus, unde puteți selecta un singur element (linie). Încercați să selectați mai multe linii din această listă cu mouse-ul deodată (una câte una în orice loc, ținând apăsată tasta Ctrl sau folosind Shift, urmând una după alta):</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>3. <b>mărimea</b>— setează înălțimea listei derulante, adică numărul de linii afișate. Dacă atributul multiplu este prezent și valoarea mărimii nu este specificată (ca în exemplul de mai sus), atunci <i>implicit sunt afișate patru linii</i>și, de exemplu, cu size="5" cinci vor fi vizibile:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" size="5" multiple> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>4. <b>Necesar</b>(nu are parametri) - definește că trebuie făcută o selecție înainte de a trimite date către procesor. Dacă un element din listă nu este selectat, atunci datele formularului nu vor fi trimise:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" required> <option></option> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>5. <b>Focalizare automată</b>(nu contează) - setează focusul pe listă imediat după încărcarea paginii. În plus, dacă utilizatorul este obișnuit să efectueze majoritatea acțiunilor folosind taste, atunci o astfel de focalizare pre-configurată va ajuta la efectuarea selecțiilor din listă folosind săgețile de pe tastatură fără nicio utilizare a mouse-ului:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" autofocus> <option>Selectați din listă</option> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2018/10/2018-10-25_093419.png' height="146" width="205" loading=lazy loading=lazy></p> </td> </tr></tbody></table><p>6. <b>Dezactivat</b>(fără parametri) - blochează accesul la listă (o dezactivează). În practică, este de obicei folosit împreună cu scripturi în cazurile în care trebuie să activați o listă derulantă numai atunci când sunt îndeplinite anumite condiții:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" disabled> <option>Selectați din listă</option> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>7. <b>Formă</b>— comunică lista cu una sau mai multe forme cărora le aparține, dar se află în afara containerului <form></form>. În acest caz, parametrul este scris ca valoare a atributului formular <i>id-ul atributului global</i> care se adaugă la eticheta formularului:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" id="data"></form> <p><select name="list1" form="data"> <option>Selectați din listă</option> <option>Opțiune</option> <option>Textarea</option> <option>Eticheta</option> <option>Fieldset</option> <option>Legendă</option> </select></p> <p><input type="submit" value="Trimite" form="data"></p> </td> <td class="tab" width="35%"> <p>Selectați Opțiune Textarea Label Fieldset Legend din listă</p> <p><input type="submit"></p> </td> </tr></tbody></table><p>Nu confundați atributul select tag cu eticheta principală a formularului. În exemplul de mai sus, atributul id="data" a fost adăugat la eticheta de formular, iar form="data" a fost adăugat la eticheta select, ceea ce a făcut posibilă asocierea listei derulante cu un anumit formular.</p> <h3>Atribute etichete de opțiune</h3> <p>1. <b>Valoare</b>— definește valoarea din lista derulantă care va fi trimisă către server (procesor de formulare). De fapt, handler-ului i se trimite un nume, care este specificat de atributul name al etichetei select și <b>valoarea valorii</b>(pentru acest exemplu - 1, 2, 3, 4, 5), corespunzător liniei selectate din lista derulantă:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <option>Selectați din listă</option> <option value="1">Opțiune</option> <option value="2">Textarea</option> <option value="3">Eticheta</option> <option value="4">Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>2. <b>Dezactivat</b>— blochează selecția unui element din lista verticală.</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <option value="1" disabled>Opțiune</option> <option value="2">Textarea</option> <option value="3">Eticheta</option> <option value="4">Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>După cum puteți vedea din exemplu, linia „Opțiune” este inactivă și nu poate fi selectată.</p> <p>3. <b>Eticheta</b>— afișează conținutul textului (care este valoarea acestuia) al unui anumit element de listă. Dacă eticheta este prezentă, atunci o linie identică cu valoarea acestui atribut este tipărită și conținutul textului din interiorul etichetei opțiunii este ignorat. Același lucru se întâmplă dacă conținutul dintre <option>Și</option> total absent.</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <p><option value="1" label="Тег Option"></option> <option value="2" label="Textarea">Tag Textarea</option> <option value="3">Etichetă Etichetă</option> <option value="4">Tag Fieldset</option> <option value="5">Legenda etichetei</option></p> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Tag Textarea Tag Label Tag Fieldset Legenda etichetei</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>Uite. În exemplul de mai sus, prima linie pentru opțiune din cod este goală (în partea stângă a tabelului), dar parametrul label="Option Tag" este scris, ca urmare, acest text special apare în listă (pe partea dreapta). A doua linie de cod conține textul „Textarea Tag” ca conținut al etichetei opțiunii, dar meniul drop-down din dreapta arată cuvântul „Textarea” pentru a se potrivi cu valoarea label="Textarea".</p> <p>4. <b>Selectat</b>— selectează elementul curent din lista verticală:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <option value="1">Opțiune</option> <option value="2">Textarea</option> <option value="3">Eticheta</option> <option value="4" selected>Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>Dacă atributul multiplu este prezent, atunci este posibil să selectați mai mult de un element:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <option value="1">Opțiune</option> <option selected value="2">Textarea</option> <option value="3">Eticheta</option> <option selected value="4">Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><h3>Atributele etichetei optgroup</h3> <p>Dacă lista derulantă trebuie sortată cumva, de exemplu, împărțită în grupuri, atunci pentru fiecare dintre aceste grupuri se folosește un container, constând din etichetele optgroup de deschidere și de închidere, care conține o parte din elementele listei derulante. Cu toate acestea, există două atribute pentru configurarea unei astfel de liste derulante.</p> <p>1. <b>Eticheta</b>— setează numele fiecărui grup ca parametru:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <optgroup label="group1"> <option value="1">Opțiune</option> <option value="2">Textarea</option> </optgroup> <optgroup label="group2"> <option value="3">Eticheta</option> <option value="4">Fieldset</option> <option value="5">Legendă</option> </optgroup> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>Același lucru, dar cu multiple și size="7" ale etichetei select:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="7"> <optgroup label="group1"> <option value="1">Opțiune</option> <option value="2">Textarea</option> </optgroup> <optgroup label="group2"> <option value="3">Eticheta</option> <option value="4">Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>2. <b>Dezactivat</b>(fără valori) - blochează selecția elementelor grupului în raport cu care este instalat, iar elementele inactive sunt de obicei evidențiate cu gri:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="7"> <optgroup label="group1"> <option value="1">Opțiune</option> <option value="2">Textarea</option> </optgroup> <optgroup label="group2" disabled> <option value="3">Eticheta</option> <option value="4">Fieldset</option> <option value="5">Legendă</option> </select></p> <p><input type="submit" value="Trimite"></p> </form> </td> <td class="tab" width="35%"> <p>Opțiune Textarea Label Fieldset Legend</p> <p><input type="submit" value="Trimite"></p> </td> </tr></tbody></table><p>Un scurt videoclip vă va fi util aici:</p> <p><span class="m2sgO7Lgf8I"></span></p> <h2>Câmp text într-un formular folosind textarea</h2> <p>Un alt element de formular pentru site pe care îl vom lua în considerare este un câmp cu posibilitatea de a introduce text cu mai multe rânduri în el. Poate fi creat folosind eticheta textarea. Fără atributele implicite, aplicarea acestei etichete va produce următorul rezultat:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><b>Introdu text:</b></p> <p><textarea>

Introdu text:

Puteți efectua întreruperi de linie în câmp, iar textul va fi transmis procesorului de pe server, ținând cont de modificările efectuate. Câmpul poate fi întins în lățime și lungime făcând clic pe colțul din dreapta jos, care este marcat cu două dungi diagonale.

Să încercăm acum să adăugăm mai multe atribute cu parametri la codul original:

1. Nume- definește numele zonei de text ca valoare pentru a o identifica după trimiterea datelor din formular atunci când este procesată pe server.

2. col— lățimea câmpului, care este specificată ca parametru prin numărul de caractere identice adiacente plasate orizontal. Valoarea implicită este 20.

3. Rânduri— înălțimea câmpului de text, determinată de numărul de linii. Dacă numărul de linii de text introduse de utilizator este mai mare decât valoarea specificată de acest atribut, în dreapta va apărea o bară de defilare verticală.

4. Lungime maxima— specifică numărul maxim de caractere care pot fi plasate în câmpul de text. Dacă limita este depășită, introducerea suplimentară nu va fi posibilă.

Mai jos este un exemplu cu toate atributele de mai sus, efectul fiecăruia dintre ele îl puteți verifica prin simpla plasare a numărului necesar de litere și linii în zona de text (puteți introduce pur și simplu același caracter de mai multe ori):

Introdu text:

5. Minlength— specifică numărul minim de caractere care trebuie introduse în zona de text. Dacă utilizatorul încearcă să trimită un text cu mai puține caractere, browserul va afișa un mesaj scurt cu informații care vor conține mențiunea necesității de a completa conținutul formularului și câte caractere au fost deja introduse.

7. Numai citire(fără parametri) - dacă atașați acest atribut textarea, câmpul de text nu va fi editabil de către utilizatori și va fi doar pentru citire. Dar vă puteți concentra asupra acestuia (mutați cursorul în câmp și faceți clic stânga), precum și selectați și copiați (parțial sau complet) textul:

Încă câteva atribute care implementează funcționalități suplimentare la completarea câmpurilor:

8. Completare automată— specifică dacă browserul trebuie să ofere indicii atunci când utilizatorul completează un formular bazat pe datele introduse anterior și oferă posibilitatea de a insera automat textul corespunzător.

Are doar doi parametri: pe(activat) și oprit(inchis). Iată un exemplu de cod:

Acest atribut cu valoarea „pornit” funcționează numai atunci când completarea automată a câmpurilor de formular este activată în browserul web al unui anumit utilizator.

9. Înfășurați- setează regulile browserului pentru întreruperile de rând în zona de text folosind trei valori:

Moale— un set de caractere care nu se încadrează în câmp în lățime este transferat automat pe o nouă linie. În acest caz, procesorul textul va fi trimis pe o singură linie. Dacă utilizatorul transferă text în orice loc dorit folosind tasta „Enter”, atunci un astfel de transfer este salvat la trimiterea formularului web.

Introdu text:

Greu— cratimele se fac automat dacă textul nu se încadrează în câmpul în lățime, iar atunci când sunt trimise la procesor, locurile acestor cratime vor fi salvate. Această opțiune este utilizată numai în în legătură cu atributul cols:

Introdu text:

Off— dezactivați întreruperile de linie. Dacă imprimați un fragment de text fără transfer mecanic folosind tasta „Enter”, atunci întregul text va fi plasat pe o singură linie și va apărea o bară de defilare orizontală:

Introdu text:

10. Focalizare automată(nu are parametri) - inițiază focalizarea pe câmpul de text la încărcarea paginii cu formularul.

11. Dezactivat- spre deosebire de atributul readonly (care interzice și editarea conținutului câmpului, dar face posibilă concentrarea asupra acestuia), blochează complet accesul la zona de text, care este de obicei colorată în gri:

Adesea, începătorii se confruntă cu problema creării unei liste derulante. Exact ca cu originalul Selectați nu poți face nimic special. Apoi vine la salvare jQuery, și apoi poți face aproape orice.

Dacă ți-aș spune că este posibil și unul standard? HTML Nu este rău să creați o listă derulantă într-un mod curat CSS?

Lista derulantă în HTML

Culoarea fundalului și a textului pot fi modificate, iar acest lucru se face foarte simplu.

ÎN span am adăugat 2 clase, una principală, care va conține toate stilurile principale” dropdown personalizat„, iar al doilea este mare, ceea ce va determina dimensiunea lista verticală. Putem pregăti să zicem 3 mărimi în avans, mare, mediu, mic, stabilite în stiluri marimea fontului. Și nu te deranja pe viitor. Puteți sări peste acest lucru, totul depinde de designul dvs. de pe site.

Corp ( fundal: #2a2a2b; culoare: #fff; text-align: center; font-family: Arial, Helvetica; ) .big ( font-size: 1.2em; ) /* Meniu derulant personalizat */ .Custom-dropdown ( poziție : relativ; afișare: bloc inline; aliniere verticală: mijloc; margine: 10px; /* numai demo */ ) .selectare dropdown personalizat (cursor:pointer; culoare de fundal: #2980b9; culoare: #fff; font- dimensiune: moștenire; umplutură: .5em; padding-dreapta: 2.5em; chenar: 0; margine: 0; chenar-rază: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: buton ; /* ascunde săgeata implicită în Chrome OSX */ ) .custom-dropdown::before, .custom-dropdown::after (conținut: ""; poziție: absolut; pointer-evenimente: niciunul; ) .custom-dropdown:: după ( /* Săgeată derulantă personalizată */ conținut: „\25BC”; înălțime: 1em; dimensiunea fontului: .625em; înălțimea liniei: 1; dreapta: 1.2em; sus: 50%; margine-sus: -.5em ; ) .custom-dropdown::before ( /* Copertă personalizată pentru săgeată dropdown */ lățime: 2em; dreapta: 0; sus: 0; jos: 0; border-radius: 0 3px 3px 0; ) .custom-dropdown select ( culoare: rgba(0,0,0,.3); ) .custom-dropdown select::after (culoare: rgba(0,0,0,.1); ) .custom-dropdown::before (culoare de fundal: rgba(0,0,0,.15); ) .custom-dropdown::after ( culoare: rgba(0,0,0,.4); )

Dacă nu doriți să vă deranjați și să studiați stilurile, adăugați-l pe site-ul dvs. și schimbați culoarea pentru a se potrivi cu designul site-ului dvs. Atunci ești la stil” .Selectare derulant personalizat” trebuie să modificați valorile culoare de fundalȘi culoare

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:

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ă derulantă în HTML folosind atributele specificate:

Listă derulantă folosind HTML - Nubex

Atributele etichetei OPTION

Etichetă opțiune, după cum s-a menționat deja, vă permite să definiți copii din lista derulantă Selectați, care, la rândul său, joacă rolul unui container. Etichetă opțiune are propriile sale atribute:

dezactivat- stabilește o interdicție privind selectarea unui anumit element de 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:

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:

O casetă combinată, numită și meniu derulant, este unul dintre elementele de formular flexibile și convenabile. În funcție de setări, puteți selecta una sau mai multe valori din listă. Avantajul unei liste este compactitatea și versatilitatea acesteia; lista poate ocupa una sau mai multe linii și puteți selecta una sau mai multe valori din ea. Caseta combinată este creată după cum urmează.

Etichetă , care stabilește înălțimea listei; lățimea listei este determinată automat în funcție de lungimea textului din interior

Atributele etichetei , cu care puteți modifica prezentarea listei.

multiplu

Prezența multiplelor spune browserului să afișeze conținutul elementului

Nume

Definește un nume unic de element este adăugat atributul multiplu, apoi puteți selecta mai mult de un articol.

valoare

Definește valoarea elementului din listă care va fi trimisă serverului. O pereche „nume/valoare” este trimisă la server, unde numele este specificat de atributul nume al etichetei

Gruparea articolelor din listă

Dacă lista este destul de extinsă, este logic să grupați elementele sale în blocuri pentru a vă asigura că lista este vizuală și ușor de lucrat. Eticheta este folosită în acest scop . Este un container în interiorul căruia sunt amplasate etichetele este că nu este evidențiat ca un element de listă obișnuit, este evidențiat folosind stilul aldine, iar toate elementele incluse în acest container sunt deplasate la dreapta poziției lor inițiale. Pentru a adăuga un titlu de grup, utilizați atributul etichetă, așa cum se arată în Exemplul 3.

Exemplul 3: Gruparea articolelor din listă

HTML5 IE Cr Op Sa Fx

Listă

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Lista grupată

Creăm liste derulante elegante. Selectarea dintr-o listă drop-down în HTML Extinderea unei liste cu mai multe niveluri pe html hover

Lista verticală

Gruparea elementelor de meniu

Dezactivați lista și selectarea multiplă

Zona de text

Dezactivarea zonei de text

Lista derulantă în HTML

SELECTAȚI atributele etichetei

Atributele etichetei OPTION

Atributele etichetei Să ne uităm la atributele etichetei , cu care puteți modifica prezentarea listei.

multiplu

Nume

valoare

Gruparea articolelor din listă

Atributele etichetei , cu care puteți modifica prezentarea listei.