Quelltext des Formulars <code>k-formular.php</code> - Webseitenbau

4.13.3 Quelltext des Formulars `k-formular.php`

1 Allgemeines zum Formular des Kontaktes k-formular.php
2 Angaben im Quelltext
3 Vollständiger Quelltext des Formulars
- a) Pfad der Datei
- b) Quelltext

Technik

Formulare: Formularbox

Formulare: Beschriftung

Formulare: Beschriftung mit Labels

Formulare: Eingabefelder definieren

Formulare: Absenden & Verwerfen

Anwendung

Kontaktformular: Erstellen Kontaktseite

⇧ 1 Allgemeines zum Formular des Kontaktes `k-formular.php`

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/k-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.

Vorbemerkung zu den Variablen in dieser Anleitung

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

⇧ 2 Angaben im Quelltext

a) Formular-Element Anfang <form...>
b) Die Formular-Attribute <form action="..." method="...">
c) Text im Formular <p>...</p>
d) Einzeiliges Formularfeld <label>...</label> <input...>
e) Mehrzeiliges Formularfeld <label>...</label> <textarea>...</textarea>
f) Druckknöpfe für "Absenden" <input type="submit">
g) Formular-Element Ende </form>

↑ a) Formular-Element Anfang `<form...>`

Formular-Element <form>...</form>

Das Formular beginnt mit <form ...> und endet ganz am Schluss mit </form>

Formulare: Formularbox

↑ b) Die Formular-Attribute `<form action="..." method="...">`

Form-Attribute <form action="..."

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.

Form-Attribut <form method="...">

method="post" gibt den Versandmodus an.

Formulare: Formularbox

Beispiel

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

↑ c) Text im Formular `<p>...</p>`

Texteingabe

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

Formulare: Beschriftung

Beispiel

<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>

↑ d) Einzeiliges Formularfeld
`<label>...</label>` `<input...>`

Label für einzeiliges Formularfeld <label></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.

Formulare: Beschriftung mit Labels

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.

Formulare: Eingabefelder definieren

Beispiel

<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>

↑ e) Mehrzeiliges Formularfeld
`<label>...</label>` `<textarea>...</textarea>`

Label für einzeiliges Formularfeld <label></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.

Formulare: Beschriftung mit Labels

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)

Formulare: Eingabefelder definieren

Beispiel

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

↑ f) Druckknöpfe für "Absenden" `<input type="submit">`

Druckknopf zum Absenden: <input type="submit">

<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.

Formulare: Absenden & Verwerfen

Beispiel

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

↑ g) Formular-Element Ende `</form>`

</form> (nicht vergessen!)

Beispiel

</form>

⇧ 3 Vollständiger Quelltext des Formulars

a) Pfad der Datei
b) Quelltext

↑ a) Pfad der Datei

Pfad: /include/kontakt/k-formular.php

Der Quelltext ist in einer "Include"-Datei abgelegt.

↑ b) 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>

↑

4.13.3 Quelltext des Formulars k-formular.php

⇧ 1 Allgemeines zum Formular des Kontaktes k-formular.php

⇧ 2 Angaben im Quelltext

↑ a) Formular-Element Anfang <form...>

↑ b) Die Formular-Attribute <form action="..." method="...">

↑ c) Text im Formular <p>...</p>

↑ d) Einzeiliges Formularfeld <label>...</label> <input...>

↑ e) Mehrzeiliges Formularfeld <label>...</label> <textarea>...</textarea>

↑ f) Druckknöpfe für "Absenden" <input type="submit">

↑ g) Formular-Element Ende </form>

⇧ 3 Vollständiger Quelltext des Formulars

↑ a) Pfad der Datei

↑ b) Quelltext

4.13.3 Quelltext des Formulars `k-formular.php`

⇧ 1 Allgemeines zum Formular des Kontaktes `k-formular.php`

↑ a) Formular-Element Anfang `<form...>`

↑ b) Die Formular-Attribute `<form action="..." method="...">`

↑ c) Text im Formular `<p>...</p>`

↑ d) Einzeiliges Formularfeld
`<label>...</label>` `<input...>`

↑ e) Mehrzeiliges Formularfeld
`<label>...</label>` `<textarea>...</textarea>`

↑ f) Druckknöpfe für "Absenden" `<input type="submit">`

↑ g) Formular-Element Ende `</form>`