Introduktion till rullgardinslistan i HTML
Listrutan i HTML är ett viktigt element för formbyggnadsändamål eller för att visa vallistan från vilken användaren kan välja ett eller flera värden. Den här typen av vallista i HTML kallas Dropdown-listan. Det skapas med tagg med värde. Det låter användaren välja valfritt alternativ enligt deras val. Det är alltid en bra praxis att använda rullgardinslistan när du känner till alternativvärdet, så man kan ställa in valfritt värde som standardattribut och andra kommer att vara alternativalternativ.
Låt oss se hur rullgardinslistan kommer att skapas:
Syntax:
option1
option2
option3
option3
Exempel:
Red
Purple
Som visas i syntaxen ovan är en tagg som används för att skapa rullgardinslista. taggen i den markerade taggen är ett attributvärde eller attribut för vallistan, värdet är för att visa väderalternativet är valt, inaktiverat eller med andra egenskaper.option1, 2…. kommer att vara namnet. Med hjälp av CSS kan vi ge effekter till vår urvalslista, kunna ställa in positioner som relativ, absolut, etc, kunna ställa in bredd och göra många andra funktioner.
Ställa in bakgrundsfärg eller färg till muspekaren med hjälp av kod:
.dropdown a:hover(
Background-color: color_name;
)
Position för rullgardinslistan definieras i två värden: position: relativ som används för att visa innehållet i listan exakt precis under väljlista-knappen. Med hjälp av position: absolut;
Min-bredd är en av egenskaperna som används för att ge en specifik bredd till rullgardinslistan. Vi kan ställa in den så länge som vår rullgardinsmeny genom att ställa in bredden till 100%. Ovan syntax definieras för val av enstaka attribut, nu kommer vi att se hur flera alternativ kommer att väljas från objektlistan.
Syntax:
option1
option2
Exempel:
Math
English
Science
Biology
Hur fungerar listan i HTML?
Efter att ha studerat syntaxen nu kommer vi att se hur exakt dropdown-listan kommer att fungera i HTML. Det finns några attribut som används i taggen som är följande:
- Namn: Detta attribut är användbart för att tilldela ett namn till kontrollen som kommer att skicka till servern som ska identifieras och ta det önskade värdet.
- Multipel: Om attributet är inställt på ”multipel” kan användaren välja flera värden i urvalslistan.
- Storlek: Storleksattribut används för att definiera en rullningslåda i en specifik storlek runt rullgardinslistan. Det är också användbart för att visa flera synliga alternativ från listan.
- Värde: Detta attribut visar ett alternativ i vallistan är vald.
- Valt: Valda attribut aktiverar redan från början av sidbelastningar för att visa redan valt listobjekt från listan.
- Etikett: Etikettattribut fungerar som en annan metod för märkning av alternativvärde.
- Inaktiverat: Om vi vill visa en listruta med ett inaktiveringsalternativ, är det möjligt att använda inaktiverat attribut i HTML-väljlista.
- onChange: När användaren kommer att välja vem som helst alternativet i rullgardinslistan utlöses händelsen vid val av objekt.
- onFocus: När användaren svävar med musen i vallistan för att välja ett alternativ i listan, utlöser det en händelse för att välja objektet.
- Form: Detta attribut används för att definiera en eller flera former som är relaterade till markeringsfältet.
- inaktiverat: Vi bör hålla vår rullgardinslista inaktiverad från användaren med hjälp av detta attribut.
- krävs: När vi fyller i någon form, vill vi visa att det här fältet är nödvändigt för att välja valfritt värde från listan innan det faktiska sändningsformuläret, så i detta fall definierar vi att användaren måste välja ett värde från listan.
Exempel på HTML-kod
Följande exempel visar hur exakt dropdown-listan kommer att användas:
Exempel 1
Koda:
DropDown List
Världens sju underverk
Taj Mahal
Kinesiska muren
Kristus förlossare Satue
Machu Picchu
Chichen Itza
Roman Colosseum
Petra
Exemplet ovan innehåller olika alternativ som inaktiverade, valda, obligatoriska osv. Som visas på utgångsskärmen.
Produktion:
Exempel 2
Koda:
Mumbai
Pune
Nagpur
Solapur
Latur
Här kan du välja flera alternativ. Tryck på ctrl-tangenten och välj flera alternativ åt gången.
funktion multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Som visas i skärmbilden nedan, för att välja flera alternativ från rullgardinslistan, tryck på given knapp och genom att trycka på CTRL, välj flera alternativ.
Produktion:
Exempel 3
Koda:
.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;)
Hover Dropdown-demonstration
HTML bildar Element
länkar
Listrutan
Inmatningsområde
Knapp
Radioknappar
Listrutan kommer att vara öppen med musen effekt.
Produktion:
Slutsats
Vi kan dra slutsatsen att rullgardinslistan används för att välja ett alternativ i urvalslistan. Det används för att välja enstaka eller flera alternativ åt gången. Användare kan välja ett alternativ från listan enligt deras val, så det blir mer användarvänligt. Attribut som listas ovan används med markeringarna för att göra olika valoperationer med rullgardinslistan.
Rekommenderad artikel
Detta är en guide till Dropdown List i HTML. Här diskuterar vi hur Dropdown List fungerar i HTML och dess exempel med kodimplementering. Du kan också gå igenom våra andra relaterade artiklar för att lära dig mer -
- Översikt av HTML Style Attribut
- Topp 10 fördelar med HTML
- Olika typer av HTML-ramar med syntax
- Topp 8 HTML-layoutelement
- Hur skapar jag en RadioButton?