HTML Keuzelijsten
Keuzelijsten ook wel genoemd drop-down menu's zijn waarschijnlijk de meest flexibele objecten die je kunt toevoegen aan je formulieren. Afhankelijk van de instellingen, kunnen keuzelijsten met hetzelfde doel als keuzerondjes (slechts een selectie) of aankruisvakjes (meerdere selecties) dienen.Het voordeel van een keuzelijst, in vergelijking met keuzerondjes of aankruisvakjes, is dat het minder ruimte in beslag neemt. Maar dat is ook een nadeel, omdat gebruikers niet meteen alle opties kunnen zien.
Voor keuzelijsten heb je twee elementen nodig select en option. Met het select element geef je aan dat het om een keuzelijst gaat, het option definieert een keuze.
Voorbeeld:
<select name="browser">
<option>Internet Explorer</option>
<option>Google Chrome</option>
<option>Firefox</option>
</select>
Selected attribuut
Door aan het option element het attribuut value toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden. Het selected attribuut bepaalt welke mogelijkheid door de browser als standaard moet worden weergegeven. In het voorbeeld hieronder is de browser "Firefox" als standaard ingesteld.
 |
Is het attribuut selected niet gebruikt, dan wordt de eerste mogelijkheid weergegeven. In dit geval is dat "Internet Explorer" |
Disabled attribuut
Indien je wilt dat de gebruiker een bepaalde keuze niet kan selecteren, kan je het disabled attribuut toevoegen aan het select of option element.
|
In browsers die het disabled attribuut ondersteunen wordt de betreffende keuze meestal in grijs weergegeven. |
Multiple attribuut
Met het attribuut multiple mogen er meerdere waarden worden geselecteerd. Dit kan door de Ctrl-toets ingedrukt te houden terwijl je de keuzes aanklikt. Met het size attribuut van het select element wordt vastgelegd hoeveel mogelijkheden er in de keuzelijst zichtbaar zijn.
Voorbeeld:
<select name="autos" multiple size="4">
<option value="mer">Mercedes</option>
<option value="bmw" selected>BMW</option>
<option value="aud">Audi</option>
<option value="fer">Ferrari</option>
<option value="lam">Lamborghini</option>
<option value="asm">Aston Martin</option>
</select>
|
Ook bij de meervoudige keuzelijst kun je met het disbaled attribuut bepaalde keuzen uitsluiten. |
Groeperen
De HTML optgroup element wordt gebruikt voor het groeperen van bij elkaar behorende opties binnen de selectielijst. Dit maakt het makkelijker voor gebruikers omdat de opties overzichtelijker zijn in een grote lijst. Het gemeenschappelijke kenmerk van een groep keuzemogelijkheden wordt vastgelegd met het label attribuut.
Voorbeeld:
<select name="menu">
<option value="keuze">Maak je keuze</option>
<optgroup label="Groenten">
<option>Bloemkool</option>
<option>Spruitjes</option>
<option>Komkommer</option>
<option>Tomaten</option>
<option>Sperziebonen</option>
</optgroup>
<optgroup label="Vruchten">
<option>Appels</option>
<option>Peren</option>
<option>Bananen</option>
<option>Mandarijnen</option>
<option>Sinaasappels</option>
</optgroup>
</select>
Het attribuut disbaled is ook te gebruiken met het element optgroup. In het onderstaande voorbeeld is het niet mogelijk om een keuze te maken uit vruchten.
Voorbeeld formulier
Hieronder volgt een voorbeeld van een formulier met een meervoudige keuzelijst waar een PHP script wordt gebruikt om de informatie uit het formulier te verwerken.Wanneer je een PHP-script gebruikt bij een meervoudige keuzelijst om de informatie te verwerken, moet je er ervoor zorgen dat het script ook de informatie van eerdere geselecteerde keuzemogelijkheden kan verwerken, hiervoor moet je van de keuzemogelijkheden een array maken.
<select name="taal[]" multiple size="8">
|
Een array maak je door de waarde van het name attribuut te beëindigen met blokhaken. |
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/multiple/style.css" />
</head>
<body>
<b>Maak je keuze:</b><br>
Houd de Ctrl-toets ingedrukt om meerdere pakketten te selecteren.<p>
<form action="multiple/check.php" method="post">
<select name="taal[]" multiple size="8">
<option value="HTML" selected>HTML<br>
<option value="CSS">CSS<br>
<option value="Javascript">Javascript <br>
<option value="jQuery">jQuery<br>
<option value="XML">XML<br>
<option value="ASP.NET">ASP.NET<br>
<option value="PHP">PHP<br>
<option value="SQL">SQL
</select>
<hr>
<p><input type="checkbox" name="nbrief" checked >Nieuwsbrief ontvangen</p>
<input type="submit" name="submit" value="Verzenden">
</body>
</html>
