Layout

Lektion 5 - Formularfelder

Der E-mailversand ist nur ein Weg, um Daten aus Formularen zu verarbeiten. Man könnte sie unmittelbar auf der Antwortseite verwerten oder auch in eine Datenbank speichern. Deshalb ist es von Vorteil, wenn man die verschiedenen Formularelemente kennt und auswerten kann. Hier nun ein Überblick.

 

5.1 Textfelder

Die Textfelder hatten wir bereits. Mit ihnen kann man Strings übermitteln.

<input type='text' name='Textfeld' size='30'>

Der Wert des Textfeldes wird hier in der Variablen $_POST['Textfeld'] gespeichert.

 

5.2 Textarea

In einer Textarea kann man Zeilenumbrüche erzeugen, die mit übergeben werden.

<textarea name='Textarea' rows='4' cols='20'></textarea>

Wieder wird der Wert der Textarea in der $_POST Variablen mit dem Namen des Namens der Textarea gespeichert.

 

5.3 Versteckte Felder

Über die 'Hidden Fields' kannst du Werte übergeben, die man im Formular nicht sehen kann.

<input type='hidden' name='Versteck' value='ja'>

Den Wert, den die Variable $_POST['Versteck'] haben soll, schreibst du innerhalb value=' '. Das kann zum Beispiel sehr praktisch sein, wenn du anstelle von einem vorgegeben Wert value='ja' eine Variable einfügst value='".$Variable."'.

 

5.4 Radio Button

Radio Button bilden eine Einheit, man kann jeweils nur einen auswählen. Um das zu erreichen müssen sie alle den gleichen Namen tragen.

Wähle 1 Wähle 2 Wähle 3

<input type='radio' name='RadioButton' value='ErsterButton'> Wähle 1
<input type='radio' name='RadioButton' value='ZweiterButton'> Wähle 2
<input type='radio' name='RadioButton' value='DritterButton'> Wähle 3

Der Wert, der nach dem Absenden übergeben wird, steht innerhalb von value=' '. Auch hier wird er über die $_POST Variable mit dem Namen der Button ausgegeben.

 

5.5 Auswahl Listen

In Auswahl Listen oder Dropdown Menüs kann man aus vorgegeben Werten ebenfalls nur eine Auswahl treffen. Wenn viel zur Auswahl steht, könnte es mit Radio Button sehr unübersichtlich werden.

<select name='Auswahl'>

<option selected>Bitte wählen</option>
<option>Januar</option>
<option>Februar</option>
<option>März</option>
<option>April</option>
<option>Mai</option>
<option>Juni</option>
<option>Juli</option>
<option>August</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Dezember</option>

</select>

Du ahnst schon, in welcher Variablen die Werte gespeichert werden? Bei diesem Formular Element gibt es noch eine Besonderheit. Du brauchst keine Werte vorgeben, kannst es aber. Schreibst du z.B. <option value='01'>Januar</option>, dann wird in der Variablen $_POST['Auswahl'] der Wert '01' und nicht 'Januar' gespeichert.

 

5.6 Dateien

Um eine Datei zu übertragen, musst du das Form Tag mit enctype='multipart/form-data' erweitern, also <form action='seite.php' method='POST' enctype='multipart/form-data'>

<input type='file' name='Datei' size='30'>

Nein, dieses Mal steckt der Wert in einer anderen Variablen, so eine Datei ist auch etwas komplizerter als ein String (und deshalb brauchst du gar nicht erst versuchen, ein Bild auf die übliche Weise übers Formular per E-mail zu verschicken, das geht nämlich gar nicht so einfach).

 

5.6.1 Informationen über Dateien

Informationen über die Datei erhältst du über die Variable $_FILES['Datei']['tmp_name'] Nützliche Informationen sind zB

// Format ausfindig machen, wenn du $Info via echo ausgibst:
// 1 steht für *.gif
// 2 steht für *.jpg

$Info = exif_imagetype($_FILES['Datei']['tmp_name']);

if ($Info == 1) {
    echo "Das Bild ist im *.gif Format";
}


// Die Maße der Datei werden in einem Array gespeichert, dazu unten mehr.

$Daten = getimagesize($_FILES['Datei']['tmp_name']);

// Im Index 0 steckt die Breite

if ($Daten[0] > 300) {
    echo "Verkleiner dein Bild auf höchstens 300 Pixel Breite.";
}

// Im Index 1 steckt die Höhe

if ($Daten[1] > 500) {
    echo "Verkleiner dein Bild auf höchstens 500 Pixel Höhe.";
}


// Größe der Datei in Byte
// Steckt in der Variablen $_FILES['Datei']['size']

if ($_FILES['Datei']['size'] > 50000) {
    echo "Verkleiner die Datei auf höchstens 50 KB.";
}

5.6.2 E-mail Versand

Und nun zum E-Mail Versand. Zunächst einmal muss abgefragt werden, ob überhaupt eine Datei eingefügt worden ist. Wenn ja, wird die eMail mit Datei verschickt, wenn nicht, ohne. Die Funktion trim() entfernt hier unnötige Leerzeichen vor und nach dem Pfad zur Datei, beim Rest schließt du einfach die Augen, während du es kopierst und einfügst.

// Wie gehabt E-Mail Formatieren

$Mitteilung = "Name: ".$_POST['Name']."\n".
    "E-mail: ".$_POST['E-mail']."\n\n".
    $_POST['Nachricht'];

if (isset($_FILES['Datei']['name']) && trim($_FILES['Datei']['name']) != "") {

    // Datei einlesen und codieren:
    $datei_content = fread(fopen($_FILES['Datei']['tmp_name'],"r"),filesize($_FILES['Datei']['tmp_name']));
    $datei_content = chunk_split(base64_encode($datei_content),76,"\n");

    // Boundary festlegen:
    $boundary = md5(uniqid(rand()));

    $mail_header .= "MIME-Version: 1.0\n";
    $mail_header .= "Content-Type: multipart/mixed; boundary=\"".$boundary."\"\n";
    $mail_header .= "This is a multi-part message in MIME format.\n";

    $mail_header .= "--".$boundary;
    $mail_header .= "\nContent-Type: text/plain";
    $mail_header .= "\nContent-Transfer-Encoding: 8bit";
    $mail_header .= "\n\n".$Mitteilung;

    $mail_header .= "\n--".$boundary;
    $mail_header .= "\nContent-Type: ".$_FILES['Datei']['type']."; name=\"".$_FILES['Datei']['name']."\"";
    $mail_header .= "\nContent-Transfer-Encoding: base64";
    $mail_header .= "\nContent-Disposition: attachment; filename=\"".$_FILES['Datei']['name']."\"";
    $mail_header .= "\n\n".$datei_content;
    $mail_header .= "\n--".$boundary."--";

    mail("ich@email.de", "Mein Betreff", "" ,$mail_header);


} else {

    mail("ich@email.de", "Mein Betreff", $Mitteilung);

}

 

5.7 Submit Button

Mit dem Submit Button kannst du nicht nur dein Formuar abschicken, sondern auch Werte übergeben.

<input type='submit' name='Abschicken' value='Go!'>

Denn klickst du diesen Button, nimmt die Variable $_POST['Abschicken'] den Wert 'Go!' an.

 

5.8 Checkboxes

Checkboxen sind ähnlich wie Radio Button, nur, dass man mehrere Felder auswählen kann. Die Werte, die übergeben werden sollen, schreibst du innerhalb von value=' '

Comics Manga Magazine Bücher

<input type='checkbox' name='Box' value='Comics'> Comics
<input type='checkbox' name='Box' value='Manga'> Manga
<input type='checkbox' name='Box' value='Magazine'> Magazine
<input type='checkbox' name='Box' value='Buecher'> Bücher

Da sie auch eine Einheit bilden, müssen sie alle den gleichen Namen tragen. Doch wie sollen in einer Variablen beliebig viele Werte gespeichert werden?

 

5.8.1 Arrays

Arrays können diese beliebig vielen Daten speichern. Man könnte sie mit einem Ordner vergleichen, in dem Werte abgelegt werden. Arbeiten wir zunächst etwas damit.

// Wir erzeugen ein Array

$Namen = array ("Hans", "Rosa", "Marie", "Lena", "Hugo", "Heidi");

Dieses Array trägt den Namen 'Namen' und besitzt 6 Elemente. Ausgelesen werden können sie anhand ihres Index, ihrem Platz in der Reihe. Eine wichtige Besonderheit ist, dass das erste Element "Hans" den Index 0 hat, da die Zählung in Arrays immer mit 0 beginnt. Oben beim Lesen der Maßen eines Bildes hast du schon gesehen, wie man die Elemente auslesen kann. Dort wurde ein Array erzeugt an dessen Index 0 die Breite des Bildes gespeichert wurde. Du schreibst einfach den Index in eckigen Klammern hinter dem Namen des Arrays:

// Auslesen einzelner Elemente

echo $Namen[0]." ";
echo $Namen[1]." ";
echo $Namen[2]." ";
echo $Namen[3]." ";
echo $Namen[4]." ";
echo $Namen[5];

Man kann einem Array auch im Nachhinein noch Elemente hinzufügen, das funktioniert ganz ähnlich wie eine normale Wertzuweisung einer Variablen, muss das Array als Array kenntlich gemacht werden, und das funktioniert dieses Mal mit leeren eckigen Klammern. Das Element wird automatisch ans Ende angeheftet.

// Einfügen von Elementen

$Namen[] = "Helga I";

$NeuerName = "Uwe";
$Namen[] = $NeuerName;

Und was man einfügen kann, kann man auch wieder löschen. Die funktioniert auch mit dem Zugriff auf den Index und mit der Funktion unset();

// Löschen von Elementen

unset ($Namen[2]);

$DieID = 4;
unset ($Namen[$DieID]);

Wenn du Elemente löschst, behalten alle anderen Elemente ihren Index, sie rücken also nicht nach. Du kannst auch gezielt Elemente an bestimmten Indexes einfügen. Dafür schreibst du einfach wieder den gewünschten Index innerhalb der eckigen Klammern.

 

5.8.2 Die foreach - Schleife

Manchmal weiß man nicht, wie viele Elemente ein Array angenommen hat und es wäre auch zu umständlich, jedes Mal jedes Element einzeln aufzurufen, um es auszugeben. Deshalb machen wir es nun mit einer Schleife. Die foreach Schleife wird so oft im Programmcode durchlaufen, bis es keine Elemente mehr zum Ausgeben im Array gibt. Erst danach wird das Lesen des weiteren Codes fortgesetzt.

foreach ($Namen as $Element) {
     echo $Element." ";
}

Jedes einzelne Array Element wird nun nacheinander in der Variablen $Element gespeichert und innerhalb der Schleife ausgegeben. Ist die Schleife nicht beim letzten verfügbaren Element angekommen, springt der Ablauf des Codes wieder in den Kopf der foreach Schleife und sie wird erneut durchlaufen.

 

5.8.3 Ausgabe von Checked-Boxes Werten

Die Werte der angeklickten Checkboxes sollen nun also in einem Array gespeichert werden, das wir anschließend mit der foreach-Schleife auslesen werden. Hier ist der Name der $_POST Variablen auch der Name der Checkbox, also $_POST['Box']. Da $_POST['Box'] aber ein Array werden soll, dem mehrere Werte zugewiesen werden, müssen wir sie auch als Array kennzeichnen. Das passiert noch im HTML Formular.

<input type='checkbox' name='Box[]' value='Comics'> Comics
<input type='checkbox' name='Box[]' value='Manga'> Manga
<input type='checkbox' name='Box[]' value='Magazine'> Magazine
<input type='checkbox' name='Box[]' value='Buecher'> Bücher

Beim Absenden werden nun die jeweiligen Werte innerhalb des Arrays $_POST['Box'] abgelegt. Wurde ein Feld nicht markiert, ist der Wert leer. Du könntest die Elemente auch hier einzeln auslesen, da du weißt, dass es 4 Elemente sind, denen jeweils der Reihe nach automatisch die Indexes 0 bis 3 zugewiesen wurden.

echo $_POST['Box'][0]." ";
echo $_POST['Box'][1]." ";
echo $_POST['Box'][2]." ";
echo $_POST['Box'][3];

Aber weniger umständlich ist es mit der foreach-Schleife:

foreach ($_POST['Box'] as $Element) {
     echo $Element." ";
}

 

5.8.4 Checkboxes und E-mail Versand

Wenn du dich noch an die letzten Lektionen erinnerst, hatten wir die Nachricht der E-mail vor dem Einfügen in die E-mail formatiert, damit alle Daten des Formulars dort hinein konnten. Die einzelnen Teile hatten wir mit dem Punkt Operator aneinander gehangen. Die foreach-Schleife kannst du nicht einfach mit mit diesem Operator anhängen, da eine neue Anweisung startet und das Skript vorher mit einem Semikolon beendet werden müsste. Deshalb muss der Schleifendurchlauf außerhalb unserer Variablen $Mitteilung erfolgen. Um die Werte daraus zu erhalten bedienen wir uns einer Hilfsvariablen.

foreach ($_POST['Box'] as $Element) {
     $Auswahl = $Auswahl.$Element." ";
}

$Mitteilung = "Absender: ".$_POST['Name']."\n".
    "E-mail: ".$_POST['E-mail']."\n".
    "Auswahl: ".$Auswahl."\n".
    $_POST['Nachricht'];

Bei jedem Schleifendurchlauf wird ein neues Element an die Variable $Auswahl gehangen. Damit sie nicht einfach wieder überschrieben wird, muss ihr bisheriger Inhalt selbst jedesmal wieder mitübergeben werden. An den bisherigen Werten wird mittels des Punkt Operators das neue Element $Element angehangen. Anschließend fügen wir noch ein Leerzeichen an, damit man die Werte in der E-mail besser lesen kann. Da der Quelltext erst weiter gelesen wird, wenn der Schleifendurchlauf beendet ist, kannst du die gutbestückte Variable $Auswahl nun mit in deinem E-mail Text aufnehmen.


hr

5.9 Übungen

5.9.1 Erweiter dein Formular aus den vergangenen Lektionen, so dass dir auch eine Datei geschickt werden kann, die aber nicht größer als 100 KB sein darf.

5.9.2 Du bist stolzer Besitzer eines Webgames und möchtest unbedingt einen Shop auf deiner Webeite einbauen.

  • Suche dir aus, was du verkaufen möchtest und lade die Bilder - mindestens 5 - auf deinen Server hoch.
  • Füge die Artikel auf eine php-Seite ein, schreibe einen Preis dran und versehe alles mit einer Checkbox, die je als Wert den Namen des Artikels und seinen Preis hat.
  • Füge Felder für den Namen des Bestellers und für seine eMail Adresse ein.
  • Frage ihn außerdem durch Radio Button, ob er sofort bezahlen möchte oder es sich anschreiben lassen möchte.
  • Gib je eine Fehlermeldung aus, wenn:
    • Kein Name angegeben wurde
    • Die eMail Adresse nicht angegeben wurde
    • Die Zahlungsart nicht gewählt wurde
    • Kein Artikel gewählt wurde
  • Lasse dir die Bestellung per eMail zukommen und gib auf der Antwortseite eine Bestätigung und die Bestellung noch einmal aus.
« zurück Inhalt | Fragen       Kurs weiter »
Layout