Aangezien we allemaal HTML kennen, zal het maken van formulieren heel kort nog eens herhaald worden.
Een formulier in HTML begint altijd met de<form>-tag. Verder wordt er binnen de <form> ook opgegeven naar welke pagina de gegevens versluisd worden en welke methode er gebruikt wordt.
Hieronder een voorbeeld van een formulier:
<?php
if (isset($_POST['naam'])) { // zijn er reeds gegevens?
$naam = $_POST['naam'];
$wachtwoord = $_POST['wachtwoord'];
$geslacht = $_POST['geslacht'];
$kinderen = $_POST['kinderen'];
$ouders = $_POST['ouders'];
$rijbewijs = $_POST['rijbewijs'];
$opmerking = $_POST['opmerking'];
$actie = $_POST['actie'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Persoonlijke fiche</title>
</head>
<body>
<h1>Persoonlijke fiche</h1>
<?php
if (isset($_POST['naam'])) { // zijn er reeds gegevens?
print "<h2>Deze gegevens heeft u doorgestuurd</h2>";
print "<p>Naam: $naam<br />";
print "Wachtwoord: $wachtwoord<br />";
print "Geslacht: $geslacht<br />";
print "Kinderen ten laste: $kinderen<br />";
print "Ouders ten laste: $ouders<br />";
print "Rijbewijs: $rijbewijs<br />";
print "Opmerking: $opmerking<br />";
print "Verborgen veld: $actie</p>";
}
?>
<h2>Vul hier uw gegevens in</h2>
<form action="persoonlijk.php" method="post">
<table>
<tr>
<td>Naam:</td>
<td><input name="naam" type="text" value="<?php print $naam; ?>" /></td>
</tr>
<tr>
<td>Wachtwoord:</td>
<td><input name="wachtwoord" type="password" value="<?php print $wachtwoord; ?>" /></td>
</tr>
<tr>
<td>Geslacht:</td>
<td><label><input name="geslacht" type="radio" value="m" <?php if ($geslacht == "m") print "checked=\"checked\""; ?> />Man</label>
<label><input type="radio" name="geslacht" value="f" <?php if ($geslacht == "f") print "checked=\"checked\""; ?> />Vrouw</label>
</td>
</tr>
<tr>
<td>Ten laste</td>
<td><input name="kinderen" type="checkbox" id="kinderen" <?php if ($kinderen == "on") print "checked=\"checked\""; ?> /><label for="kinderen">Kinderen</label>
<input type="checkbox" name="ouders" id="ouders" <?php if ($ouders == "on") print "checked=\"checked\""; ?> /><label for="ouders">Ouders</label></td>
</tr>
<tr>
<td>Rijbewijs</td>
<td>
<select name="rijbewijs">
<option value="Geen" <?php if ($rijbewijs == "Geen") print "selected=\"selected\""; ?>>Geen</option>
<option value="A3" <?php if ($rijbewijs == "A3") print "selected=\"selected\""; ?>>Bromfietsen</option>
<option value="A2" <?php if ($rijbewijs == "A2") print "selected=\"selected\""; ?>>Motorfiets</option>
<option value="A1" <?php if ($rijbewijs == "A1") print "selected=\"selected\""; ?>>Zware motorfiets</option>
<option value="B" <?php if ($rijbewijs == "B") print "selected=\"selected\""; ?>>Gewone wagen</option>
<option value="C" <?php if ($rijbewijs == "C") print "selected=\"selected\""; ?>>Zware wagen</option>
<option value="D" <?php if ($rijbewijs == "D") print "selected=\"selected\""; ?>>Voertuig voor meer dan 9 personen</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Opmerking:</td>
<td><textarea name="opmerking"><?php print $opmerking; ?></textarea></td>
</tr>
<tr>
<td><input name="actie" type="hidden" value="controle" /></td>
<td><input name="" type="submit" value="Verzenden" /></td>
</tr>
</table>
</form>
</body>
</html>Weergeven
Er zijn dus 3 veelgebruikte tags om gegevens in te voeren:
Bij de input hebben we een aantal types die het soort veld bepalen:
Inputs van het type ‘button’ bestaan ook, maar die worden vooral gebruikt in combinatie met JavaScript.
Bij select geven we de mogelijkheden weer tussen <option>-tags, die de waarde van de select zullen bepalen en de tekst die weergegeven wordt.
Bij het opstellen van een formulier zorgen we er om te beginnen voor, dat elk veld een duidelijke naam (name) heeft, omdat we deze nodig hebben bij het verwerken.
De value is verplicht bij radio, omdat de gebruiker zelf geen waarde kan invullen.
De value van formuliervelden wordt gebruikt om een beginwaarde mee te geven. Deze beginwaarden kunnen met behulp van PHP opdrachten ingevuld worden.
<input name="naam" type="text" value="<?php print $naam; ?>" />.<input name="geslacht" type="radio" value="m" <?php if ($geslacht == "m") print "checked=\"checked\""; ?> /><input name="kinderen" type="checkbox" id="kinderen" <?php if ($kinderen == "on") print "checked=\"checked\""; ?> /><option value="Geen" <?php if ($rijbewijs == "Geen") print "selected=\"selected\""; ?>>Geen</option><textarea name="opmerking"><?php print $opmerking; ?></textarea>Dit is handig om formulieren reeds op voorhand met gegevens te vullen.
Nadat de gebruiker het formulier heeft ingevuld, is het de bedoeling om hier iets mee te doen. In een later stadium zullen we deze gegevens aan een database toevoegen of mailen naar iemand. Nu geven we deze weer op de pagina.
Ten eerste moeten we weten met welke methode de gegevens doorgestuurd zijn: GET of POST? Dit dienen we te weten omdat er 2 variabelen gecreëerd zijn bij het versturen, waarin de formuliergegevens vervat zitten.
Alle parameters krijgen de naam van de input-velden.
Maken we gebruik van de URL om parameters door te sturen, zitten de gegevens altijd in de $_GET-variabele. Bij het gebruik van formulieren hebben we de methode, en dus de variabele, zelf gekozen bij de method van de form-tag.
Nemen we voorgaand formulier, hier is al onze data opgeslagen in de $_POST-variabele. De regels
$naam = $_POST['naam'];
$wachtwoord = $_POST['wachtwoord'];
$geslacht = $_POST['geslacht'];
$kinderen = $_POST['kinderen'];
$ouders = $_POST['ouders'];
$rijbewijs = $_POST['rijbewijs'];
$opmerking = $_POST['opmerking'];
$actie = $_POST['actie'];zorgen voor het opvragen van de opgestuurde formulier gegevens.
Dit geeft al een idee van de mogelijkheden. We zien hier wel nog staan bij geslacht "m" en bij kinderen "on". Als we verder willen werken met deze gegevens zullen we dit moeten "mooier" maken. Dit doen we aan de hand van if- en switch-statements.
Als we in onze textarea gebruik maken van een nieuwe lijn (enter), wordt dit trouwens ook niet verwerkt in de weergave op de volgende pagina. Hierdoor komt alles achter elkaar te staan, in plaats van leesbare tekst te verkrijgen.
En als toetje zullen we controles uitvoeren op de doorgestuurde gegevens: is de naam niet te lang (denk aan de database die komt), is het wachtwoord ingevuld, is een eventueel opgegeven e-mailadres geldig, ...
Bij het versturen van gegevens naar de webserver, kan een malafide gebruiker de invoervelden vullen met uitvoerbare JavaScript code. Deze JavaScript code wordt dan bij het weergeven op een pagina uitgevoerd en kan zo kwalijke gevolgen hebben. Deze techniek noemen we Cross site scripting of kortweg XSS. XSS aanvallen kan je vermijden door de ingevoerde gegevens steeds op correctheid te controleren. Als extra maatregel kan je de invoer filteren met de functie htmlEntities. Het opvragen van de doorgestuurde gegevens wordt dan:
$naam = htmlEntities($_POST['naam'], ENT_QUOTES);
$wachtwoord = htmlEntities($_POST['wachtwoord'], ENT_QUOTES);
$geslacht = htmlEntities($_POST['geslacht'], ENT_QUOTES);
$kinderen = htmlEntities($_POST['kinderen'], ENT_QUOTES);
$ouders = htmlEntities($_POST['ouders'], ENT_QUOTES);
$rijbewijs = htmlEntities($_POST['rijbewijs'], ENT_QUOTES);
$opmerking = htmlEntities($_POST['opmerking'], ENT_QUOTES);
$actie = htmlEntities($_POST['actie'], ENT_QUOTES);