Tutorials
Formulieren
Een verbeterde versie van: Alles over forms.
Pagina 1
Formulieren maken
Op deze pagina gaan we leren forms te maken.
Ten eerste hebben we een tag om het begin van een form aan te kondigen: de <form> tag.
De attributen:
1: action: het cgi of php-script die het formulier verwerkt, dat kan een andere pagina zijn, maar ook dezelfde. dit is een verplicht attribuut
2: method: dit kan get (bijv. pagina.php?inputnaam=ingevoerdewaar&...) of post (via de interne url) zijn. Als je dit niet invult, is dit automatisch get.
3: target: als je een iframe hebt kan je de naam van het betreffende iframe invoeren.
4: Name: De naam, bijv van toepassing bij javascript.
Voorbeeld:
<form name='form' target='iframe' method='post' action='verwerk.php'>
<!-- Onderdelen in form -->
</form>
Goed, nu kunnen we het formulier gaan maken met de <input> tag. Deze tag kan verschillende attributen hebben:
1: type:
password (voor wachtwoorden, dan krijg je in plaats van text ***)
text (voor gewone text)
reset (om het formulier helemaal leeg te maken)
submit (om het formulier te verzenden)
image (submit knop, alleen dan een plaatje)
radio (een aankruisbolletje)
checkbox (vierkant boxje die je aan kan kruizen)
hidden (verborgen veld)
file (bestanden uploaden)
2: name: de naam van het veld
3: src: alleen van toepassing bij type image, bijv: <input type='image' src='plaatje.gif' />
4: maxlenght: de maximale lengte van het veld.
5: lenght: de breedte van het veld, hoe breedt het op het beeld weergeven wordt.
6: value: De voorgezette waarde van het veld.
voorbeeld:
<input type='hidden' name='verborgen' maxlenght='10' lenght='10' value='verborgen' />
Dit geeft een verborgen veld, dat je niet ziet, met als waarde: Verborgen.
Andere formulier element:
<textarea>, deze sluit je altijd af met </textarea>, een groot textvak met de volgende attributen:
1: name: hetzelfde als de name attribuut bij de <input> tag
2: cols: de lengte (in karakters)
3: rows: de hoogte(in regels)
4: wrap: het type van wrappen(bijv. virtual)
Voorbeeld: <textarea name='textarea' cols='50' rows='5' wrap='virtual'>De voorgezette text</textarea>
Ten eerste hebben we een tag om het begin van een form aan te kondigen: de <form> tag.
De attributen:
1: action: het cgi of php-script die het formulier verwerkt, dat kan een andere pagina zijn, maar ook dezelfde. dit is een verplicht attribuut
2: method: dit kan get (bijv. pagina.php?inputnaam=ingevoerdewaar&...) of post (via de interne url) zijn. Als je dit niet invult, is dit automatisch get.
3: target: als je een iframe hebt kan je de naam van het betreffende iframe invoeren.
4: Name: De naam, bijv van toepassing bij javascript.
Voorbeeld:
<form name='form' target='iframe' method='post' action='verwerk.php'>
<!-- Onderdelen in form -->
</form>
Goed, nu kunnen we het formulier gaan maken met de <input> tag. Deze tag kan verschillende attributen hebben:
1: type:
password (voor wachtwoorden, dan krijg je in plaats van text ***)
text (voor gewone text)
reset (om het formulier helemaal leeg te maken)
submit (om het formulier te verzenden)
image (submit knop, alleen dan een plaatje)
radio (een aankruisbolletje)
checkbox (vierkant boxje die je aan kan kruizen)
hidden (verborgen veld)
file (bestanden uploaden)
2: name: de naam van het veld
3: src: alleen van toepassing bij type image, bijv: <input type='image' src='plaatje.gif' />
4: maxlenght: de maximale lengte van het veld.
5: lenght: de breedte van het veld, hoe breedt het op het beeld weergeven wordt.
6: value: De voorgezette waarde van het veld.
voorbeeld:
<input type='hidden' name='verborgen' maxlenght='10' lenght='10' value='verborgen' />
Dit geeft een verborgen veld, dat je niet ziet, met als waarde: Verborgen.
Andere formulier element:
<textarea>, deze sluit je altijd af met </textarea>, een groot textvak met de volgende attributen:
1: name: hetzelfde als de name attribuut bij de <input> tag
2: cols: de lengte (in karakters)
3: rows: de hoogte(in regels)
4: wrap: het type van wrappen(bijv. virtual)
Voorbeeld: <textarea name='textarea' cols='50' rows='5' wrap='virtual'>De voorgezette text</textarea>
Pagina 2
Formulieren verzenden
Op deze pagina gaan we formulieren verwerken.
Om te beginnen een simpel formpuliertje:
Omdat het formulier gepost word, kan je beter superglobals gebruiken.
Dit is veiliger, én beter!
Voor de get methode gebruiken je de superglobal $_GET[''] en voor de post methode gebruiken we de superglobal $_POST[''].
Superglobals werken zo: "$_GET['naamvanveld']" of "$_POST['naamvanveld']".
Goed, nu gaan we een ander formpuliertje maken:
Om te beginnen een simpel formpuliertje:
<?
if(isset($_POST['submit'])) // Kijken of het formulier verzonden is, doormiddel van isset($_POST[''])
{
if($_POST['naam'] == "") // Kijken of het veld 'naam' ingevuld is.
{
echo "Je moet een naam invullen!";
}
else
{
// veld "naam" is ingevult, we gaan de naam laten zien:
echo "Leuk dat je het formulier ingevuld hebt, ".$naam."!";
}
}
else // als het formulier nog niet verzonden is:
{
?>
<!-- weergeef het formulier: --->
<form method='post'>
Je naam:
<input type='text' name='naam' value='Je naam' /><br />
<input type='submit' name='submit' value='Verzend!' />
</form>
<!-- formulier afgelopen -->
<?
}
?>
Omdat het formulier gepost word, kan je beter superglobals gebruiken.
Dit is veiliger, én beter!
Voor de get methode gebruiken je de superglobal $_GET[''] en voor de post methode gebruiken we de superglobal $_POST[''].
Superglobals werken zo: "$_GET['naamvanveld']" of "$_POST['naamvanveld']".
Goed, nu gaan we een ander formpuliertje maken:
<?
if(!isset($_POST['verzenden'])) //als het formpulier NIET verzonden is:
{
?>
<form method='post'>
Voornaam:
<input type='text' name='voornaam' /><br />
Je gebruikersnaam:
<input type='text' name='gebruikersnaam' /><br />
Je wachtwoord:
<input type='password' name='wachtwoord' /><br />
Hoe voel jij je:
<select name='stemming'>
<option value='super'>Super!</option>
<option value='matig'>Matig</option>
<option value='slecht'>Slecht</option>
</select><br />
<input type='submit' name='verzenden' value='Verzenden!' />
</form>
<?
}
else //als het formulier wèl verzonden is
{
if($_POST['voornaam'] || $_POST['gebruikersnaam'] || $_POST['wachtwoord'] == "") // controleren of alles ingevuld is
{
echo "Je hebt een van de velden van het formulier niet ingevult!";
}
else
{
// weergeef de resultaten:
echo "Je ingevoerde gegevens:<br />";
echo "Jij heet ".$_POST['voornaam'].", je gebruikersnaam is "$_POST['gebruikersnaam'];
echo " en je wachtwoord is ".$_POST['wachtwoord'];
echo "<br />Hoe voel jij je? Je voelt je ".$_POST['stemming'];
}
}
?>
Pagina 3
Contact script
Nu hebben we formulieren gemaakt, verwerkt, maar nu wil je zo ook nog naar iemand mailen.
Dat kan, doormiddel van de mail(); functie.
Als je meer over de mail(); functie wil weten, kijk dan bij PHP Functies -> mail();
In dit voorbeeld maken we een formulier met:
- Naam
- Email
- Onderwerp
- Bericht
Deze informatie gaan we versturen naar de verzender, en de maker.
Dat kan, doormiddel van de mail(); functie.
Als je meer over de mail(); functie wil weten, kijk dan bij PHP Functies -> mail();
In dit voorbeeld maken we een formulier met:
- Naam
- Onderwerp
- Bericht
Deze informatie gaan we versturen naar de verzender, en de maker.
<?php
$naar = '[email protected]'; // Verander hier [email protected] naar uw eigen email adress.
if(isset($_POST['verzend'])) // Als het bericht verzonden is
{
if($_POST['naam'] == '') // Als het veld naam leeg is
{
echo "U heeft geen naam ingevuld!<br />";
echo "<a href='javascript:history.back();' style='color: black; text-decoration:none;'>Klik hier om terug te gaan!</a>";
}
elseif($_POST['email'] == '') // Als het veld email leeg is.
{
echo "U heeft geen e-mail adress ingevuld!<br />";
echo "<a href='javascript:history.back();' style='color: black; text-decoration:none;'>Klik hier om terug te gaan!</a>";
}
elseif($_POST['bericht'] == '') // Als er geen bericht is ingevuld.
{
echo "U heeft geen bericht ingevuld!<br />";
echo "<a href='javascript:history.back();' style='color: black; text-decoration:none;'>Klik hier om terug te gaan!</a>";
}
elseif($_POST['onderwerp'] == '') // Als er geen onderwerp is ingevuld
{
echo "U heeft geen onderwerp ingevuld!<br />";
echo "<a href='javascript:history.back();' style='color: black; text-decoration:none;'>Klik hier om terug te gaan!</a>";
}
else
{
if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$", $_POST["email"])) // Als het email adress niet klopt
{
echo "U heeft geen geldig e-mail adress ingevuld!<br />";
echo "<a href='javascript:history.back();' style='color: black; text-decoration:none;'>Klik hier om terug te gaan!</a>";
}
else
{
// Mailen:
$bericht = "
<html>
<head>
<title>Contact fomulier</title>
</head>
<body>
<table border='0' width='50%'>
<tr>
<td width='20%'>Uw naam:</td>
<td>".$_POST['naam']."</td>
</tr>
<tr>
<td width='20%'>Uw e-mail adress:</td>
<td>".$_POST['email']."</td>
</tr>
<tr>
<td width='20%'>Het onderwerp:</td>
<td>".$_POST['onderwerp']."</td>
</tr>
<tr>
<td width='20%'>Het Bericht:</td>
<td>".$_POST['bericht']."</td>
</tr>
</table>
</body>
</html>
";
$headers = "MIME-Version: 1.0\r\n";
$headers.= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers.= "From: ".$_POST['naam']." <".$_POST['email'].">\r\n";
// Headers, zodat we html kunnen gebruiken in de mail, en van wie de mail komt.
if(mail($naar, $_POST['onderwerp'],$bericht,$headers)) // Als de mail naar de maker is verstuurd
{
echo 'Uw bericht is succesvol verstuurd!';
}
else // Anders
{
echo 'Uw bericht is helaas niet verstuurd.';
}
$ond = "Uw bericht, verzonden naar". $naar;
if(mail($naar, $ond,$bericht,$headers)) // Als de mail naar de verzender is verstuurd
{
echo 'Uw bericht is succesvol verstuurd!';
}
else // Anders
{
echo 'Uw bericht is helaas niet verstuurd.';
}
}
}
}
else
{
?>
<!-- Formulier weergeven -->
<table border='0' width='50%'>
<form method='post'>
<tr>
<td align='right' width='30%'><b>Contact Systeem</b></td>
</tr>
<tr>
<td width='20%'>Naam:</td>
<td><input type='text' name='naam' /></td>
</tr>
<tr>
<td width='20%'>E-mail adress:</td>
<td><input type='text' name='email' /></td>
</tr>
<tr>
<td width='20%'>Het onderwerp:</td>
<td><input type='text' name='onderwerp' /></td>
</tr>
<tr>
<td width='20%'>Het Bericht:</td>
<td><textarea name='bericht'>Uw Bericht</textarea></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' value='Verzend' name='verzend' /></td>
</tr>
</form>
</table>
<?php
}
?>
Pagina 4
Einde
Dit is alweer het einde..
Ik hoop dat je het handig vondt, en er wat aan gehad hebt, maar ik heb het meeste toch van de tutorial van Sebastiaan.
Vragen en opmerking zijn altijd welkom, zodat ik het kan verbeteren
Ik hoop dat je het handig vondt, en er wat aan gehad hebt, maar ik heb het meeste toch van de tutorial van Sebastiaan.
Vragen en opmerking zijn altijd welkom, zodat ik het kan verbeteren
Reacties
0