Wat is de optietag in HTML?

Wat Is De Optietag In Html



De ' ” tag wordt gebruikt om een ​​optie te definiëren die een gebruiker kan kiezen uit een vervolgkeuzemenu of uit de keuzelijsten in webformulieren. De ' ” Met de tag kunnen ontwikkelaars een reeks opties maken waaruit de gebruiker elke optie kan kiezen. Het wordt gebruikt in verschillende toepassingen zoals enquêtes, online winkelsites, registratieformulieren, enz.

Dit artikel demonstreert de optie-tag in HTML, samen met praktische voorbeelden:





Wat is de optietag en hoe deze in HTML te gebruiken?

De optie-tag kan worden gebruikt met de ' ' En ' 'labels. In het geval van de “ '-tag, het creëert een lijst met opties die automatisch kunnen worden aangevuld door een browser. Laten we een paar voorbeelden doornemen voor een beter begrip van de relatie tussen de “ ” label met de “ ' En ' ”Tags:



Voorbeeld 1: Aanmaken van een vervolgkeuzelijst



De ' ” tag wordt gebruikt met de “ ”-tag om een ​​vervolgkeuzelijst op de webpagina te maken. De ' ” maakt elke optie/lijstitem in de vervolgkeuzelijst aan. Laten we voor een beter begrip het onderstaande codefragment volgen:



< h2 > Programmeertalen h2 >
< etiket voor = 'prog-wapen' > Selecteer een programmeerwapen: etiket >
< selecteren ID kaart = 'prog-lijsten' >
< keuze waarde = '' > Kies een optie keuze >
< keuze waarde = 'c++' > C++ keuze >
< keuze waarde = '.netto' > Punt net keuze >
< keuze waarde = 'nodejs' > Knooppunt js keuze >
selecteren >

In het bovenstaande codefragment:



  • Eerst de ' ” tag wordt gebruikt om de gegevens weer te geven en is toegewezen aan de “ ” tag met behulp van zijn “ voor ” attribuut.
  • Daarna is de “ ” tag wordt gebruikt om een ​​omgeving te creëren voor de vervolgkeuzelijst.
  • Vervolgens de “ ” tag wordt gebruikt om lijstitems te maken die als vervolgkeuzelijstitems moeten worden geplaatst.

Nadat we de structuur van de vervolgkeuzelijst hebben ingesteld, gaan we nu wat basisopmaak toepassen:

etiket {
weergeven: blokkeren;
marge-onder: 5px;
}
selecteren {
opvulling: 5px;
grensstraal: 5px;
breedte: 200px;
}

De uitleg van CSS-eigenschappen wordt hieronder beschreven:

  • Selecteer eerst de ' etiket '-element en stel vervolgens de waarden van 'block' en '5px' in op de CSS ' weergave ' En ' marge-bodem ' eigenschappen.
  • Vervolgens de “ selecteren ' element is geselecteerd en levert de waarden '5px', '5px' en '200px' aan de CSS ' opvulling ”, “ grensradius ' En ' breedte ” eigenschappen, respectievelijk. Deze eigenschappen worden gebruikt om de zichtbaarheid van de gebruiker te verbeteren.

Na het uitvoeren van de bovenstaande codefragmenten ziet de webpagina er als volgt uit:

De bovenstaande uitvoer laat zien dat de vervolgkeuzelijst is gemaakt met behulp van de ' ” label met de “ ' label.

Voorbeeld 2: Aanmaken van lijst voor automatisch aanvullen

De ' ” tag wordt gebruikt met de “ ”-tag om een ​​automatisch aangevulde lijst te maken. Het wordt gebruikt samen met de ' '-tag die wordt gevuld door de opties die beschikbaar zijn in de lijst voor automatisch aanvullen. De code voor het maken van een automatisch aangevulde lijst met behulp van HTML wordt weergegeven in het onderstaande codefragment:

< etiket voor = 'prog-tools' > Of type een programmeertool: etiket >
< invoer type = 'tekst' ID kaart = 'prog-tools' lijst = 'hulpmiddelen' >
< gegevenslijst ID kaart = 'hulpmiddelen' >
< keuze waarde = 'C++' >
< keuze waarde = 'Montage' >
< keuze waarde = '.Netto' >
< keuze waarde = 'PHP' >
< keuze waarde = 'Robijn' >
< keuze waarde = 'Snel' >
< keuze waarde = 'Knooppunt js' >
< keuze waarde = 'Reageer' >
< keuze waarde = 'Mongo' >
< keuze waarde = 'Java' >
< keuze waarde = 'Python' >
gegevenslijst >

In het bovenstaande codefragment:

  • Voeg eerst de ' ”-tag die de tekst samen met het HTML-element weergeeft.
  • Gebruik vervolgens de ' ”-tag die handmatig door de gebruiker wordt ingevuld of automatisch kan worden ingevuld door de opties die beschikbaar zijn in de lijst voor automatisch aanvullen.
  • Gebruik daarna de ' ' tag en stel de ' ID kaart ” attribuutwaarde gelijk aan de waarde van de “ lijst ” attribuut van de “ ' label.
  • Gebruik vervolgens de ' '-tag in de ''-tag om een ​​item te maken voor de automatisch aangevulde lijst.

Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit:

De uitvoer laat zien dat de lijst voor automatisch aanvullen is gemaakt met behulp van de ' ” tag met de combinatie van “ ' En ' 'labels.

Conclusie

De ' ” Met de tag kan de ontwikkelaar opties maken voor de optielijst, waaruit de gebruiker elke optie kan kiezen. Deze “