Mikä on HTML:n optiotunniste?

Mika On Html N Optiotunniste



' ” -tunnistetta käytetään määrittämään vaihtoehto, jonka käyttäjä voi valita pudotusvalikosta tai verkkolomakkeiden valintaluetteloista. ' ” -tunnisteen avulla kehittäjät voivat luoda joukon vaihtoehtoja, joista käyttäjä voi valita minkä tahansa vaihtoehdon. Sitä käytetään erilaisissa sovelluksissa, kuten kyselyissä, verkkokauppasivustoilla, rekisteröintilomakkeissa jne.

Tämä artikkeli esittelee HTML:n optiotunnisteen sekä käytännön esimerkkejä:





Mikä on option tag ja kuinka sitä käytetään HTML:ssä?

Optiotunnistetta voidaan käyttää ' ' ja ' ”tunnisteet. ' ” -tunniste, se luo luettelon vaihtoehdoista, jotka selain voi täydentää automaattisesti. Käydään läpi muutama esimerkki, jotta ymmärrämme paremmin ' ' -tunniste ' ' ja ' 'tunnisteet:



Esimerkki 1: Pudotusvalikon luominen



' ' -tunnistetta käytetään ' ” -tunniste luodaksesi avattavan luettelon verkkosivulle. ' ” luo jokaisen vaihtoehdon/luettelokohteen avattavaan luetteloon. Jotta ymmärrämme paremmin, seuraa alla olevaa koodinpätkää:



< h2 > Ohjelmointikielet h2 >
< etiketti varten = 'prog-ase' > Valitse ohjelmointiase: etiketti >
< valitse id = 'ohjelmalistat' >
< vaihtoehto arvo = '' > Valitse vaihtoehto vaihtoehto >
< vaihtoehto arvo = 'c++' > C++ vaihtoehto >
< vaihtoehto arvo = '.netto' > Pisteverkko vaihtoehto >
< vaihtoehto arvo = 'nodejs' > Node js vaihtoehto >
valitse >

Yllä olevassa koodinpätkässä:



  • Ensinnäkin ' ' -tunnistetta käytetään tietojen näyttämiseen ja sille on määritetty ' '-tunniste käyttäen sen ' varten ”-attribuutti.
  • Sen jälkeen ' ” -tunnistetta käytetään ympäristön luomiseen avattavalle luettelolle.
  • Seuraavaksi ' ” -tunnistetta käytetään luomaan luettelokohteita, jotka sijoitetaan pudotusluettelon kohteiksi.

Kun olet määrittänyt pudotusvalikon rakenteen, käytämme nyt perustyyliä:

etiketti {
näyttö: lohko;
marginaali-ala: 5px;
}
valitse {
täyte: 5px;
reunan säde: 5px;
leveys: 200px;
}

CSS-ominaisuuksien selitys on kuvattu alla:

  • Valitse ensin ' etiketti ' -elementti ja aseta sitten arvot 'block' ja '5px' CSS-arvoksi ' näyttö ' ja ' marginaali-ala ” ominaisuuksia.
  • Seuraavaksi ' valitse ' -elementti on valittu ja tarjoaa arvot '5px', '5px' ja '200px' CSS:lle ' pehmuste ”, “ raja-säde ' ja ' leveys ”-ominaisuuksia. Näitä ominaisuuksia käytetään parantamaan käyttäjien näkyvyyttä.

Yllä olevien koodinpätkien suorittamisen jälkeen verkkosivu näyttää tältä:

Yllä oleva tulos osoittaa, että pudotusvalikko on luotu käyttämällä ' ' -tunniste ' ' -tunniste.

Esimerkki 2: Automaattisen täydennysluettelon luominen

' ' -tunnistetta käytetään ' ” -tunniste luodaksesi automaattisesti täydentävän luettelon. Sitä käytetään yhdessä ' ” -tunnisteen, joka täytetään automaattisen täydennyksen luettelossa olevilla vaihtoehdoilla. Koodi automaattisen täydennysluettelon luomiseksi HTML-koodilla näkyy alla olevassa koodinpätkässä:

< etiketti varten = 'ohjelmatyökalut' > Tai tyyppi ohjelmointityökalu: etiketti >
< syöttö tyyppi = 'teksti' id = 'ohjelmatyökalut' lista = 'työkalut' >
< tietolista id = 'työkalut' >
< vaihtoehto arvo = 'C++' >
< vaihtoehto arvo = 'Kokoonpano' >
< vaihtoehto arvo = '.Netto' >
< vaihtoehto arvo = 'PHP' >
< vaihtoehto arvo = 'Rubiini' >
< vaihtoehto arvo = 'Nopea' >
< vaihtoehto arvo = 'Solmu js' >
< vaihtoehto arvo = 'Reagoi' >
< vaihtoehto arvo = 'Mongo' >
< vaihtoehto arvo = 'Java' >
< vaihtoehto arvo = 'Python' >
tietolista >

Yllä olevassa koodinpätkässä:

  • Lisää ensin ' ' -tunniste, joka näyttää tekstin HTML-elementin mukana.
  • Käytä seuraavaksi ' ” -tunniste, jonka käyttäjä täyttää manuaalisesti tai joka voidaan täyttää automaattisesti automaattisen täydennyksen luettelossa olevilla vaihtoehdoilla.
  • Käytä sen jälkeen ' ' -tunniste ja aseta sen ' id ' attribuutin arvo on yhtä suuri kuin ' lista '-attribuutti ' ' -tunniste.
  • Käytä seuraavaksi ' ' -tunnisteen '' -tunnisteen sisällä luodaksesi kohteen automaattisesti täydennettävään luetteloon.

Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä:

Tulos näyttää, että automaattinen täydennysluettelo luodaan käyttämällä ' '-tunniste yhdistelmällä ' ' ja ' ”tunnisteet.

Johtopäätös

' ” -tunnisteen avulla kehittäjä voi luoda vaihtoehtoja vaihtoehtoluetteloon, josta käyttäjä voi valita minkä tahansa vaihtoehdon. Tätä '' -tunnistetta voidaan käyttää ' ' ja ' ”-tunnisteet sivuston suunnittelun tarpeen mukaan. Avattavan tehosteen luomiseen käytetään '' -tunnistetta '