Cum se face o listă drop-down în HTML

Cea mai simplă listă drop-down în HTML este ușor de creat folosind eticheta selectare. Aceasta este o etichetă de container, etichetele de opțiune sunt încorporate în ea - ele specifică elementele listate.

Există mai multe variante de liste care pot fi făcute utilizând lista derulantă selectare etichetă: (variantele abandonează după ce au făcut clic pe câmpul principal sau indică cursorul pe acesta) și o listă cu mai multe opțiuni - în care utilizatorul poate selecta mai multe elemente. Primele sunt mai frecvente, ele reprezintă un element important al navigării pe site-urile moderne. O listă derulantă cu mai multe selecții poate fi aplicată, de exemplu, în directoare în care trebuie selectate mai multe caracteristici ale produsului.lista drop-down

Puteți modifica aspectul și proprietățile listelor utilizând atribute universale și speciale.

Atributele etichetei selectate

1. Multiplă - stabilește alegerea multiplă.

2. Dimensiunea - specifică numărul de linii vizibile în listă, care este înălțimea. Și apoi totul depinde, atributul multiplu este prezent sau nu. Dacă da, și nu specificați pat, apoi în prezența utilizatorului multiple se va vedea toate opțiunile, dar dacă mai multe lipsește, este dovedit a fi doar o singură linie, iar celălalt utilizator va fi capabil să citească, când să faceți clic pe icoana liftului de pe partea dreaptă. În cazul în care înălțimea de dimensiunea specificată, și este mai mic decât numărul de opțiuni de pe scroll dreapta apare bar.

3. Numele este numele. O listă drop-down se poate face fără ea, dar poate fi necesar să interacționezi cu un handler de pe server. Ca o regulă, numele indică încă.



Eticheta selectare nu are atribute obligatorii, spre deosebire de eticheta opțiunii.

html listă derulantă

Atribute ale etichetei de opțiune imbricate

  1. Selectat - este pentru evidențierea unui element de listă. Utilizatorul poate selecta mai mult de un element dacă este specificat atributul multiplu (vezi mai sus).
  2. Valoarea este valoarea. Acest atribut este necesar. Serverul web trebuie să înțeleagă elementele pe care le-a selectat utilizatorul.
  3. Casa de discuri. Cu acest atribut, puteți scurta elementele listate prea lungi. De exemplu, ecranul va afișa "Milan", în locul opțiunii "Milano - centrul administrativ al Lombardiei" specificată în etichetă. Nordul Italiei ". Acest atribut este, de asemenea, utilizat pentru gruparea elementelor din listă.

În ceea ce privește lățimea listei, aceasta este setată implicit în funcție de lungimea celui mai larg text din listă. Desigur, lățimea poate fi modificată utilizând stiluri HTML.

Listă derulantă în alte moduri

Se poate face folosind CSS, de exemplu, lista va apărea când plasați cursorul pe un element de pagină. Oportunități excelente de a crea liste este oferită de jаvascript, a cărui lucrare este simplificată de către biblioteca Jquery. O listă drop-down conectată utilizând această bibliotecă poate fi foarte complexă, de exemplu cascadă. Asta înseamnă că, atunci când selectați un element dintr-o listă, apare următoarea listă, de exemplu, există un element de meniu "Îmbrăcăminte pentru femei" tipuri de îmbrăcăminte), atunci atunci când alegeți unul dintre tipurile, de exemplu "Outerwear", este lăsată o listă cu elemente: jachete, parcuri, paltoane, haine scurte, blănuri etc.

jquery drop-down list

Am enumerat superficial principalele căi prin care puteți crea o listă drop-down. Desigur, există o mulțime de nuanțe în HTML, în CSS și în jаvascript, care vă permit să modificați funcționalitatea și aspectul listelor.

Distribuiți pe rețelele sociale:

înrudit
Subtotal în ExcelSubtotal în Excel
Ce este tipul de intrare HTML?Ce este tipul de intrare HTML?
Cum se creează o listă HTML? Este foarte simplu!Cum se creează o listă HTML? Este foarte simplu!
Formular HTML - descriere și aplicareFormular HTML - descriere și aplicare
Ca și în "Excel" faceți o listă derulantă (instrucțiuni pas cu pas)Ca și în "Excel" faceți o listă derulantă (instrucțiuni pas cu pas)
Cum se face o listă în listă. Manual HTML pentru începătoriCum se face o listă în listă. Manual HTML pentru începători
Ca și în alfabetul de sortare al cuvântului WordCa și în alfabetul de sortare al cuvântului Word
Comenzi HTML pentru crearea site-urilor WebComenzi HTML pentru crearea site-urilor Web
O listă cu HTML și cu numere de codO listă cu HTML și cu numere de cod
Cum se fac listele drop-down în Excel: cele mai simple metodeCum se fac listele drop-down în Excel: cele mai simple metode
» » Cum se face o listă drop-down în HTML