HTML Formular Verarbeitung
Werbung
HTML Formular Verarbeitung
HTML Formular
Mit <form>...</form> definieren Sie ein Formular.
Die Methode (method) zur Datenübertragung kann GET oder POST lauten. Mit der GET Methode sind die
Daten in der Adresszeile des Browsers sichtbar.
Die POST Methode übermittelt die Daten in einer speziellen Post-Anfrage.
Die action bestimmt das Skript welches nach dem Submit aufgerufen wird.
Ein HTML Formular welches mit einer Tabelle strukturiert wird
<form name="kontakt" method="POST" action="kontakt.php">
<p>Die mit dem Stern (*) gekennzeichneten Felder sind obligatorisch</p>
<table border="0">
<tr>
<td>Anrede</td>
<td><input type="text" name="Anrede" size="20" /></td>
</tr>
<tr>
<td>Name *</td>
<td><input type="text" name="Nachname" size="20" /></td>
</tr>
<tr>
<td>Vorname *</td>
<td><input type="text" name="Vorname" size="20" /></td>
</tr>
<tr>
<td>E-Mail *</td>
<td><input type="text" name="Email" size="20" /></td>
</tr>
<tr>
<td valign="top">Kommentar</td>
<td><textarea cols="20" rows="7" name="Kommentar" size="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Absenden">.
<input type="reset" name="reset" value="L&ouml;schen"></td>
</tr>
</table>
</form>
Elemente
Ein paar gebräuchliche Elemente für das Formular sind:
Textfelder
Radio Buttons
<input type="text" name="vorname" />
Checkbox
Textbereich
Senden
Einverstanden?: <input type="checkbox" name="agb" value="ok" />
<input type="radio" name="team" value="fcz" /> FCZ
<input type="radio" name="team" value="fca" /> FCA
<textarea cols="20" rows="7" name="Kommentar" size="10"></textarea>
<input type="submit" name="submit" value="Absenden">
HTML Formular Verarbeitung
www.cascara.ch
1
Formular mit JavaScript überprüfen
JavaScript wird im Browser ausgeführt. Damit lassen sich z.B. Daten vor der Übermittlung zum Webserver
überprüfen.
Code für die Überprüfung
Das Skript zur Überprüfung befindet sich im head Bereich der HTML Datei.
<script language="JavaScript" type="text/javascript">
<!-function pruefeformular ( kontakt )
{
// ** START **
if (kontakt.Nachname.value == "") {
alert( "Bitte Name eingeben." );
kontakt.Nachname.focus();
return false ;
}
if (kontakt.Vorname.value == "") {
alert( "Bitte Vorname eingeben." );
kontakt.Vorname.focus();
return false ;
}
// ** END **
return true ;
}
//-->
</script>
Mit if (kontakt.Nachname.value == "") wird überprüft ob des Feld leer ist.
kontakt
ist der Name des Formulars
Nachname heisst das zu überprüfende Feld
HTML Formular bei Submit überprüfen
Bevor das Formular dem Webserver übergeben wird (submit), wird die Funktion pruefeformular mit
onsubmit aufgerufen.
<form name="kontakt" method="POST" action="kontakt.php"
onsubmit="return pruefeformular(this);">
HTML Formular Verarbeitung
www.cascara.ch
2
Formular versenden mit PHP
PHP ist eine beliebte Skriptsprache zur Erstellung von dynamischen Webseiten oder Webanwendungen.
Typischerweise ist sie auf allen Linux und Unix Webservern verfügbar.
Wie JavaScript kann der Code im HTML-Dokument eingebettet werden.
Der Codeblock ist mit <?php …. ?> gekennzeichnet.
Damit der Webserver weiss, dass er Code ausführen soll, müssen die Dateien den Suffix *.php statt *.html
haben, z.B. kontakt.php statt kontakt.html.
<?php
// Sind die Formular Variablen Nachname oder Vorname gesetzt?
// Falls ja: Verarbeite Formular
if(isset($_POST['Nachname']) or isset($_POST['Vorname'])){
// Formulardaten werden in einer HTML Tabelle dargestellt
$formdata="<html><body><h1>Formulardaten</h1><table>";
// Jedes Formularfeld-Paar wird als Name und Inhalt ausgegeben
foreach($_POST as $key=>$value) {
$formdata = $formdata . "<tr><td>" . $key . "</td><td><b>" . $value ."</b></td></tr>";
}
$formdata = $formdata . "</table></body></html>";
// *** Start: Daten anpassen! ***
$receiver = "[email protected]";
$sender = "[email protected]";
// *** Ende: Daten anpassen! ***
$headers = "From: $sender\r\n";
$headers .= "Content-type: text/html\r\n";
$subject = "Kontaktformular - ". $_SERVER['SERVER_NAME'];
$body = $formdata . "<br />*********************************<br/>";
// Ist der E-Mail Versand erfolgreich?
if (mail($receiver, $subject, $body, $headers)){
echo "<p>Besten Dank!</p>";
}
else {
echo "<p>Fehler. Mail Versand war nicht erfolgreich.</p>";
}
}
else {
// Nachname oder Vorname waren leer: Zeige Formular für die Eingabe
?>
<form name="kontakt" method="POST" action="kontakt.php">
Name: <input type="text" name="Nachname" size="20" /><br/>
Vorname: <input type="text" name="Vorname" size="20" /><br/>
<input type="submit" name="submit"><input type="reset" name="reset">
</form>
<?php
}
?>
HTML Formular Verarbeitung
www.cascara.ch
3
