HTML Keuzerondjes

Keuzerondjes ook wel genoemd radiobuttons worden gebruikt wanneer de gebruiker uit meerdere mogelijkheden één keuze moet maken.

Keuzerondjes worden gemaakt met het input element. Met behulp van het type attribuut bepaal je dat het om keuzerondjes gaat. Keuzerondjes worden gecreëerd door het gebruik van meerdere "radio" knoppen, allemaal met dezelfde naam, maar met verschillende waarden. De gebruiker mag slechts één item uit een reeks selecteren.

Voorbeeld:

<input type="radio" name="taal" value="htm">HTML<br>
<input type="radio" name="taal" value="css">CSS<br>
<input type="radio" name="taal" value="jsc">Javascript<br>
<input type="radio" name="taal" value="jqu">jQuery<br>
<input type="radio" name="taal" value="xml">XML<br>
<input type="radio" name="taal" value="asp">ASP.NET<br>
<input type="radio" name="taal" value="php">PHP<br>
<input type="radio" name="taal" value="sql">SQL<br>

Uitproberen

Het name attribuut gebruik je om aan te geven welke keuzerondjes bij elkaar horen. Het value attribuut definieert welke waarde naar de server gestuurd moet worden als een keuzerondje geselecteerd is.

Het checked attribuut zorgt er voor dat een keuzerondje bij openen van het formulier geselecteerd is.

Voorbeeld:

<input type="radio" name="nieuwsbrief" value="ja" checked>Ja

Uitproberen

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

Voorbeeld:

<input type="radio" name="taal" value="xml" disabled>XML

Uitproberen

Voorbeeld formulier

Hieronder volgt een voorbeeld van een formulier met keuzerondjes waar een PHP script wordt gebruikt om de informatie uit het formulier te verwerken.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="forms/radio/style.css">
</head>
 <body>
  <p><b>Volgende cursus zou ik graag willen volgen:</b></p>
  <form action="radio/check.php" method="post">
  <input type="radio" name="taal" value="HTML" checked>HTML<br>
  <input type="radio" name="taal" value="CSS">CSS<br>
  <input type="radio" name="taal" value="Javascript">Javascript <br>
  <input type="radio" name="taal" value="jQuery">jQuery<br>
  <input type="radio" name="taal" value="XML">XML<br>
  <input type="radio" name="taal" value="ASP.NET">ASP.NET<br>
  <input type="radio" name="taal" value="PHP" disabled>PHP<br>
  <input type="radio" name="taal" value="SQL" disabled>SQL
  <hr>
  <p>Nieuwsbrief: <input type="radio" name="nbrief" value="Ja" checked>Ja 
  <input type="radio" name="nbrief" value="Nee">Nee</p>
  <input type="submit" name="submit" value="Verzenden">
 </body>
</html>

Uitproberen

Vorige Volgende