În acest ghid vei afla cum poți crea liste selectabile, cunoscute și sub numele de dropdown-uri, în HTML folosind elementul select. Această combinație de elemente este esențială pentru interacțiunea utilizatorilor în formularele web, deoarece le permite utilizatorilor să aleagă din opțiuni predefinite. Vom discuta atât selecția multiplă cât și liste simple, precum și opțiunile de stilizare disponibile.
Cele mai importante constatări
- Elementul select este folosit împreună cu tag-ul option pentru a oferi opțiuni de selecție.
- Stilizarea câmpurilor de selecție este limitată și poate varia în funcție de browser.
- Dacă dorești mai mult control asupra stilizării, ar trebui să iei în considerare utilizarea altor tehnologii precum JavaScript sau framework-uri.
Ghid Pas cu Pas
Pentru a crea un meniu dropdown simplu, începe cu elementul select. Aici definești câmpul de introducere prin care utilizatorii își pot face selecția.
Elementul select necesită un atribut name, pentru a putea identifica opțiunea selectată la trimiterea formularului. Aici setăm numele la "favorite_fruits" pentru a înregistra fructele preferate.
În interiorul elementului select adăugi mai multe tag-uri option care reprezintă opțiunile individuale de selecție. Fiecare dintre aceste tag-uri are atât un text vizibil cât și o valoare subiacentă care va fi utilizată la trimiterea formularului.
Pentru a crea un meniu dropdown, poți seta atributul size la 1, ceea ce înseamnă că doar un element este afișat în același timp. Acest lucru asigură că se comportă ca un dropdown clasic.
Un alt atribut important pentru select este multiple. Dacă adaugi acest atribut, utilizatorii pot selecta mai multe opțiuni simultan, similar cu casetele de bifare. Utilizatorii pot folosi tasta de control (sau tasta Command pe Mac-uri) pentru a selecta mai multe elemente.
Când faci selecțiile și trimiți formularul, valoarea opțiunilor selectate este trimisă la server. În timp ce datele se transmit ca un array, este important ca atunci când folosești multiple, fiecare valoare selectată să fie găsită în array-ul trimis.
Elementul option poate conține doar text simplu. Cod HTML precum imagini sau linkuri nu sunt acceptate în interiorul opțiunilor. Cu toate acestea, poți ajusta aspectul cu CSS, cum ar fi fontul sau culoarea de fundal.
Modificările stilistice, cum ar fi fontul și culoarea, pot fi făcute cu ajutorul atributului style al opțiunilor. Aceasta este mai ușor de implementat într-o listă care arată normal, deoarece ai mai mult control asupra aspectului.
În funcție de browser, aspectul elementelor select poate fi diferit. Unele browsere pot, de exemplu, afișa culoarea de fundal și textul dropdown-ului în mod diferit. Este important să ai acest lucru în vedere atunci când proiectezi formularul.
Dacă iei în considerare adăugarea imaginilor drept opțiuni de selecție, acest lucru devine puțin complicat cu ajutorul select. Ar fi recomandabil să folosești JavaScript sau biblioteci UI externe pentru asta, deoarece nu poți îngloba elemente HTML tradiționale în tag-uri option.
Pentru a implementa un element UI mai complex, pentru care ai nevoie de o stilizare flexibilă, poate fi mai inteligent să creezi propriul tău meniu dropdown sau listă sau să folosești un framework existent.
Pe scurt, elementul select oferă o modalitate excelentă de a alege simplu dintr-o listă sau de a permite selecții multiple. Este însă important să ții cont de complexitatea opțiunilor de stilizare și de diferențele dintre browsere pentru a nu afecta experiența utilizatorilor.
Rezumat - Ghid pentru crearea de formulare web cu liste selectabile
În acest ghid ai învățat cum să creezi liste selectabile în HTML cu elementul select. Accentul s-a pus pe utilizarea practică a câmpurilor de selecție, opțiunile de selectare multiplă și opțiunile de stilizare fundamentale.
