Mi az opciócímke a HTML-ben?

Mi Az Opciocimke A Html Ben



A ' ” címke egy olyan beállítás meghatározására szolgál, amelyet a felhasználó egy legördülő menüből vagy a webes űrlapok kiválasztási listáiból választhat. A ' ” címke lehetővé teszi a fejlesztők számára, hogy olyan lehetőségeket hozzanak létre, amelyek közül a felhasználó bármelyik opciót kiválaszthatja. Különféle alkalmazásokban használják, mint például felmérések, online vásárlási oldalak, regisztrációs űrlapok stb.

Ez a cikk bemutatja az opció címkét a HTML-ben gyakorlati példákkal együtt:





Mi az opciócímke, és hogyan kell használni a HTML-ben?

Az opció címkét a „ ” és „ ” címkéket. Abban az esetben, ha a „ ” címke, létrehoz egy listát azokról a lehetőségekről, amelyeket a böngésző automatikusan kiegészíthet. Nézzünk meg néhány példát, hogy jobban megértsük a „ ' címke a ' ” és „ ” címkék:



1. példa: Legördülő lista létrehozása



A ' ' címke a ' ” címke legördülő lista létrehozásához a weboldalon. A ' ” létrehoz minden opciót/listaelemet a legördülő listában. A jobb megértés érdekében kövesse az alábbi kódrészletet:



< h2 > Programozási nyelvek h2 >
< címke számára = 'prog-fegyver' > Válasszon programozó fegyvert: címke >
< válassza ki id = 'proglisták' >
< választási lehetőség érték = '' > Válassz egy lehetőséget választási lehetőség >
< választási lehetőség érték = 'c++' > C++ választási lehetőség >
< választási lehetőség érték = '.háló' > Dot Net választási lehetőség >
< választási lehetőség érték = 'nodejs' > Node js választási lehetőség >
válassza ki >

A fenti kódrészletben:



  • Először is a „ ' címke az adatok megjelenítésére szolgál, és hozzá van rendelve a ' ' címke a ' számára ' tulajdonság.
  • Ezt követően a „ ” címke a legördülő lista környezetének létrehozására szolgál.
  • Ezután a „ ” címke a legördülő listaelemekként elhelyezendő listaelemek létrehozására szolgál.

A legördülő lista szerkezetének beállítása után alkalmazzunk néhány alapvető stílust:

címke {
kijelző: blokk;
margó-alsó: 5 képpont;
}
válassza ki {
padding: 5px;
határsugár: 5 képpont;
szélesség: 200 képpont;
}

A CSS tulajdonságainak magyarázata az alábbiakban található:

  • Először válassza ki a „ címke ” elemet, majd állítsa be a „block” és „5px” értékeit a CSS-re kijelző ” és „ margó-alsó ” tulajdonságait.
  • Ezután a „ válassza ki ' elem van kiválasztva, és az '5px', '5px' és '200px' értékeket adja meg a CSS-nek ' párnázás ”, „ határ-sugár ” és „ szélesség ” tulajdonságait, ill. Ezeket a tulajdonságokat a felhasználók láthatóságának javítására használják.

A fenti kódrészletek végrehajtása után a weboldal így néz ki:

A fenti kimenet azt mutatja, hogy a legördülő menü a „ ' címke a ' ” címke.

2. példa: Automatikus kiegészítési lista létrehozása

A ' ' címke a ' ” címkét az automatikus kiegészítési lista létrehozásához. A „ ” címke, amelyet az automatikus kiegészítési listán belül elérhető opciók töltenek ki. A HTML használatával automatikusan kitöltött lista létrehozásának kódja az alábbi kódrészletben látható:

< címke számára = 'prog-eszközök' > Vagy típus programozó eszköz: címke >
< bemenet típus = 'szöveg' id = 'prog-eszközök' lista = 'szerszámok' >
< adatlista id = 'szerszámok' >
< választási lehetőség érték = 'C++' >
< választási lehetőség érték = 'Összeszerelés' >
< választási lehetőség érték = '.Háló' >
< választási lehetőség érték = 'PHP' >
< választási lehetőség érték = 'Rubin' >
< választási lehetőség érték = 'Gyors' >
< választási lehetőség érték = 'Node js' >
< választási lehetőség érték = 'Reagál' >
< választási lehetőség érték = 'Mongó' >
< választási lehetőség érték = 'Jáva' >
< választási lehetőség érték = 'Piton' >
adatlista >

A fenti kódrészletben:

  • Először adja hozzá a „ ” címke, amely a szöveget a HTML elemmel együtt jeleníti meg.
  • Ezután használja a „ ” címke, amelyet a felhasználó tölt ki manuálisan, vagy automatikusan kitölthető az automatikus kitöltési listán belül elérhető opciókkal.
  • Ezt követően használja a „ ' címkét, és állítsa be a ' id ' attribútum értéke megegyezik a ' lista ' attribútuma a ' ” címke.
  • Ezután használja a „ ” címkét a „” címkén belül, hogy létrehozzon egy elemet az automatikus kiegészítési listához.

A fenti kódrészlet végrehajtása után a weboldal így jelenik meg:

A kimenet azt mutatja, hogy az automatikus kitöltési lista a ' ' címke a ' kombinációjával ” és „ ” címkéket.

Következtetés

A ' ” címke lehetővé teszi a fejlesztő számára, hogy opciókat hozzon létre az opciók listájához, amelyek közül a felhasználó bármelyik opciót kiválaszthatja. Ez az „” címke használható a „ ” és „ ” címkéket a weboldal kialakításának igénye szerint. A legördülő effektus létrehozásához az „