Care este eticheta de opțiune în HTML?

Care Este Eticheta De Optiune In Html



” eticheta este utilizată pentru a defini o opțiune pe care un utilizator o poate alege dintr-un meniu vertical sau din listele de selecție din formularele web. „ Eticheta ” permite dezvoltatorilor să creeze un set de opțiuni din care utilizatorul poate alege orice opțiune. Este utilizat în diverse aplicații, cum ar fi sondaje, site-uri de cumpărături online, formulare de înregistrare etc.

Acest articol demonstrează eticheta opțiune în HTML împreună cu exemple practice:







Ce este eticheta de opțiune și cum se utilizează în HTML?

Eticheta de opțiune poate fi utilizată cu „ ' și ' ' Etichete. În cazul „ ”, creează o listă de opțiuni care pot fi completate automat de către un browser. Să trecem prin câteva exemple pentru o mai bună înțelegere a relației dintre „ eticheta cu „ ' și ' ' Etichete:



Exemplul 1: Crearea unei liste derulante



Eticheta ” este utilizată cu „ ” pentru a crea o listă derulantă pe pagina web. „ ” creează fiecare opțiune/element din listă din lista verticală. Pentru o mai bună înțelegere, permiteți-ne să urmărim fragmentul de cod de mai jos:





< 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 „ eticheta cu „ ' etichetă.

Exemplul 2: Crearea listei de completare automată

Eticheta ” este utilizată cu „ ” pentru a crea o listă de completare automată. Este folosit împreună cu „ ” etichetă care este completată de opțiunile disponibile în lista de completare automată. Codul pentru crearea unei liste de completare automată folosind HTML este afișat în fragmentul de cod de mai jos:

< eticheta pentru = 'prog-tools' > Sau tip un instrument de programare: eticheta >
< 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 „” pentru a crea un articol pentru lista de completare automată.

După executarea fragmentului de cod de mai sus, pagina web apare astfel:

Ieșirea arată că lista de completare automată este creată prin utilizarea „ „etichetă cu combinația de „ ' și ' ' Etichete.

Concluzie

” eticheta permite dezvoltatorului să creeze opțiuni pentru lista de opțiuni, din care utilizatorul poate alege orice opțiune. Această etichetă „” poate fi utilizată cu „ ' și ' ” etichete în funcție de necesitatea designului site-ului. Pentru crearea unui efect derulant, eticheta „” este utilizată cu eticheta „ ' etichetă. Acest articol demonstrează care este eticheta opțiune în HTML.