Das Kontaktformular erstellen
Beginnen wir nun damit, das HTML-Formular zu erstellen. Öffnen wir dazu im Editor
eine neue Datei und geben wir die ein HTML-Dokument üblichen Tags für das Grundgerüst ein:
<html>
<head>
<title>Ein Kontaktformular</title>
</head>
<body>
</body>
</html>
|
Listing 4.1: Das Grundgerüst der HTML-Datei
In <body>- Container definieren wir, beginnend mit dem <form> -Tag,
die Formularfelder. Das Formular soll Eingabefelder für den Vornamen, den
Nachnamen und die E-Mail- Adresse enthalten und außerdem ein Auswahlfeld,
mit dem der Besucher die Möglichkeit hat, eine der in der Liste angebotenen
Optionen auszuwählen.
Setzen wir den Cursor unterhalb des <body> -Tags und geben wir den
HTML-Text so ein wie in Listing 4.2 zu sehen. Speichern wir das Dokument
dann als eine HTML-Datei, also beispielsweise als kontakt.html.
<html>
<head>
<title>Ein Kontaktformular</title>
</head>
<body>
<p><h3>Geben Sie Ihre Daten ein!</h3>
<form action="antwort.php" method=post>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="101">Vorname</td>
<td width="299" height="30"><input name="textfield" type="text" size="20"></td>
</tr>
<tr>
<td>Nachname</td>
<td height="30"><input name="textfield2" type="text" size="20"> </td>
</tr>
<tr>
<td>Email</td>
<td height="30"><input name="textfield3" type="text" size="30"></td>
</tr>
<tr>
<td colspan="2"><strong> Wie hat Ihnen die Seite gefallen ? <br>
</strong></td>
</tr>
<tr>
<td>Bewertung</td>
<td height="15"><select size=1 name=“rank“>
<Option value=”keine Angabe”>keine Angabe</option>
<Option value=”sehr gut”>sehr gut</option>
<Option value=”gut”>gut</option>
<Option value=”nicht so gut”>nicht so gut</option>
</select></td>
</tr>
<tr>
<td> </td>
<td height="30" align="left" valign="bottom"><input type="submit" name="Submit" value="Senden"></td>
</tr>
</table>
</form>
</body>
</html>
|
Listing 4.2: Das HTML-Script für ein einfaches Formular mit drei Textfeldern und einem
Auswahlfeld
Erläuterung des Scripts
Mit dem <form> -Tag beginnen wir das Formular. Der Wert des dann folgenden
Arguments action= gibt dem Server an, welches PHP-Script die Daten aus dem Formular
erhalten wird. Die Eingabe method=post bestimmt die Methode, mit der die Daten
weitergegeben werden. Die alternative Methode wäre get . Über die Unterschiede
zwischen beiden Methoden lesen wir im nächsten Abschnitt. Mit dem Tag
< input type=text > wird ein Textfeld erzeugt, das Attribut size legt die sichtbare
Größe des Textfeldes fest. Durch <br> wird ein Zeilenumbruch erzeugt, sodass das
Formular insgesamt übersichtlicher aussehen wird.
Legen wir unser Augenmerk besonders auf das Attribut name , beispielsweise
name=“vorname“
Der hier festgelegt Wert ("vorname") wird als Variable an das PHP-Script, das
die Daten verarbeitet, weitergegeben. PHP identifiziert damit den Wert des
Formularelements. Es ist also wichtig, diese Name zu erinnern und konsistent zu benutzen.
Vorsicht: PHP ist bei der Groß- und Kleinschreibung so sensibel wie ein deutscher
Gymnasiallehrer – nicht hinsichtlich korrekter Schreibweise, aber hinsichtlich der
gleichbleibenden Verwendung von großen oder kleinen Buchstaben! Es unterscheidet
also zwischen Vorname und vorname.
Das Drop-Down-Menü
Nach den drei Textfeldern wird mit dem Element < select > eine Auswahlbox
in Form eines Drop-Down-Menüs definiert, damit der geneigte Besucher eine
Meinung abgeben kann. Die Werte der Auswahlbox werden einzeln mit
<option value=“übermittelter Wert“>Beschriftung</option>
eingegeben. Wird für eine Option keine value festgelegt, wird die Beschriftung
übermittelt. Das schließende </option> –Tag ist laut HTML-Spezifikation nicht
zwingend erforderlich, aber der Vollständigkeit halber verwenden wir es hier dennoch.
Auch dieses Element braucht einen Namen, damit PHP darauf zurückgreifen kann.
Im Beispiel wurde rank verwendet. Da < select > als Container dient, muss es durch
</ select > geschlossen werden.
Beachten wir hier die erste Option keine Angabe. Sofern durch das Attribut selected
keine Vorauswahl einer Option getroffen wurde, wird die erste Option automatisch im
Feld angezeigt und wird – sofern der User keine andere Wahl trifft – beim Abschicken
des Formulars übermittelt. Aus diesem grund sind wir gut beraten, wenn wir eine Option
standardmäßig aktivieren. So ist es möglich zu erkennen, ob der User aktiv eine Auswahl
getroffen hat oder nicht, sodass spätere Auswertungen nicht verfälscht werden.
Die Sendeschaltfläche
Last but not least enthält das Formular eine Sendeschaltfläche. Diese Schaltfläche
verwendet normalerweise den in value festgelegten Wert als Bezeichner. Wird als value
nichts eingegeben, erscheint der Standardtext Submit oder Abfrage absenden – je nach
Browser und Ländereinstellung. Vergessen wir nicht, das Formular mit einem schließendem
</form> –Tag zu beenden.
Das von uns entworfene Formular ist, wie wir sehen werden oder bereits am HTML-Text
erkennen, relativ schlicht enthält wenig Layout-Elemente. Wir können selbstverständlich
an dem Aussehen des Formulars feilen, beispielsweise durch die Verwendung einer Tabelle,
der Formatierung des Textes etc. Wir wollen uns jedoch auf die Vermittlung von PHP
konzentrieren und verzichten von daher in den meisten Fällen bzw. Beispielen auf eine
ausgeklügelte Layout-Technik.
Überprüfen des Formulars
Sobald wir das HTML-Formular erstellt und gespeichert haben, können wir im Browser
einen Blick darauf werfen. Rufen wir einfach unseren Standard-Browser und die entsprechende
Datei. Der Browser müsste eine Seite ausgeben, die mehr oder minder aussieht wie in Bild 4.1.
| |
| |
| |
http://localhost/index.php |
|
|
| |
|
|
|
Bild 4.1: Das Kontaktformular im Browser
Kleiner Hinweis: Wir bieten auch ein Pagrenkservice an. <<Keine Angst anmelden kostet NIX!>>
RANKING CHARTS
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20
|
