Aankruisvakjes


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.

VoorbeeldVoorbeeld:
<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.

VoorbeeldVoorbeeld:
<input type="checkbox" name="niewsbrief" value="nbrief" checked>

Indien je wilt dat de gebruiker een bepaalde keuze niet kan selecteren, kan je het disabled attribuut toevoegen aan het input element.

VoorbeeldVoorbeeld:
<input type="checkbox" name="taal" value="xml" disabled>XML


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.

Tip 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.

VoorbeeldVoorbeeld:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/checkbox/style.css" />
</head>
 <body>
  <p><b>Kies je pakket:</b></p>
  <form action="forms/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>