banner

2.2 Meer Formulieren

In de XHTML-cursus heb je nog meer formulier-elementen gehad: naast tekstvakjes en buttons, ken je bijvoorbeeld ook nog radiobuttons (aanklikrondjes), checkbox'en (aankruisvakjes) en tekstarea's (grote tekstvelden).

Om je geheugen nog even op te frissen, herhalen we hier nog even in het kort enkele formulierelementen.


Tekstvakjes

Geef je voornaam:
Geef je voornaam: <input type="text" name="voornaam" />

Het type "text" geeft aan dat het om een tekstvakje gaat. De naam die je hier aan het tekstvakje geeft, kun je later in php gebruiken als variabele.
In dit voorbeeld als: $_POST['voornaam']


Radiobuttons

Kies een kleur:
Rood
Groen
Blauw
Kies een kleur:
<input type="radio" name="kleur" value="red" /> Rood
<input type="radio" name="kleur" value="green" /> Groen
<input type="radio" name="kleur" value="blue" /> Blauw

Je ziet dat de namen (names) bij alle drie de radiobuttons hetzelfde zijn. Ook hier is de naam van de radiobutton ook de de naam van de variabele: in dit geval dus $_POST['kleur']. De inhoud van de variabele hangt af van je kleurkeuze: $_POST['kleur'] kan de volgende waarden bevatten: "red", "green" of "blue".

Het is belangrijk op te merken dat je in plaats van kleurnamen ook kleurcodes mag gebruiken als waarde van de value zoals bijv. #ef9a25.

VOORBEELD

Hier volgt een klein voorbeeldje hoe je de radiobuttons kunt gebruiken om bijvoorbeeld de achtergrondkleur in te stellen. Eerst laten we de code zien voor de invoerpagina (in het voorbeeld: invoeren.php):

Radiobuttons <html>
<head>
  <title>Kies een kleur</title>
</head>
<body>
  <form method="post" action="weergeven.php">
    Kies een kleur:<br />

    <input type="radio" name="kleur" value="red" /> Rood
    <input type="radio" name="kleur" value="green" /> Groen
    <input type="radio" name="kleur" value="blue" /> Blauw <br />

    <input type="submit" value="Ga verder" />
  </form>
</body>
</html>

Je ziet, dat de radiobuttons als name 'kleur' hebben. Als je nu de eerste radiobutton selecteert, krijgt de variabele $_POST['kleur'] de waarde "red". Als je de tweede selecteert, krijgt $_POST['kleur'] de waarde "green". Je snapt nu wel welke waarde $_POST['kleur'] krijgt als je de laatste radiobutton selecteert.

Nu moeten we ervoor zorgen, dat de pagina weergeven.php de achtergrondkleur krijgt die we hebben geselecteerd. Zoals je weet, stel je in XHTML een achtergrondkleur in met de volgende code:

<body style="background-color: yellow;">

In de code hierboven stellen we in, dat de achtergrondkleur geel wordt. We moeten er nu voor zorgen, dat er in plaats van "yellow" de kleur komt te staan die in de variabele $_POST['kleur'] staat. Daarom zetten we op de plaats van "yellow" een klein stukje php, waarin we met behulp van echo de inhoud van de variabele $_POST['kleur'] neerzetten:

<html>
<head>
  <title>weergeven.php</title>
</head>
<body style="background-color: <?php echo $_POST['kleur']; ?>;">

  De achtergrondkleur is nu ingesteld...
  
</body>
</html>

Het kleine stukje php-code dat je ziet zorgt ervoor dat er op die plaats de inhoud van variabele $_POST['kleur'] wordt gezet.


Checkbox (aankruisvakje)

Ja, ik wil de wekelijkse nieuwsbrief ontvangen
<input type="checkbox" name="nieuwsbrief" /> Ja, ik wil de wekelijkse nieuwsbrief ontvangen

Hierboven staat een checkbox beschreven. De variabele $_POST['nieuwsbrief'] is true (waar) als de checkbox is aangevinkt, en false als hij niet is aangevinkt. Je kunt dit met een if-else-constructie controleren:

if($_POST['nieuwsbrief']==true)
{
  echo
'Je bent nu geabonneerd op de wekelijkse nieuwsbrief...';
}
else
{
  echo
'Je hebt ervoor gekozen om de wekelijkse nieuwsbrief niet te ontvangen.';
}

Je kunt zo ook méérdere aankruisvakjes in je formulier zetten.
Let hierbij op het feit dat elke checkbox zijn eigen name heeft!!!
Kijk of je zelf begrijpt wat de code doet.

index.html
<html>
<head>
  <title>Invoeren</title>
</head>
<body>
  <form method="post" action="verwerken.php">
    Welk gerecht wilt u bestellen?<br />
    <input type="checkbox" name="pizza" />Pizza<br />
    <input type="checkbox" name="bami" />Bami<br />
    <input type="checkbox" name="shoarma" />Shoarma<br />
    <input type="submit" value="Bestel!" />
  </form>
</body>
</html>
verwerken.php
<html>
<head>
  <title>Verwerken</title>
</head>
<body>

<?php

  if($_POST['pizza']==true)
  {
    echo
'Je hebt pizza besteld.<br />';
  }

  if($_POST['bami']==true)
  {
    echo
'Je hebt bami besteld.<br />';
  }

  if($_POST['shoarma']==true)
  {
    echo
'Je hebt shoarma besteld.<br />';
  }


?>

</body>
</html>

Select (keuzelijsten)

Kies een kleur:
Kies een kleur:
<select name="kleur">
<option value="red">Rood</option>
<option value="green">Groen</option>
<option value="blue">Blauw</option>
</select>

Dit werkt eigenlijk op eenzelfde manier als de radiobuttons: de optie die je selecteert, bepaalt de waarde van variabele $_POST['kleur'].

OPDRACHT 5

In het grote paarse vak bovenaan deze pagina staat beschreven hoe je met behulp van radiobuttons de achtergrondkleur van een pagina kunt beïnvloeden.

  • Maak een index.html pagina en een kleur.php pagina en zorg ervoor dat het voorbeeld in het paarse vlak 'tot leven' komt. Sla de pagina's op in de map opdracht 5.
  • Pas dit voorbeeld nu zó aan, dat je niet alleen de achtergrondkleur, maar ook de standaard tekstkleur kunt wijzigen. De kleur moet je kunnen selecteren uit een keuzelijst (select) op de index.html-pagina.

  • De tekstkleur kun je instellen in het body-label, en wel met de eigenschap style="color: ".
    Bijvoorbeeld: <body style="color: purple">
  • Breid de index.html-pagina uit met een checkbox en de bijbehorende tekst "Ik ben een man."
    Als de checkbox aangevinkt is dan moet er op de pagina kleur.php in een <h1> grootte verschijnen "Ik ben een man." Anders uiteraard "Ik ben een vrouw.".