W3C - Webseitenbau - A. Brandenberger

4.10.2 Beispiel: W3C-Formular

1 Allgemein
2 Quelltext des Formulars
2 Anzeige des Formulars im Browser
3 Umwandlung der Variablen
4 Anzeige der Variablen im Browser
5 Bestätigung bei erfolgreicher Sendung

⇧ 1 Allgemein

Aufbau

Der Aufbau dieses Formulars basiert auf dem Beispiel der W3C-Recommendations, wurde aber mit verschiedenen Elementen ergänzt.
Das Formular dient zur Erfassung und Senden von Eingaben.
Die Formatierung des Formulars erfolgt tabellenlos mit einem Stylesheet.
Die Daten werden anschliessend im Dokument angezeigt, aber nicht per E-Mail weitergeleitet.

Herkunft

W3C Recommendation -
HTML 4.01 Specification: de Einführung in Formulare

⇧ 2 Quelltext des Formulars

<form action="../php/verarbeiten.php#b_form" 
method="post">

<p style="color:#3333FF;">
<span style="font-size:1.1em; font-weight:bold;">
Testen Sie bitte das Formular mit drücken auf 
"Absenden"!</span><br>
Diese Eingaben werden nur im Dokument wiedergegeben
<br>(nicht per E-Mail weitergeleitet)
</p>
  
<label for="b_name">Name</label>
<input type="text" name="b_name" id="b_name"
size="32" maxlength="40" tabindex="11" 
value=""><br>

<label for="b_email">E-Mail</label>
<input type="text" name="b_email" id="b_email"
size="32" maxlength="40" tabindex="13"
 value="Ihre E-Mail Adresse"><br>

<label for="b_land">Land</label>
<select name="b_land" id="b_land" 
size="1" tabindex="12">
<option></option>
<option>Deutschland</option>
<option>Frankreich</option>
<option>Österreich</option>
<option>Schweiz</option>
<option>siehe Textfeld</option><
/select><br>

<label class="clickbox" for="b_maskulin">
Geschlecht</label>
<input class="clickbox" type="radio" 
name="b_geschlecht" 
id="b_maskulin" value="b_maskulin"> 
Maskulin<br>

<label class="clickbox" for="b_feminin"><
/label>
<input class="clickbox" type="radio" 
name="b_geschlecht" 
id="b_feminin" value="b_feminin"> 
Feminin<br>

<label for="b_bemerkungen">
Bemerkungen</label>
<input type="text" name="b_bemerkungen" 
id="b_bemerkungen"
size="35" maxlength="80" tabindex="14" 
value=""><br>

<label class="clickbox" for="b_raucher">
Eigenschaften</label>
<input class="clickbox" type="checkbox" 
name="b_eigenschaft" 
id="b_raucher" value="b_raucher"> 
Raucher<br>

<label class="clickbox" for="b_autofahrer"><
/label>
<input class="clickbox" type="checkbox" 
name="b_eigenschaft" 
id="b_autofahrer" value="b_autofahrer"> 
Autofahrer<br>

<label class="clickbox" 
for="b_motorradfahrer"></label>
<input class="clickbox" type="checkbox" 
name="b_eigenschaft" 
id="b_motorradfahrer" value="b_motorradfahrer">
Motorradfahrer<br>

<label class="clickbox" for="b_htmlfreak"><
/label>
<input class="clickbox" type="checkbox" 
name="b_eigenschaft" 
id="b_htmlfreak" value="b_htmlfreak"> 
HTML-Freak<br>

<label for="b_andere">Hobbies</label>
<input type="text" name="b_andere" id="b_andere"
size="35" maxlength="80" tabindex="14" 
value=""><br>

<label for="b_nachricht1">Nachricht 1<
/label>
<textarea name="b_nachricht1" id="b_nachricht1"
cols="35" rows="5" tabindex="16">
Hier können Sie zum testen Text eingeben<
/textarea><br>

<label for="b_nachricht2">Nachricht 2<
/label>
<textarea name="b_nachricht2" id="b_nachricht2"
cols="35" rows="5" tabindex="16">
Hier können Sie zum testen weiteren Text 
eingeben<
/textarea><br>

<input type="submit" value="Absenden"
tabindex="16">
<input type="reset" value="Zurücksetzen" 
tabindex="17">
</form>

⇧ 2 Anzeige des Formulars im Browser

⇧ 3 Umwandlung der Variablen

Prinzip

Die Variablen werden als "Post-Variablen" gesendet. Da wir im Dokument "normale" Variablen verwenden möchten, müssen die Post-Variablen in normale Variablen umgewandelt werden.
Auf der Original-Website wurde dies nicht vorgesehen, da eine Bestätigung, des erfolgreichen Versandes (ohne Widerholung des Textes) gegeben wird.
Die Umwandlung und Anzeige der Variablen ist hier nur zur Instruktion.

1) Umwandlung der Post-Variablen in normale Variablen

<?php
$name = $_POST ['name'];
$betreff = $_POST ['betreff'];
$nachricht = $_POST ['nachricht'];
$email = $_POST ['email'] 
?>

⇧ 4 Anzeige der Variablen im Browser

1) Eingabe im Quelltext damit die Variablen im Browser angezeigt werden

<div class="box-gelb">
<span style="font-size:1.2em; font-weight:bold;
color:red">Posteingang</span><br>
<?php
echo "
Sie haben folgende Angaben gemacht:<br>
<hr>
Name: $name<br>
Betreff: $betreff<br>
Nachricht: $nachricht<br>
E-Mail: $email
<hr>
- Es erfolgt in diesem Beispiel keine Weiterleitung - 
";
?>
</div>

2) Anzeige im Browser des Absenders

Posteingang
Sie haben folgende Angaben gemacht:

Name:
Betreff:
Nachricht:
E-Mail:

- Es erfolgtin diesem Beispiel keine Weiterleitung -

⇧ 5 Bestätigung bei erfolgreicher Sendung

Prinzip:

Der Benutzer erhält nach erfolgter Sendung seiner Mitteilung eine Betstätigung, dass seine Mitteilung erfolgreich gesandt wurde.

1) Im Stylesheet wird folgender Eintrag für #content gegeben

#content {
background:#fff;
margin:20px 10px 10px 10em;
padding:1.2em;
border:solid 2px #c03;
font-size:0.8em;
}

2) Eintrag im Quelltext

<div id="content">
<!-- Hier beginnt der Seiteninhalt -->
		
Ihre Mitteilung wurde gesendet!<br><br>
Vielen Dank für Ihre Nachricht.

<!-- Hier endet der Seiteninhalt -->
</div>

3) Anzeige im Browser des Absenders

Ihre Mitteilung wurde gesendet!

Vielen Dank für Ihre Nachricht.

↑