Vad är option-taggen i HTML?

Vad Ar Option Taggen I Html



den ' ”-taggen används för att definiera ett alternativ som en användare kan välja från en rullgardinsmeny eller från urvalslistorna i webbformulär. den ' ”-taggen låter utvecklare skapa en uppsättning alternativ där användaren kan välja vilket alternativ som helst. Det används i olika applikationer som undersökningar, shoppingsajter online, registreringsformulär etc.

Den här artikeln visar alternativtaggen i HTML tillsammans med praktiska exempel:





Vad är alternativet taggen och hur man använder den i HTML?

Alternativtaggen kan användas med ' ' och ' '-taggar. I fallet med ' ”-taggen, skapar den en lista med alternativ som kan autoslutföras av en webbläsare. Låt oss gå igenom ett par exempel för en bättre förståelse av förhållandet mellan ' ' taggen med ' ' och ' ' taggar:



Exempel 1: Skapande av en rullgardinslista



den ' '-taggen används med ' ”-tagg för att skapa en rullgardinslista på webbsidan. den ' ” skapar varje alternativ/listobjekt i rullgardinsmenyn. För en bättre förståelse låt oss följa kodavsnittet nedan:



< h2 > Programmeringsspråk h2 >
< märka för = 'prog-vapen' > Välj ett programmeringsvapen: märka >
< Välj id = 'prog-listor' >
< alternativ värde = '' > Välj ett alternativ alternativ >
< alternativ värde = 'c++' > C++ alternativ >
< alternativ värde = '.netto' > Dot Net alternativ >
< alternativ värde = 'nodejs' > Node js alternativ >
Välj >

I kodavsnittet ovan:



  • Först, ' '-taggen används för att visa data och den tilldelas med ' ' taggen med sin ' för ' attribut.
  • Efter det kommer ' ”-taggen används för att skapa en miljö för rullgardinsmenyn.
  • Därefter ' ”-taggen används för att skapa listobjekt som ska placeras som listobjekt.

Efter att ha ställt in strukturen för rullgardinsmenyn, låt oss nu tillämpa lite grundläggande styling:

märka {
display: block;
margin-bottom: 5px;
}
Välj {
stoppning: 5px;
border-radie: 5px;
bredd: 200px;
}

Förklaringen av CSS-egenskaper beskrivs nedan:

  • Välj först ' märka ' element och ställ sedan in värdena för 'block' och '5px' till CSS ' visa ' och ' marginal-botten ' egenskaper.
  • Därefter ' Välj '-elementet väljs och ger värdena '5px', '5px' och '200px' till CSS ' stoppning ”, “ gräns-radie ' och ' bredd ” fastigheter respektive. Dessa egenskaper används för att förbättra användarens synlighet.

Efter exekveringen av ovanstående kodavsnitt ser webbsidan ut så här:

Ovanstående utdata visar att rullgardinsmenyn har skapats med hjälp av ' ' taggen med ' '-tagg.

Exempel 2: Skapande av Auto-Complete List

den ' '-taggen används med ' ”-tagg för att skapa en autoslutförandelista. Den används tillsammans med ' ”-taggen som fylls av de tillgängliga alternativen i listan för automatisk komplettering. Koden för att skapa en automatisk kompletteringslista med HTML visas i nedanstående kodavsnitt:

< märka för = 'prog-verktyg' > Eller typ ett programmeringsverktyg: märka >
< inmatning typ = 'text' id = 'prog-verktyg' lista = 'verktyg' >
< datalista id = 'verktyg' >
< alternativ värde = 'C++' >
< alternativ värde = 'Hopsättning' >
< alternativ värde = '.Netto' >
< alternativ värde = 'PHP' >
< alternativ värde = 'Rubin' >
< alternativ värde = 'Snabb' >
< alternativ värde = 'Node js' >
< alternativ värde = 'Reagera' >
< alternativ värde = 'Mongo' >
< alternativ värde = 'Java' >
< alternativ värde = 'Pytonorm' >
datalista >

I kodavsnittet ovan:

  • Lägg först till ' ”-tagg som visar texten tillsammans med HTML-elementet.
  • Använd sedan ' ”-tagg som fylls i av användaren manuellt eller kan fyllas i automatiskt av de tillgängliga alternativen i listan för automatisk komplettering.
  • Efter det, använd ' ' taggen och ställ in dess ' id ' attributvärde lika med värdet på ' lista ' attribut för ' '-tagg.
  • Använd sedan ' '-taggen inuti taggen '' för att skapa ett objekt för den automatiska kompletteringslistan.

Efter exekveringen av ovanstående kodavsnitt ser webbsidan ut så här:

Utdata visar att den automatiska kompletteringslistan skapas genom att använda ' '-tagg med kombinationen av ' ' och ' '-taggar.

Slutsats

den ' ”-taggen låter utvecklaren skapa alternativ för alternativlistan, där användaren kan välja vilket alternativ som helst. Denna ' '-tagg kan användas med ' ' och ' ” taggar efter behov av webbdesign. För att skapa en rullgardinseffekt används taggen ' ' med taggen '' och för att skapa en automatisk kompletteringseffekt använd den med ' ' taggen tillsammans med ' '-tagg. Den här artikeln visar vad som är alternativtaggen i HTML.

Övrig

Kategori

Populära Inlägg

Hur man använder dig av kommandot i Linux

JavaScript Regex (användarnamnsvalidering)

Hur lägger man till en dimension till en tensor i PyTorch?

Hur du återställer Windows Mail-data och inställningar från en skadad användarprofil - Winhelponline

Vad är syftet med AWS Key Management Service?

Hur man använder webbarbetare för multithreading i JavaScript?

Vad är skillnaden mellan metoderna decodeURIComponent() och decodeURI() i JavaScript?

Skriva och köra skript i Windows PowerShell ISE: En steg-för-steg-guide

Hur man videosamtal mellan Android och iPhone

Hur man ändrar bakgrundsfärgen på Google Dokument

Hur man använder EXEMPEL DATABAS i MySQL

Hur använder man formatkommandon för att ändra utdatavy i PowerShell?

C++ Getters och Setters-metoder

Vad är AWS AppConfig?

Hur tar man bort all Commit History i GitHub?

Så här ställer du in startsidan (försidan)

Vad gör W Metacharacter i RegExp av JavaScript

Hur man installerar och konfigurerar Astro.js på Windows?

returnera DECR

SQL Server Konvertera Datetime till String