Inleiding tot de vervolgkeuzelijst in HTML
Vervolgkeuzelijst in HTML is een belangrijk element voor het bouwen van formulieren of voor het weergeven van de keuzelijst waaruit de gebruiker een of meerdere waarden kan selecteren. Dit soort selectielijst in HTML staat bekend als de vervolgkeuzelijst. Het is gemaakt met behulp van tag met waarde. Hiermee kan de gebruiker elke optie kiezen volgens zijn keuze. Het is altijd een goede gewoonte om de vervolgkeuzelijst te gebruiken wanneer u de optiewaarde kent, zodat u elke waarde als standaardkenmerk kunt instellen en andere als optiewaarden.
Laten we eens kijken hoe de vervolgkeuzelijst wordt gemaakt:
Syntaxis:
option1
option2
option3
option3
Voorbeeld:
Red
Purple
Zoals in de bovenstaande syntaxis wordt getoond, wordt een tag gebruikt om de vervolgkeuzelijst te maken. tag ingesloten in de select tag is een attribuutwaarde of attributen voor selectielijst, de waarde is voor het weergeven van de weeroptie is geselecteerd, uitgeschakeld of met andere eigenschappen. optie 1, 2 … wordt de naam. Met behulp van CSS kunnen we effecten aan onze selectielijst geven, in staat om posities in te stellen zoals relatief, absoluut, enz., In staat om breedte in te stellen en vele andere functies uit te voeren.
Achtergrondkleur of kleur instellen voor de muisaanwijzer met behulp van code:
.dropdown a:hover(
Background-color: color_name;
)
De positie voor de vervolgkeuzelijst is gedefinieerd in twee waarden: positie: relatief die wordt gebruikt om de inhoud van de lijst precies onder de knop Lijst selecteren weer te geven. Met behulp van positie: absoluut;
Min-breedte is een van de eigenschappen die wordt gebruikt om de vervolgkeuzelijst een specifieke breedte te geven. We kunnen het instellen zolang onze vervolgkeuzeknop door breedte in te stellen op 100%. De bovenstaande syntaxis is gedefinieerd voor selectie van één kenmerk, nu zullen we zien hoe meerdere opties worden geselecteerd in de itemlijst.
Syntaxis:
option1
option2
Voorbeeld:
Math
English
Science
Biology
Hoe dropdownlijst werkt in HTML?
Na het bestuderen van de syntaxis zullen we nu zien hoe de vervolgkeuzelijst precies zal werken in HTML. Er zijn enkele attributen die in de tag worden gebruikt die als volgt zijn:
- Naam: dit kenmerk is handig om een naam toe te wijzen aan het besturingselement dat naar de server wordt gestuurd om te worden geïdentificeerd en de vereiste waarde aan te nemen.
- Meervoudig: als het kenmerk is ingesteld op 'meervoudig', kan de gebruiker meerdere waarden selecteren in de keuzelijst.
- Grootte: het kenmerk Grootte wordt gebruikt om een scrollvenster met een specifieke grootte in de vervolgkeuzelijst te definiëren. Het is ook handig voor het weergeven van verschillende zichtbare opties uit de lijst.
- Waarde: dit kenmerk geeft aan dat een optie in de selectielijst is geselecteerd.
- Geselecteerd: Geselecteerde attributen inschakelen op de allereerste beginpunten van pagina-ladingen voor het tonen van reeds geselecteerd lijstitem uit de lijst.
- Label: labelkenmerken werken als een andere benadering voor de waarde van labelopties.
- Uitgeschakeld: als we een vervolgkeuzelijst met een uitschakelingsoptie willen weergeven, is het mogelijk om het uitgeschakelde kenmerk in de HTML-selectielijst te gebruiken.
- onChange: wanneer de gebruiker iemand de optie in de vervolgkeuzelijst gaat selecteren, wordt de gebeurtenis geactiveerd bij het selecteren van items.
- onFocus: wanneer de gebruiker de muis op de selectielijst plaatst om een optie in de lijst te selecteren, wordt een gebeurtenis geactiveerd om het item te selecteren.
- Formulier: dit kenmerk wordt gebruikt om een of meerdere formulieren te definiëren die gerelateerd zijn aan het selectieveld.
- uitgeschakeld: we moeten onze vervolgkeuzelijst van de gebruiker uitschakelen met behulp van dit kenmerk.
- vereist: wanneer we een formulier invullen, willen we laten zien dat dit veld nodig is om een waarde uit de lijst te selecteren voordat het formulier daadwerkelijk wordt verzonden, dus in dit geval definiëren we dat de gebruiker een waarde uit de lijst moet selecteren.
Voorbeelden van HTML-code
De volgende voorbeelden laten zien hoe de vervolgkeuzelijst precies zal worden gebruikt:
Voorbeeld 1
Code:
DropDown List
Zeven wereldwonderen
Taj Mahal
Grote muur van China
Christus de Verlosser Satue
Machu Picchu
Chichen Itza
Het Romeinse Colosseum
Petra
Het bovenstaande voorbeeld bevat verschillende opties zoals uitgeschakeld, geselecteerd, vereist, enz. Die worden weergegeven in het uitvoerscherm.
Output:
Voorbeeld 2
Code:
Mumbai
Pune
Nagpur
Solapur
Latur
Hier kunnen meerdere opties worden geselecteerd. Druk op de Ctrl-toets en selecteer meerdere opties tegelijk.
function multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Zoals weergegeven in de onderstaande schermafbeelding, drukt u op de gegeven knop om meerdere opties in de vervolgkeuzelijst te selecteren en selecteert u met CTRL meerdere opties.
Output:
Voorbeeld 3
Code:
.dropdownbtn (
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
)
.dropdowndemo(
position:fixed;
display: block;
)
.dropdownlist-content (
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
)
.dropdownlist-content a (
color: darkblue;
padding: 14px 18px;
display: block;
)
.dropdownlist-content a:hover (background-color: lightcyan;)
.dropdowndemo:hover .dropdownlist-content (display: block;)
.dropdowndemo:hover .dropdownbtn (background-color: blue;)
Beweeg Dropdown-demo
HTML vormt Element
Links
Keuzelijst
Invoer veld
Knop
Radio knoppen
De vervolgkeuzelijst wordt geopend met het zweefeffect.
Output:
Conclusie
We kunnen concluderen dat de vervolgkeuzelijst wordt gebruikt om een optie uit de keuzelijst te selecteren. Het wordt gebruikt om één of meerdere opties tegelijk te selecteren. Gebruikers kunnen een optie uit de lijst selecteren volgens hun keuze, zodat deze gebruikersvriendelijker wordt. Bovenstaande kenmerken worden gebruikt met de selectietags om verschillende selectiebewerkingen uit te voeren met de vervolgkeuzelijst.
Aanbevolen artikel
Dit is een handleiding voor de vervolgkeuzelijst in HTML. Hier bespreken we hoe Dropdown List werkt in HTML en zijn voorbeelden met code-implementatie. U kunt ook onze andere gerelateerde artikelen doornemen voor meer informatie -
- Overzicht van HTML-stijlkenmerk
- Top 10 voordelen van HTML
- Verschillende soorten HTML-frames met syntaxis
- Top 8 HTML-lay-outelementen
- Hoe maak je een RadioButton?