Hvad bruges optgroup elementet til?

HTML-elementet optgroup er en måde at organisere og gruppere elementer i en HTML-formular. Det giver mulighed for at kategoriere og gruppere valgmulighederne, så det er lettere for brugeren at skelne mellem dem. Optgroup bruges typisk sammen med et . Det gør det lettere for brugeren at se de forskellige valgmuligheder, da de er grupperet, og det gør det lettere for udvikleren at organisere sine valgmuligheder. De grupper, der er defineret med optgroup-elementer, vises som underpunkter i formulars drop-down-menu.

Eksempler på optgroup

Eksempel 1:

<select name=”fruits”>
<optgroup label=”Citrus Fruits”>
<option value=”orange”>Orange</option>
<option value=”lemon”>Lemon</option>
</optgroup>
<optgroup label=”Tropical Fruits”>
<option value=”mango”>Mango</option>
<option value=”banana”>Banana</option>
</optgroup>
</select>

Beskrivelse: Dette eksempel opretter en dropdown-menu med to grupper af frugter. Grupperne hedder “Citrus Fruits” og “Tropical Fruits”.

Eksempel 2:

<select name=”colors”>
<optgroup label=”Warm Colors”>
<option value=”red”>Red</option>
<option value=”orange”>Orange</option>
<option value=”yellow”>Yellow</option>
</optgroup>
<optgroup label=”Cool Colors”>
<option value=”blue”>Blue</option>
<option value=”green”>Green</option>
<option value=”purple”>Purple</option>
</optgroup>
</select>

Beskrivelse: Dette eksempel opretter en dropdown-menu med to grupper af farver. Grupperne hedder “Warm Colors” og “Cool Colors”.

Eksempel 3:

<select name=”sizes”>
<optgroup label=”Small Sizes”>
<option value=”XS”>Extra Small</option>
<option value=”S”>Small</option>
</optgroup>
<optgroup label=”Large Sizes”>
<option value=”M”>Medium</option>
<option value=”L”>Large</option>
<option value=”XL”>Extra Large</option>
</optgroup>
</select>

Beskrivelse: Dette eksempel opretter en dropdown-menu med to grupper af størrelser. Grupperne hedder “Small Sizes” og “Large Sizes”.