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.

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.

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.

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.