Lange lijsten groeperen met <optgroup>
De figuur hiernaast toont de Kleurencirkel van Itten. Er onder staat een listbox. Als je die open klapt zie je een lijst met de
kleuren.
Om de lijst met kleuren goed te 'begrijpen' moet je weten hoe de lijst is opgebouwd met primaire, secundaire en tertiaire kleuren.
N.B.: De listboxen op deze pagina hebben geen functie. Als je op een item klikt gebeurt er niets.
Meer informatie over de Kleurencirkel van Itten vind je in het item Over
kleurgebruik op je website.
Het is mogelijk om het onderscheid tussen primaire, secundaire en tertiaire kleuren ook zichtbaar maken in de listbox door
middel van tekst. Op deze pagina wordt uitgelegd hoe je dat aanpakt.
N.B.: De tags om de listbox zelf te maken worden besproken in het item Listbox met
enkelvoudige en meervoudige keuzemogelijkheid.
Het groeperen van de items in de listbox
Om de items in de listbox te groeperen gebruik je de tag:
De code voor de listbox ziet er dan globaal gezien zo uit:
<select ... >
<optgroup ... >
<option> ... </option>
<option> ... </option>
</optgroup>
<optgroup ... >
<option> ... </option>
<option> ... </option>
</optgroup>
</select>
De tag <optgroup> heeft twee attributen:
- label. Dit attribuut is verplicht aanwezig. Het is de tekst die hoort bij de groep. In onderstaande listbox zijn de labels
vet en cursief.
Als je label toch weglaat wordt er een lege regel in de listbox geplaatst of je ziet helemaal geen tekst. Dat hangt af van de browser die je gebruikt. - disabled. Dit attribuut is optioneel. Als je de groep uitschakelt, kun je niet op de opties binnen die groep klikken. In onderstaande listbox is de groep 'Secundaire kleuren' uitgeschakeld.
- De kleur van uitgeschakelde items in de listbox zou grijs moeten zijn, maar in Edge en Chrome is niet te zien dat items zijn uitgeschakeld.
De opmaak van de listbox:
- De kleuren van de tekst in de listbox worden ingesteld met behulp van een class. Zie het item Listbox met links.
- De opmaak van de <optgroup> is op deze pagina apart ingesteld met CSS, zie de code onderaan de bladzijde. Dit is nodig omdat elke browser zijn eigen default-instellingen heeft.
Gebruik:
- De CSS voor de opmaak staat in een <STYLE>-block, in de <HEAD>.
- De HTML voor het groeperen van de listbox items staat in de <BODY>, als onderdeel van de <select>-tag
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Listbox zonder <optgroup>; zet dit in de <BODY> op de plaats waar het nodig is).<style>
.FormB {
font-family : verdana, arial, helvetica, sans-serif;
font-size : 11pt;
font-weight: normal;
color: #000099;
text-decoration: none
}
.
.
.
optgroup {
font-family : verdana, arial, helvetica, sans-serif;
font-size : 10pt;
font-weight: bold;
font-style: oblique;
color: #000000;
text-decoration: none
}
</style>
(Listbox met <optgroup>; zet dit in de <BODY> op de plaats waar het nodig is).<select name="Kleuren1">
<option value="xxxx" class="FormZ">Kies een kleur</option>
<option value="rood" class="FormR">Rood</option>
<option value="geel" class="FormR">Geel</option>
<option value="blauw" class="FormR">Blauw</option>
<option value="oranje" class="FormG">Oranje</option>
<option value="paars" class="FormG">Paars</option>
<option value="groen" class="FormG">Groen</option>
<option value="geeloranje" class="FormB">Geeloranje</option>
<option value="roodoranje" class="FormB">Roodoranje</option>
<option value="roodpaars" class="FormB">Roodpaars</option>
<option value="blauwpaars" class="FormB">Blauwpaars</option>
<option value="blauwgroen" class="FormB">Blauwgroen</option>
<option value="geelgroen" class="FormB">Geelgroen</option>
</select>
<select name="Kleuren2">
<option value="xxxx" class="FormZ">Kies een kleur</option>
<optgroup label="Primaire kleuren">
<option value="rood" class="FormR">Rood</option>
<option value="geel" class="FormR">Geel</option>
<option value="blauw" class="FormR">Blauw</option>
</optgroup>
<optgroup label="Secundaire kleuren disabled">
<option value="oranje" class="FormG">Oranje</option>
<option value="paars" class="FormG">Paars</option>
<option value="groen" class="FormG">Groen</option>
</optgroup>
<<optgroup label="Tertiaire kleuren">
<option value="geeloranje" class="FormB">Geeloranje</option>
<option value="roodoranje" class="FormB">Roodoranje</option>
<option value="roodpaars" class="FormB">Roodpaars</option>
<option value="blauwpaars" class="FormB">Blauwpaars</option>
<option value="blauwgroen" class="FormB">Blauwgroen</option>
<option value="geelgroen" class="FormB">Geelgroen</option>
</optgroup>
</select>
