4.10.1 Formular-Beispiel: Demonstration

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

-

⇧ 1 Quelltext des Formulars

<form action="#anzeige_browser" method="post">
<p></p>
 <input type="hidden" name="senden" value="1">
 <label for="name">Name</label>
 <input type="text" name="name" id="name" size="25"
  tabindex="56" value=""><br>
 <label for="betreff">Betreff</label>
 <input type="text" name="betreff" id="betreff" size="25"
  tabindex="56" value=""><br>

 <label for="nachricht">Nachricht</label>
 <textarea name="nachricht" id="nachricht" cols="40"
  rows="7" tabindex="57" class="nachricht">
  </textarea><br>

 <!--<label for="name">Name</label>
 <input type="text" name="name" id="name" size="25"
  tabindex="58" value="">-->
			
 <label for="email">E-Mail</label>
 <input type="text" name="email" id="email"
 size="25" tabindex="59"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value="optional"
 >

 <!--<label for="adresse">Adresse</label>
 <input type="text" name="adresse" id="adresse"
 size="25" tabindex="60"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value=""
 >

 <label for="telefon">Telefon</label>
 <input type="text" name="telefon" id="telefon"
 size="25" tabindex="61"
 onfocus="if(this.value=='optional'){this.value='';
 this.style.color='#000'}"
 onblur="if(this.value==''){this.value='optional';
 this.style.color='#a3a3a3';}"
 class="optional" value=""
 >-->

 <input class="senden" type="submit" value="Senden"
 tabindex="65" >
</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) Eingabe im Quelltext für die Umwandlung der Variablen

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

-

⇧ 4 Quelltext zur Anzeige

<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 in diesem Beispiel keine Weiterleitung - 
";
?>
</div>

-

⇧ 4 Anzeige im Browser

-

⇧ 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