«
Denne artikkelen demonstrerer alternativ-taggen i HTML sammen med praktiske eksempler:
- Hva er opsjonskoden og hvordan bruker jeg den i HTML?
- Oppretting av en rullegardinliste
- Oppretting av autofullfør liste
Hva er opsjonskoden og hvordan bruker jeg den i HTML?
Alternativ-taggen kan brukes med '
Eksempel 1: Oppretting av en rullegardinliste
«
< h2 > Programmerings språk h2 >
< merkelapp til = 'prog-våpen' > Velg et programmeringsvåpen: merkelapp >
< plukke ut id = 'prog-lister' >
< alternativ verdi = '' > Velg et alternativ alternativ >
< alternativ verdi = 'c++' > C++ alternativ >
< alternativ verdi = '.nett' > Dot Net alternativ >
< alternativ verdi = 'nodejs' > Node js alternativ >
plukke ut >
I kodebiten ovenfor:
- Først, '
'-taggen brukes til å vise dataene og den tildeles ' '-taggen med ' til ' Egenskap. - Etter det, '
”-taggen brukes til å lage et miljø for rullegardinlisten. - Deretter '
'-taggen brukes til å lage listeelementer som skal plasseres som rullegardinlisteelementer.
Etter å ha satt opp strukturen til rullegardinlisten, la oss nå bruke litt grunnleggende styling:
merkelapp {display: blokk;
margin-bottom: 5px;
}
plukke ut {
polstring: 5px;
kantradius: 5px;
bredde: 200px;
}
Forklaringen av CSS-egenskaper er beskrevet nedenfor:
- Først velger du ' merkelapp '-elementet og sett deretter verdiene for 'block' og '5px' til CSS ' vise ' og ' marg-bunn ' egenskaper.
- Deretter ' plukke ut '-elementet er valgt og gir verdiene '5px', '5px' og '200px' til CSS-en ' polstring ', ' grense-radius ' og ' bredde ” eiendommer, henholdsvis. Disse egenskapene brukes til å forbedre brukerens synlighet.
Etter utførelse av kodebitene ovenfor, ser nettsiden slik ut:
Utdataene ovenfor viser at rullegardinmenyen er opprettet ved å bruke '
Eksempel 2: Oppretting av Autofullfør-liste
«
< input type = 'tekst' id = 'prog-verktøy' liste = 'verktøy' >
< dataliste id = 'verktøy' >
< alternativ verdi = 'C++' >
< alternativ verdi = 'Montering' >
< alternativ verdi = '.Nett' >
< alternativ verdi = 'PHP' >
< alternativ verdi = 'Rubin' >
< alternativ verdi = 'Fort' >
< alternativ verdi = 'Node js' >
< alternativ verdi = 'Reagere' >
< alternativ verdi = 'Mongo' >
< alternativ verdi = 'Java' >
< alternativ verdi = 'Python' >
dataliste >
I kodebiten ovenfor:
- Først legger du til '
”-taggen som viser teksten sammen med HTML-elementet. - Deretter bruker du ' ”-tagg som fylles ut av brukeren manuelt eller kan fylles ut automatisk av alternativene som er tilgjengelige i autofullfør-listen.
- Etter det, bruk '
'-taggen og angi dens ' id ' attributtverdi lik verdien av ' liste ' attributt for ' ' stikkord. - Deretter bruker du '
'-taggen inne i '
Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut:
Utdataene viser at autofullføringslisten opprettes ved å bruke '
Konklusjon
«