Det '
Denne artikel demonstrerer option-tagget i HTML sammen med praktiske eksempler:
- Hvad er option-tagget, og hvordan bruger man det i HTML?
- Oprettelse af en rulleliste
- Oprettelse af Autofuldførelsesliste
Hvad er option-tagget, og hvordan bruger man det i HTML?
Indstillingsmærket kan bruges med '
Eksempel 1: Oprettelse af en rulleliste
Det '
< h2 > Programmeringssprog h2 >
< etiket til = 'prog-våben' > Vælg et programmeringsvåben: etiket >
< Vælg id = 'prog-lister' >
< mulighed værdi = '' > Vælg en indstilling mulighed >
< mulighed værdi = 'c++' > C++ mulighed >
< mulighed værdi = '.net' > Dot Net mulighed >
< mulighed værdi = 'nodejs' > Node js mulighed >
Vælg >
I ovenstående kodestykke:
- For det første ' ' tag bruges til at vise dataene, og det er tildelt '
' tag ved hjælp af dets ' til ' attribut. - Derefter vil '
” tag bruges til at skabe et miljø til rullelisten. - Dernæst '
” tag bruges til at oprette listeelementer, der skal placeres som rullelisteelementer.
Efter at have opsat strukturen på rullelisten, lad os nu anvende nogle grundlæggende styling:
etiket {display: blok;
margin-bund: 5px;
}
Vælg {
polstring: 5px;
kant-radius: 5px;
bredde: 200px;
}
Forklaringen af CSS-egenskaber er beskrevet nedenfor:
- Først skal du vælge ' etiket '-elementet og derefter indstille værdierne for 'blok' og '5px' til CSS ' Skærm ' og ' margin-bund ' ejendomme.
- Dernæst ' Vælg '-elementet er valgt og giver værdierne '5px', '5px' og '200px' til CSS ' polstring ', ' grænse-radius ' og ' bredde ” ejendomme, hhv. Disse egenskaber bruges til at øge brugerens synlighed.
Efter udførelse af ovenstående kodestykker ser websiden sådan ud:
Ovenstående output viser, at rullemenuen er blevet oprettet ved hjælp af '
Eksempel 2: Oprettelse af Autofuldførelsesliste
Det '
< input type = 'tekst' id = 'prog-værktøjer' liste = 'værktøjer' >
< dataliste id = 'værktøjer' >
< mulighed værdi = 'C++' >
< mulighed værdi = 'Montage' >
< mulighed værdi = '.Net' >
< mulighed værdi = 'PHP' >
< mulighed værdi = 'Rubin' >
< mulighed værdi = 'Swift' >
< mulighed værdi = 'Node js' >
< mulighed værdi = 'Reagere' >
< mulighed værdi = 'Mongo' >
< mulighed værdi = 'Java' >
< mulighed værdi = 'Python' >
dataliste >
I ovenstående kodestykke:
- Først skal du tilføje ' ” tag, der viser teksten sammen med HTML-elementet.
- Brug derefter ' ” tag, som bliver udfyldt af brugeren manuelt eller kan automatisk udfyldes af de tilgængelige muligheder i autofuldførelseslisten.
- Brug derefter '
' tag og sæt dets ' id ' attributværdi lig med værdien af ' liste ' attribut for ' ” tag. - Brug derefter '
” tag inde i “
Efter udførelsen af ovenstående kodestykke ser websiden sådan ud:
Outputtet viser, at autofuldførelseslisten oprettes ved at bruge '
Konklusion
Det '