„
Acest articol demonstrează eticheta opțiune în HTML împreună cu exemple practice:
- Ce este eticheta de opțiune și cum se utilizează în HTML?
- Crearea unei liste derulante
- Crearea listei de completare automată
Ce este eticheta de opțiune și cum se utilizează în HTML?
Eticheta de opțiune poate fi utilizată cu „
Exemplul 1: Crearea unei liste derulante
„
< h2 > Limbaje de programare h2 >
< eticheta pentru = 'prog-arma' > Selectați o armă de programare: eticheta >
< Selectați id = 'liste de programe' >
< opțiune valoare = '' > Selecteaza o optiune opțiune >
< opțiune valoare = 'c++' > C++ opțiune >
< opțiune valoare = '.net' > Dot Net opțiune >
< opțiune valoare = 'nodejs' > Nodul js opțiune >
Selectați >
În fragmentul de cod de mai sus:
- În primul rând, „
Eticheta ” este utilizată pentru a afișa datele și este atribuită cu ” „ eticheta folosind „ pentru ” atribut. - După aceea, „
” eticheta este folosită pentru a crea un mediu pentru lista drop-down. - În continuare, „
” eticheta este utilizată pentru a crea elemente din listă care să fie plasate ca elemente din listă derulantă.
După ce am configurat structura listei derulante, acum să aplicăm câteva stiluri de bază:
eticheta {afisare: bloc;
margine-jos: 5px;
}
Selectați {
umplutură: 5px;
chenar-rază: 5px;
latime: 200px;
}
Explicația proprietăților CSS este descrisă mai jos:
- Mai întâi, selectați „ eticheta ” și apoi setați valorile „block” și „5px” la CSS „ afişa ' și ' margine-fond ” proprietăți.
- În continuare, „ Selectați ” este selectat și furnizează valorile „5px”, „5px” și „200px” CSS „ umplutura ”, “ hotar-raza ' și ' lăţime ” proprietăți, respectiv. Aceste proprietăți sunt utilizate pentru a îmbunătăți vizibilitatea utilizatorului.
După executarea fragmentelor de cod de mai sus, pagina web arată astfel:
Rezultatul de mai sus arată că meniul derulant a fost creat folosind „
Exemplul 2: Crearea listei de completare automată
„
< intrare tip = 'text' id = 'prog-tools' listă = 'unelte' >
< lista de date id = 'unelte' >
< opțiune valoare = „C++” >
< opțiune valoare = 'Asamblare' >
< opțiune valoare = '.Net' >
< opțiune valoare = 'PHP' >
< opțiune valoare = 'Rubin' >
< opțiune valoare = 'Rapid' >
< opțiune valoare = „Node js” >
< opțiune valoare = 'Reacţiona' >
< opțiune valoare = 'Mongo' >
< opțiune valoare = 'Java' >
< opțiune valoare = 'Piton' >
lista de date >
În fragmentul de cod de mai sus:
- Mai întâi, adăugați „
” etichetă care afișează textul împreună cu elementul HTML. - Apoi, utilizați „ ” etichetă care este completată de utilizator manual sau poate fi completată automat cu opțiunile disponibile în lista de completare automată.
- După aceea, utilizați „ ” etichetați și setați-i „ id „valoare a atributului egală cu valoarea „ listă ' atributul ' ' etichetă.
- Apoi, utilizați „
” din interiorul etichetei „
După executarea fragmentului de cod de mai sus, pagina web apare astfel:
Ieșirea arată că lista de completare automată este creată prin utilizarea „
Concluzie
„