Tutorials
Alles over forms
Alles over forms. Van A tot Z.
Pagina 1
Forms 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 asolute pagina zijn, dezelfde pagina, of een relatieve pagina. dit is een verplicht attribuut
2: method: dit kan get(pagina.php?inputnaam=ingevoerdewaar&...) of post(via de interne url) zijn. Eeen verplicht attribuut is dit.
3: target: als je een iframe hebt kan je de naam van het betreffende iframe invoeren.
4: Name: van toepassing bij javascript.
Voorbeeld: <form name='formpie' target='myiframe' method='post' action='verwerk.php'><!-- onderdelen in de form --> </form>
Goed, nu kunnen we het formulier gaan maken met de <input> tag. Dat kan verschillende attributen hebben:
1: type: password(voor wachtwoorden), text(voor gewone text), button(hoort niet bij het formulier), reset(om het formulier te resetten), submit(om het formulier te verzenden), image(submit knop, alleen dan een plaatje), radio(een bolletje), checkbox(vierkant boxje met een v-tje erin), hidden(niet zichtbaar), file(om bestanden te uploaden)
2: name: de variablenaam in php, dus de naam van het formulier
3: src: alleen van toepassing bij <input type='image'>
4: maxlenght: de maximale lengte van het veld.
5: lenght: de lengte van het veld.
6: value: de waarde van formulier-object
voorbeeld: <input type='password' name='wachtwoord' maxlenght='10' lenght='10' value='wachtwoord'>
Andere formulier elementen:
A: <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='myarea' cols='50' rows='5' wrap='virtual'>Text in textarea
De attributen:
1: action: het cgi of php-script die het formulier verwerkt, dat kan een asolute pagina zijn, dezelfde pagina, of een relatieve pagina. dit is een verplicht attribuut
2: method: dit kan get(pagina.php?inputnaam=ingevoerdewaar&...) of post(via de interne url) zijn. Eeen verplicht attribuut is dit.
3: target: als je een iframe hebt kan je de naam van het betreffende iframe invoeren.
4: Name: van toepassing bij javascript.
Voorbeeld: <form name='formpie' target='myiframe' method='post' action='verwerk.php'><!-- onderdelen in de form --> </form>
Goed, nu kunnen we het formulier gaan maken met de <input> tag. Dat kan verschillende attributen hebben:
1: type: password(voor wachtwoorden), text(voor gewone text), button(hoort niet bij het formulier), reset(om het formulier te resetten), submit(om het formulier te verzenden), image(submit knop, alleen dan een plaatje), radio(een bolletje), checkbox(vierkant boxje met een v-tje erin), hidden(niet zichtbaar), file(om bestanden te uploaden)
2: name: de variablenaam in php, dus de naam van het formulier
3: src: alleen van toepassing bij <input type='image'>
4: maxlenght: de maximale lengte van het veld.
5: lenght: de lengte van het veld.
6: value: de waarde van formulier-object
voorbeeld: <input type='password' name='wachtwoord' maxlenght='10' lenght='10' value='wachtwoord'>
Andere formulier elementen:
A: <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='myarea' cols='50' rows='5' wrap='virtual'>Text in textarea
Pagina 2
Forms verwerken
Op deze pagina gaan we forms verwerken. Om te beginnen een simpel formpje:
$php_self ken je niet, hè? Nou, de variable php_self is gelijk aan de huidige pagina. Dus als je bijvoorbeeld <? echo $php_self; ?> doet, dan print hij de naam van de huidige pagina, bijvoorbeeld jos.php of kat.php.
Omdat het formulier gepost word, kunnen we beter een superglobal gebruiken. Dat is veiliger, én beter! Daarvoor moet je in je php.ini bestand wel de optie "register_globals" aan hebben staat!
Voor de get methode gebruiken we de register_global "$_GET" en voor de post methode gebruiken we de register_global "$_POST". Deze mag je nooit direct aanspreken, anders krijg je errors. Dus nooit <?
echo $_POST;
echo $_GET;
?> coden!!!
Voortaan gaan we in deze tutorial met de register_global variablen werkenb die zo in elkaar zitten: "$_GET['formobject_naam']" of "$_POST['formobject_naam']".
Goed, nu gaan we een gemiddelt formpje maken:
<? if($submit) { // als het formulier verzonden is doen we dit:
if($naam ="") { // checken of veld "naam" wel is ingevult
die("Je moet een naam invullen!");
}
// veld "naam" is ingevult, we gaan de resultaten laten zien:
echo "Ooooow, ik wist niet dat je '".$naam."' heette!";
} else { // het formulier is schijnbaar niet verzonden
?><!-- print het formpje: ---> <form action='<?=$php_self?>' method='post'>Je naam: <input type='text' name='naam'><input type='submit' name='submit' value='Verzend!'></form><!-- formpje geprint :D --> <? } //even de } dichtmaken, anders krijgen we fouten
?>$php_self ken je niet, hè? Nou, de variable php_self is gelijk aan de huidige pagina. Dus als je bijvoorbeeld <? echo $php_self; ?> doet, dan print hij de naam van de huidige pagina, bijvoorbeeld jos.php of kat.php.
Omdat het formulier gepost word, kunnen we beter een superglobal gebruiken. Dat is veiliger, én beter! Daarvoor moet je in je php.ini bestand wel de optie "register_globals" aan hebben staat!
Voor de get methode gebruiken we de register_global "$_GET" en voor de post methode gebruiken we de register_global "$_POST". Deze mag je nooit direct aanspreken, anders krijg je errors. Dus nooit <?
echo $_POST;
echo $_GET;
?> coden!!!
Voortaan gaan we in deze tutorial met de register_global variablen werkenb die zo in elkaar zitten: "$_GET['formobject_naam']" of "$_POST['formobject_naam']".
Goed, nu gaan we een gemiddelt formpje maken:
<?
if(!$verzenden) { //als het formpje NIET verzonden is:
// printen we het formpje uit:
print "<form method='post' action='".$php_self."'>Voornaam: <input type='text' name='voornaam'><br> Je username: <input type='text' name='username'><br> Je passwoord: <input type='password' name='passwoord'><br> Hoe voel jij je: <select name='areyougood'><option value='super'>Super!</option><option value='matig'>Matig</option><option value='slecht'>Slecht</option></select><br><input type='submit' name='verzenden' value='Verwerk!'></form>";
} else { //als het formulier wèl verzonden is
if ($_POST['voornaam'] || $_POST['username'] || $_POST['passwoord'] == "") { // controleren we de boel
die("Je hebt een van de elementen van het formulier niet ingevult!");
}
// print de resultaten:
print "Je ingevoerde gegevens:<br>";
print "Jij heet '".$_POST['voornaam']."' en je username is '"$_POST['username']."' en je passwoord is '".$_POST['passwoord']."'";
print "<br>Hoe voel jij je? Je voelt je ".$_POST['areyougood'];
} // sluit het {} af ?>Pagina 3
Form oefeningen
We hebben net goed geoefend en nu wil ik dat je zelf een form gaat maken. Opgaven:
Opdracht 1: Je moet een contactformpje maken met velden waar je je naam(textveld), leeftijd(dropdown), e-mailadres(textveld), en bricht(textarea) moet kunnen invullen. Alle velden behalve e-mail zijn verplicht. Maak de code zo overzichtelijk mogelijk. Het moet inclusief superglobals zijn. En gebruik de POST methode.
Opdracht 2: Maak een hetzelfde formpje, alleen dan met verzendbevestiging(gebruikt hidden fields). Superglobals ingeschakelt.
Opdracht 3: Doe opdracht 1 over, alleen moet alles in één pagina komen.
Opdracht 4: Doe opdracht 2 over, alleen moet alles in één pagina komen.
*
*
*
*
*
*
*
*
*
Antwoorden:
OPDRACHT 1: |||een.php|||
|||twee.php|||
<?php
if($_POST['submit']) {
if($_POST['naam'] || $_POST['message'] == "") {
echo "Je hebt een van de velden <b>niet</b> gevult.";
exit();
}
mail("[email protected]", "Nieuw bericht", "Hallo! \n Er is een nieuw bericht van ".$_POST['naam']." met het e-mail adres ".$_POST['mail']." \n Dit is zijn bericht: \n ".$_POST['message']." \n \n Groeten, Automailer. \n P.S. Zijn leeftijd is ".$_POST['leeftijd']."\n");
} else {
echo "Vul een formulier in!";
exit();
}
?>
OPDRACHT 2: |||een.php|||
|||twee.php|||
<?php
if($_POST['submit']) {
if($_POST['naam'] || $_POST['message'] == "") {
echo "Je hebt een van de velden <b>niet</b> gevult.";
exit();
}
print "<form action='drie.php' method='post'><input type='hidden' name='naam' value='".$_POST['naam']."'><input type='hidden' name='leeftijd' value='".$_POST['leeftijd']."'><input type='hidden' name='mail' value='".$_POST['mail']."'><input type='hidden' name='bericht' value='".$_POST['message']."'>Weet je zeker dat je door wilt gaan met de naam '".$_POST['naam']."', de e-mail-adres '".$_POST['mail']."' en het bericht '".$POST['message']."'??? <br><input type='button' name='terug' onclick='javascript:history.go(-1);' value='Nee'><input type='submit' name='submit' value='Ja'></form>";
} else {
die("Vul een form in");
}
?>
|||drie.php|||
<?
if($_POST['submit']) {
mail("[email protected]", "Nieuw bericht", "Hallo! \n Er is een nieuw bericht van ".$_POST['naam']." met het e-mail adres ".$_POST['mail']." \n Dit is zijn bericht: \n ".$_POST['message']." \n \n Groeten, Automailer. \n P.S. Zijn leeftijd is ".$_POST['leeftijd']."\n");
} else {
echo "Vul een formulier in!";
exit();
}
?>
de rest is under construction.
Opdracht 1: Je moet een contactformpje maken met velden waar je je naam(textveld), leeftijd(dropdown), e-mailadres(textveld), en bricht(textarea) moet kunnen invullen. Alle velden behalve e-mail zijn verplicht. Maak de code zo overzichtelijk mogelijk. Het moet inclusief superglobals zijn. En gebruik de POST methode.
Opdracht 2: Maak een hetzelfde formpje, alleen dan met verzendbevestiging(gebruikt hidden fields). Superglobals ingeschakelt.
Opdracht 3: Doe opdracht 1 over, alleen moet alles in één pagina komen.
Opdracht 4: Doe opdracht 2 over, alleen moet alles in één pagina komen.
*
*
*
*
*
*
*
*
*
Antwoorden:
OPDRACHT 1: |||een.php|||
<form action='twee.php' method='post'>
Je naam: <input type='text' name='naam'> <br>
Je leeftijd: <select name='leeftijd' height='1'>
<option value='m1'><1</option>
<option value='t2_4'>2 - 4</option>
<option value='t4_6'>4 -6</option>(...op deze manier verder...)
</select><br>
Je e-mail: <input type='text' name='mail'> <br>
Je bericht:<textarea name='message' cols='50' rows='5'><br>
<input type='submit' name='submit' value='Verzend'>
</form>|||twee.php|||
<?php
if($_POST['submit']) {
if($_POST['naam'] || $_POST['message'] == "") {
echo "Je hebt een van de velden <b>niet</b> gevult.";
exit();
}
mail("[email protected]", "Nieuw bericht", "Hallo! \n Er is een nieuw bericht van ".$_POST['naam']." met het e-mail adres ".$_POST['mail']." \n Dit is zijn bericht: \n ".$_POST['message']." \n \n Groeten, Automailer. \n P.S. Zijn leeftijd is ".$_POST['leeftijd']."\n");
} else {
echo "Vul een formulier in!";
exit();
}
?>
OPDRACHT 2: |||een.php|||
<form action='twee.php' method='post'>
Je naam: <input type='text' name='naam'>
<br> Je leeftijd:
<select name='leeftijd' height='1'>
<option value='m1'><1</option>
<option value='t2_4'>2 - 4</option>
<option value='t4_6'>4 -6</option>(...op deze manier verder...)
</select><br>
Je e-mail: <input type='text' name='mail'> <br>
Je bericht:<textarea name='message' cols='50' rows='5'><br>
<input type='submit' name='submit' value='Verzend'>
</form>|||twee.php|||
<?php
if($_POST['submit']) {
if($_POST['naam'] || $_POST['message'] == "") {
echo "Je hebt een van de velden <b>niet</b> gevult.";
exit();
}
print "<form action='drie.php' method='post'><input type='hidden' name='naam' value='".$_POST['naam']."'><input type='hidden' name='leeftijd' value='".$_POST['leeftijd']."'><input type='hidden' name='mail' value='".$_POST['mail']."'><input type='hidden' name='bericht' value='".$_POST['message']."'>Weet je zeker dat je door wilt gaan met de naam '".$_POST['naam']."', de e-mail-adres '".$_POST['mail']."' en het bericht '".$POST['message']."'??? <br><input type='button' name='terug' onclick='javascript:history.go(-1);' value='Nee'><input type='submit' name='submit' value='Ja'></form>";
} else {
die("Vul een form in");
}
?>
|||drie.php|||
<?
if($_POST['submit']) {
mail("[email protected]", "Nieuw bericht", "Hallo! \n Er is een nieuw bericht van ".$_POST['naam']." met het e-mail adres ".$_POST['mail']." \n Dit is zijn bericht: \n ".$_POST['message']." \n \n Groeten, Automailer. \n P.S. Zijn leeftijd is ".$_POST['leeftijd']."\n");
} else {
echo "Vul een formulier in!";
exit();
}
?>
de rest is under construction.
Reacties
0