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):

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

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.

Een checkbox kan op zichzelf staan kan kan ook onderdeel zijn van één vraag met meerdere antwoordmogelijkheden. Berlangrijk om te weten: in tegenstelling tot radiobuttons heeft elke checkbox zijn eigen name. Er kunnen immers meerdere keuzes gemaakt worden. Hierbij ontstaat een probleem als een checkbox niet aangevinkt wordt. Er ontstaan dan ook geen $_POST-variabele op de volgende pagina. Daarom wordt er niet gekeken wat de inhoud van de variabele is (true bij aangevinkt) maar er wordt alleen gekeken of de variabele bestaat. Als deze bestaat dan is hij vanzelf true omdat hij alleen bestaat als iemand het vinkje gezet heeft. Anders bestaat de variabele niet. We geven dat dan ook NIET aan zoals we gewend zijn:

if($_POST['nieuwsbrief']==true)

maar gebruiken we isset. Isset controleert alleen of een variabele bestaat. Bestaat deze dan is het vinkje gezet en dus ook gelijk aan true.

De code voor de checkbox wordt dan als volgt:

if(isset($_POST['nieuwsbrief'])

if(isset($_POST['nieuwsbrief'])
{
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(isset($_POST['pizza'])
  {
    echo 'Je hebt pizza besteld.<br>' ;
  }

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

  if(isset($_POST['shoarma'])
   {
    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 hierboven 'tot leven' komt. Sla de pagina's op in de map opdracht 5.
Breid de pagina index.html zo aan dat er een tweede formulier gemaakt wordt. Een klik op de knop van dat formulier leidt naar kleur1.php. De bedoeling is dat je nu niet alleen de achtergrondkleur, maar ook de 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 nieuw formulier dat leid naar kleur2.php. Op de index-pagina staat nu ook staat een checkbox en de bijbehorende tekst "Ik vind hagelslag wel oké"
Als de checkbox aangevinkt is EN de achtergrondkleur is rood DAN moet er op de pagina kleur2.php in een <h1> grootte verschijnen: "Doe mij maar hagelslag". In alle andere gevallen "Ik ben groot fan van pindakaas!".