Keuzelijsten
Keuzelijsten kunnen makkelijk onoverzichtelijk raken als ze niet op alfabetiche volgorde staan, en niet gegroepeerd zijn. Gelukkig kun je met een simpel PHP-scriptje of een tekstverwerker gegevens makkelijk op alfabetische volgorde zetten, zodat je al van één probleem af bent.
Maar het groeperen van keuzelijsten gaat niet echt gemakkelijk, als je niet weet hoe dat moet. Maar gelukkig bestaat deze tutorial, die je dat gaat leren. =p
We pakken ons oude gebruiksvriendelijk gemaakte voorbeeldformuliertje erbij, en voegen er een ongesoorteerde en ongegroepeerde keuzelijst aan toe:
...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="p" />
<label for="text"><u>P</u>laats cursor in invoerveld</label>
<br />
<!-- De keuzelijst //-->
<select name="plaatsnaam">
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
<option value="rotterdam">rotterdam</option>
<option value="leiden">leiden</option>
<option value="drachten">drachten</option>
<option value="amsterdam">amsterdam</option>
<option value="amersfoort">amerfoort</option>
<option value="denhaag">den haag</option>
<option value="arnhem">arnhem</option>
<option value="denbosch">den bosch</option>
<option value="voorschoten">voorschoten</option>
</select>
<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...
Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier3.html
Zoals je misschien wel ziet, komen de plaatsnamen meerdere keren voor, maar ik had geen zin om nog meer namen te verzinnen. =p Klik eens op de link, en probeer eens arnhem te zoeken. Je zal zien dat niet echt van je 1, 2, 3 gaat... Maar probeer nu eens onderstaad script, die op alfabetische volgorde staat, met hoofdletters is geschreven en is gegroepeerd in provincie.
...
<form action="#" method="post">
<input type="text" name="text" id="text" accesskey="p" />
<label for="text"><u>P</u>laats cursor in invoerveld</label>
<br />
<!-- De keuzelijst //-->
<select name="plaatsnaam">
<optgroup label="Friesland">
<option value="drachten">Drachten</option>
</optgroup>
<optgroup label="Gelderland">
<option value="arnhem">Arnhem</option>
</optgroup>
<optgroup label="Noord-Brabant">
<option value="denbosch">Den bosch</option>
</optgroup>
<optgroup label="Noord-Holland">
<option value="amsterdam">Amsterdam</option>
</optgroup>
<optgroup label="Utrecht">
<option value="amersfoort">Amerfoort</option>
</optgroup>
<optgroup label="Zuid-Holland">
<option value="denhaag">Den haag</option>
<option value="leiden">Leiden</option>
<option value="rotterdam">Rotterdam</option>
<option value="voorschoten">Voorschoten</option>
</optgroup>
</select>
<input type="submit" name="submit" value="Verzend" accesskey="v" />
</form>
...
Voorbeeld: http://jerseyboy.je.funpic.de/formulieren/formulier4.html