E-Book Startseite Karteikarten-Programm
0

Allgemeines

Kontaktformulare, oder auch andere Formulare, werden in HTML mit den form-Tags gekennzeichnet. Im form-Tag werden meistens 3 Attribute gesetzt. Das Attribut action gibt an, welches Server-Skript das Formular ausführt (z. B. eine PHP- oder CGI-Datei). Das method-Attribut gibt an, um was für eine Methode es sich handelt. Gültige Werte sind die von PHP bekannten Methoden "POST" und "GET" (als Attributwert bitte Kleinbuchstaben verwenden). Das dritte und letzte Attribut ist enctype. enctype muss gesetzt werden, wenn Dateien übertragen werden. Als Wert muss dann "multipart/form-data" gesetzt werden. Hier ein Beispiel für die form-Tags.

<form action="kontakt.php" method="post">
 
</form>

Eingabefelder

Für Eingabefelder verwenden wir den einteiligen HTML-Tag input. Der input-Tag hat einige Attribute. Wichtig für uns sind type, name und evtl. value. type legt den Typ des input-Tags fest, hier können wir bspw. text (Zeicheninhalt) oder number (Nummer) notieren. Im name-Attribut legen wir den Namen des Eingabefelds fest, über welchen wir später z. B. mit Hilfe der POST- und GET-Variablen den value-Wert abrufen können. Nun kommen wir auch gleich zum nächsten Attribut: value. Mit value können wir einen Wert festlegen, der im Eingabefeld stehen soll. Übrigens: HTML5 arbeitet eng mit JavaScript zusammen. Wenn Sie ein Eingabefeld als Pflichtfeld markieren wollen setzen Sie das Attribut required mit dem Wert required. Wird nun auf den Absende-Button gerückt, ohne dass das Feld einen Inhalt hat, so wird eine Meldung durch JavaScript angezeigt (nicht alle Browser unterstützten dies). Bitte beachten Sie, dass Pflichtfelder immer auch durch das PHP- oder CGI-Skript geprüft werden sollten.

<input type="text" name="name" />
<input type="number" name="alter" value="18" />

Auswahlliste

Für eine Auswahlliste benötigen wir ein select-Tag und mehrere option-Tags. Im select-Tag verwenden wir wieder ein name-Attribut. Innerhalb der option-Tags können wir den anzuzeigenden Text eingeben. Verwenden wir bspw. eine Auswahlliste mit dem name-Attribut-Wert "liste" und den zwei Auswahlmöglichkeiten "blau" und "rot", selektieren den Eintrag "blau" und fragen über PHP ab, welchen Wert die POST- bzw. GET-Variable "liste" hat, so erhalten wir den Wert "blau".

<select name="geschlecht">
  <option>m&auml;nnlich</option>
  <option>weiblich</option>
  <option>keine Angabe</option>
</select>

Radio-Buttons

Radio-Buttons bilden eine Gruppe von Auswahlmöglichkeiten. Ein typisches Beispiel für Radio-Buttons wäre z. B. die Auswahl vom Geschlecht oder von der Anrede. Um eine Gruppe von Radio-Buttons zu erstellen, benötigen diese Radio-Buttons alle denselben Werte im name-Attribut. Innerhalb des value-Attributs können wir den zu übergebenden Wert angeben. Achtung: Der value-Wert bei Radio-Buttons wird nicht angezeigt, die Bezeichnung muss also zusätzlich notiert werden (siehe Beispiel). Für Radio-Buttons verwenden wir ebenfalls das einteilige input-Element, jedoch mit dem Wert radio im type-Attribut.

<input type="radio" name="anrede" value="Herr" />Herr
<br />
<input type="radio" name="anrede" value="Frau" />Frau

Checkboxen

Mit Checkboxen können Kontrollen abgeschlossen werden (z. B. AGB gelesen). Auch für Checkboxen verwenden wir das einteilige Element input. Der Wert des type-Attributs ist "checkbox". Eine Checkbox wird mit der isset-Funktion in PHP überprüft. Wurde ein Hacken in die Checkbox gesetzt, so gibt die isset-Funktion true zurück, da die Variable der Checkbox gesetzt wurde. Ist kein Hacken vorhanden, so gibt die isset-Funtkion false zurück, da die Variable eben nicht gesetzt wurde.

<input type="checkbox" name="kopie" /> Ich m&ouml;chte eine Kopie dieser E-Mail erhalten!

Buttons

Jedes Formular hat mindestens einen Button: den submit-Button. Der submit-Button, ruft die Datei auf, welche im action-Attribut angegeben ist und übergibt die GET- oder POST-Variablen. Der zweite Button, der nicht unbedingt notwendig ist, ist der reset-Button. Wird der Reset-Button gedrückt, so werden alle Eingabefelder, Radio-Buttons, Auswahllisten und Checkboxen zurückgesetzt. Für beide dieser Buttons benötigen wir das input-Element mit dem Typ "submit" oder "reset". Der Zeicheninhalt im Button wird mit dem value-Attribut festgelegt.

<input type="reset" value="Abbrechen" />
<br />
<input type="submit" value="Versenden" />

Textnachricht

Für längere Texte bzw. die sogennanten Nachrichtenfelder, verwenden wir ein spezielles Element: textarea. Im textarea-Element verwenden wir ebenfalls das name-Attribut. Um die Größe festzulegen können wir die Attribute rows (Zeilen » Höhe) und cols (Spalten » Breite) festlegen. Übrigens auch bei Eingabefeldern lässt sich so eine ähnliche Eigenschaft verwenden: Hier wird jedoch für die Breite das Attribut size verwendet. Die Höhe kann nicht bestimmt werden. Möchte man einen vordefinierten Text festlegen, wird dies nicht mit dem value-Attribut gemacht, sondern der Text wird zwischen den textarea-Tags notiert.

<textarea name="nachricht" rows="10" cols="16">
 
</textarea>

Beispiel in PHP

Um nun das Ganze noch mals zu einem funktionsfähigen Skript zusammenzufassen haben wir ein kleines Beispiel für ein Kontaktformular erstellt. Das erste Skript zeigt ein HTML-Formular mit Anrede-, Vorname-, Nachname. und einem Nachrichten-Feld. Im 2. Dokument (PHP) haben wir eine Tabelle erstelt um die Daten übersichtlich darzustellen. Da Zeilenumbrüche im textarea-Element als "\r\n" gekennzeichnet werden, ersetzen wir diese im HTML-PHP-Dokument durch "<br />".

<form action="kontaktphp.php" method="post">
  <table cellpadding="5">
    <tr>
      <td><b>Anrede:</b></td>
      <td><input type="radio" name="anrede" value="Herr" checked="checked" />Herr
       &nbsp;&nbsp;&nbsp;
       <input type="radio" name="anrede" value="Frau" />Frau</td>
    </tr>
    <tr>
      <td><b>Vorname:</b></td>
      <td><input type="text" name="vorname" required="required" /></td>
    </tr>
    <tr>
      <td><b>Nachname:</b></td>
      <td><input type="text" name="nachname" required="required" /></td>
    </tr>
    <tr>
      <td><b>Nachricht:</b></td>
      <td><textarea name="nachricht" required="required" rows="10" cols="16"></textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="Absenden" /></td>
    </tr>
  </table>
</form>
<table cellpadding="5" border="1">
  <tr>
    <td><b>Anrede:</b></td>
    <td><?php echo $_POST['anrede']; ?></td>
  </tr>
  <tr>
    <td><b>Vorname:</b></td>
    <td><?php echo isset($_POST['vorname']) ? $_POST['vorname'] : ""; ?></td>
  </tr>
  <tr>
    <td><b>Nachname:</b></td>
    <td><?php echo isset($_POST['nachname']) ? $_POST['nachname'] : ""; ?></td>
  </tr>
  <tr>
    <td><b>Nachricht:</b></td>
    <td><?php echo str_replace("\r\n", "<br />", isset($_POST['nachricht']) ? $_POST['nachricht'] : ""); ?></td>
  </tr>
</table>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de