4.8.3 Quelltext des Formulars include/kontakt/formular.php

• 1 Allgemein
• 2 Angaben im Formular

-

1 Allgemeines zum Formular

Inhalt und Zweck:

• Das Formular dient dem Anwender zur Eingabe der Angaben, die er per E-Mail senden will.
• Normalerweise werden folgende Felder zur Verfügung gestellt: Name und E-Mail Adresse des Absenders, den Betreff und natürlich seine Mitteilung.
• Im Quelltext dieses Formulars ist auch angegeben, wie und wohin die Einträge weitergeleitet werden.
• Mit dem Drücken der "Senden"-Taste werden die Eingaben mit der "Post"-Methode an die verarbeitende Datei weitergeleitet.

Dateityp:

• Der Quelltext ist in einer "Include"-Datei /include/kontakt/formular.php.
• Diese Datei hat keine HTML-Strukturelemente sondern enthält nur den Text des Formulars.
• Die Include-Datei wird anschliessend in ein HTML-Dolument eingelesen und ist dann Bestandteil dieser HTML-Dokumentes.
• Beim Kontaktformular wird diese Include-Datei in das HTML-Dokument der Kontaktseite und zur Instruktion in die vorliegende Anleitung eingelesen.

-

2 Angaben im Formular

a) Vorbemerkungen

• Bei allen Labels wurden die Namen mit dem Zusatz "k_..." versehen, um nicht mit gleichlautenden Namen von anderen Anwendungen verwechselt zu werden.

b) Erklärungen zu den Angaben im Quelltext

1) Formularbeginn: <form action="..." method="...">

• Das Formulars beginnt mit <form ...> und endet ganz am Schluss mit </form>
• action="../kontakt/k-senden1.php" gibt den Dateinamen des Dokumentes an, in welches die Eingaben geschrieben werden, damit sie dort weiterverarbeitet werden können.
• #k_form Dies ist ein Zusatz nach dem Dateinamen zur Angabe der Stelle, an der die Eingabe im Dokument nach dem Senden sichtbar gemacht werden soll.
• <a name="k_form">2) Anzeige der gespeicherten Variablen</a>
  So wird die Stelle gekennzeichnet, an der die Eingabe sichtbar gemacht werden soll.
  Diese Stelle wird nach drücken der "Senden"-Taste aufgerufen.
• method="post" gibt den Versandmodus an.

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

2) Texteingabe: <p> ... </p>

• Die Beschriftung ist normaler HTML-Text und steht zwischen <p> und </p>. (Auch Zeilenumbrüche werden mit dem normalen HTML-Code <br> erzeugt.)

<p>
< style="color:#3333FF;">
<span style="font-size:1.1em; font-weight:bold;">
Kontaktformular</span><br>
Senden Sie dem Autor mit diesem Formular ein Mail!
</p>
<hr>

3a) "Label" für einzeiliges Formularfeld:
<label for="...">...</label>

• <label></label> Dies ist der Anfangs- und End-Tag des Labels
• label for="..." Zwischen den Klammern wird der Name des Labels angegeben.
• <label ... >Name</label> Die Beschriftung des Formularfeldes wid zwischen diese beiden Tags geschrieben.

3b) "Input" für einzeiliges Formularfeld:
<input type="text" name="..." id="..." size="..." tabindex="..." value="...">

• <input...> hat keinen Endtag.
• type="text" Es handelt sich um eine Texteingabe
• name="..." Angabe des Namens des Labels
• id="..." Dieser Eintrag ist notwendig, wenn ein Label für die Beschriftung verwendet wird, da nur so das Label diesem Input zugeordnet wird.
• size="..." Angabe der Breite des Feldes in Anzahl Zeichen.
• maxlength="..." Angabe der maximalen Zeichen.
• tabindex="..." Angabe der Tabulgatorposition
• value="" Hier kann ein Voreintrag in das Feld gemacht werden.

<label for="k_name">Name</label>
<input type="text" name="k_name" id="k_name"
size="40" maxlength="40" tabindex="1" value=""><br>

<label for="k_email">E-Mail </label>
<input type="text" name="k_email" id="k_email"
size="40" maxlength="40" tabindex="2" value=""><br>

<label for="k_betreff">Betrifft</label>
<input type="text" name="k_betreff" id="k_betreff"
size="40" maxlength="60" tabindex="3" value=""><br>

4a) "Label" für Mehrzeiliges Formularfeld:
<label for="...">...</label>

• <label...></label> Dies ist der Anfangs- und End-Tag des Labels
• label for="..." Zwischen den Klammern wird der Name des Labels angegeben.
• <label ...>Mitteilung</label>
  Die Beschriftung des mehrzeiligen Formularfeldes wird zwischen diese beiden Tags eingegeben.

4b) "Textarea" für mehrzeiliges Formularfeld:
<textarea name="..." id="..." cols="..." rows="..." tabindex="..."></textarea>

• <textarea ... ... </textarea> Dieser Tag hat einen Endtag.
• <textarea name="..." Angabe des Namens des Feldes.
• id="..." Stylesheet "Identifier"-Angabe, siehe Stylesheet
• cols="..." Angabe der Breite des Feldes in Anzahl Zeichen.
• rows="..." Angabe der Höhe des Feldes in Anzahl Zeilen.
• Achtung: maxlength="..." ist bei mehrzeiligen Feldern nicht zulässig!!!
• tabindex="..." Mit dem Tabulaor soll diese Stelle an ... Stelle angesprungen werden können.
• </textarea> End-Tag des Textfeldes (nicht vergessen)

<label for="k_mitteilung">Mitteilung</label>
<textarea name="k_mitteilung" id="k_mitteilung"
cols="35" rows="12" tabindex="4"></textarea><br>

5) Druckknöpfe (buttons) zum Absenden:
<input type="submit" value="..." tabindex="...">

• <input ...> Bemerkung: Dieser Tag hat keinen End-Tag.
• input [type=submit] Mit dieser "Type"-Formatierung wird der Sende-Knopfe formatiert.
• type="submit" Der Typ gibt die Funktion, die beim drücken dieses Knopfs ausgeführt wird.
• value="Senden" Beschriftungstext des Knopfs
• tabindex="..."> Hier ist ein grosser Wert angegeben, da der Tabulator erst ganz am Schluss auf dieses Feld kommen soll.

<input type="submit" value="Senden" tabindex="5">

6) Ende des Formulars

• </form> (nicht vergessen!)

</form>

c) Vollständiger Quelltext

<form action="../kontakt/k-senden1.php" method="post">
<p style="color:#3333FF;">
<span style="font-size:1.1em; font-weight:bold;">
Kontaktformular</span><br>
Senden Sie mit diesem Formular dem Autor  ein Mail!
</p>
<hr>
<label for="k_name">Ihr Name</label>
<input type="text" name="k_name" id="k_name"
size="40" maxlength="60" tabindex="1" value=""><br>

<label for="k_email">Ihre E-Mail</label>
<input type="text" name="k_email" id="k_email"
size="40" maxlength="60" tabindex="2" value=""><br><br>

<label for="k_betreff">Betrifft</label>
<input type="text" name="k_betreff" id="k_betreff"
size="40" maxlength="100" tabindex="3" value=""><br>

<label for="k_mitteilung">Mitteilung</label>
<textarea name="k_mitteilung" id="k_mitteilung"
cols="45" rows="8" tabindex="4"></textarea><br>

<label class="clickbox" for="k_kopie"></label>
<input class="clickbox" type="checkbox" 
name="k_kopie" id="k_kopie" value="k_kopie"> 
Wünschen Sie eine Kopie an Ihre Mail Adresse?<br>

<input type="submit" value="Senden" tabindex="5">
</form>

↑