HTML Aankruisvakjes
Aankruisvakjes ook wel genoemd checkboxes worden gebruikt wanneer je wilt dat de gebruikers meerdere items mogen selecteren. Aankruisvakjes worden gemaakt met het input element. Met behulp van het type attribuut bepaal je dat het om aankruisvakjes gaat. De waarde checkbox definieert een aankruisvakje op het scherm.
Voorbeeld:
<input type="checkbox" name="taal" value="htm">HTML<br>
<input type="checkbox" name="taal" value="css">CSS<br>
<input type="checkbox" name="taal" value="jsc">Javascript<br>
<input type="checkbox" name="taal" value="jqu">jQuery<br>
<input type="checkbox" name="taal" value="xml">XML<br>
<input type="checkbox" name="taal" value="asp">ASP.NET<br>
<input type="checkbox" name="taal" value="php">PHP<br>
<input type="checkbox" name="taal" value="sql">SQL
Het checked attribuut zorgt er voor dat een aankruisvakje bij openen van het formulier geselecteerd is.
Indien je wilt dat de gebruiker een bepaalde keuze niet kan selecteren, kan je het disabled attribuut toevoegen aan het input element.
Voorbeeld formulier
Hieronder volgt een voorbeeld van een formulier met aankruisvakjes waar een PHP script wordt gebruikt om de informatie uit het formulier te verwerken.
 |
Wanneer je een PHP-script gebruikt om de informatie te verwerken, dan moet je er rekening mee houden dat je de bij elkaar behorende aankruisvakjes een array van gaat maken. Dat doe je door de waarde van het name attribuut te beëindigen met blokhaken. |
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/checkbox/style.css" />
</head>
<body>
<p><b>Kies je pakket:</b></p>
<form action="checkbox/check.php" method="post">
<input type="checkbox" name="taal[]" value="HTML" checked>HTML<br>
<input type="checkbox" name="taal[]" value="CSS">CSS<br>
<input type="checkbox" name="taal[]" value="Javascript">Javascript <br>
<input type="checkbox" name="taal[]" value="jQuery">jQuery<br>
<input type="checkbox" name="taal[]" value="XML">XML<br>
<input type="checkbox" name="taal[]" value="ASP.NET">ASP.NET<br>
<input type="checkbox" name="taal[]" value="PHP">PHP<br>
<input type="checkbox" name="taal[]" value="SQL">SQL
<hr>
<p><input type="checkbox" name="nbrief" checked >Nieuwsbrief ontvangen</p>
<input type="submit" name="submit" value="Verzenden">
</body>
</html>
