Formular - Feedback

	S t a n d a r d Formular

Standard-Formular

Beispiel:

So könnte ein Formular aussehen, welches sämtliche zur Verfügung stehenden Elemente, wie Eingabefelder, Auswahl-Listen, Checkboxen usw. verwendet.

F e e d b a c k zur Mouseover-Seite

Ein Formular wird durch die Tags <form> und</form>erstellt. Innerhalb dieser HTML-Befehle stehen dann bestimmte Formularelemente, wie

INPUT/TEXT - Einzeilige Textfelder (zur Texteingabe)
TEXTAREA - Mehrzeilige Textfelder (zur Texteingabe)
SELECT/OPTION -Listeneinträge ( Standardmässig nur Auswahl eines Eintrages)
INPUT/CHECKBOX - Checkboxen (quadratisch, Auswahl auch mehrfacher Boxen)
INPUT/RADIO - Radio Buttons (rund, Auswahl nur eines der Buttons )
SUBMIT - Sende-Button
RESET - Lösch-Button

Alle Formularelemente sowie auch das Formular selber sollten mit dem Attribut name (name=" ") einen internen, selbst zu vergebenen Namen bekommen, damit die einzelnen Felder in einer Antwort-Mail zugeordnet werden können und auch eine mögliche Fehlerüberprüfung per JavaScript vor Versenden des Formulars stattfinden kann.

Mit Hilfe einer Tabelle oder/und Setzen von geschützten Leerzeichen ( ) kann man die Formularelemente besser ausrichten, wenn man mag.

Man muss natürlich nicht alle Formular-Felder (Texteingabe, Listen, Checkbox usw.) verwenden - minimal ist aber ein Element (das umgebendene "Form-Tag" vorausgesetzt) plus der Absende-Button (Submit) zwingend.

Hier die Elemente im Einzelnen mit den wichtigsten (und sinnvollen) Attributen, weiter unten dann der komplette Quelltext:

FORM (Formular)

<form name="mailer" action="mailto:deine.mail@gmx.de" method="post" enctype="text/plain">...Formular-Inhalt...</form>

name: Name des Formulars
action: Empfänger-Email (eingeleitet durch mailto:)
method: Versandart
enctype: Konvertierung deutscher Umlaute und Sonderzeichen

INPUT/TEXT - Einzeilige Textfelder (zur Texteingabe)

Dein Name:<input type="Text" name="d_name" value=" " size="20" maxlength="50" >

Deine E-Mail:<input type="Text" name="d_mail" value=" " size="20" maxlength="50" >

name: Name des Eingabefeldes
size: Anzeigenlänge in Zeichen (sichtbar)
maxlength: Anzeigenlänge in Zeichen (intern, d.h. ist size kleiner als maxlength wird autom. gescrollt.
value: Mögliche Textvorbelegung

TEXTAREA - Mehrzeilige Textfelder (zur Texteingabe)

Kommentar: <textarea name="comment" cols="30" rows="5" ></textarea>

name: Name des Eingabefeldes
cols: Anzeigengrösse des Feldes (sichtbar, in Spalten, nach rechts)
rows: Anzeigengrösse des Feldes (sichtbar, in Reihen, nach unten)

rows

cols

SELECT/OPTION -Auswahl-Listeneinträge ( Standardmässig nur Auswahl eines Eintrages)

Die Note :
<select name="bewertung_note" >
<option >Bitte auswählen
<option >1=super, klasse, weiter so.
<option >2=gute homepage.
<option >3=zufriedenstellend, im prinzip OK.
<option >4=noch zu verbessern.
<option >5=ups..ich bin den tränen nahe.
<option >6=auweia...dabeisein ist alles.
</select>

INPUT/CHECKBOX - Checkboxen (quadratisch, Auswahl auch mehrfacher Boxen)

Zu verbessern:
<input type="Checkbox" name="verbesserung_inh" value="inhalt">Inhalt
<input type="Checkbox" name="verbesserung_lay" value="layout">Layout
<input type="Checkbox" name="verbesserung_langs" value="langsam">Zu langsam
<input type="Checkbox" name="verbesserung_nichts" value="nichts">nichts

name: beliebiger Name der Checkbox.
Ausnahme: Sind mehrere Checkbox-Fragen und demnach auch mehrere Checkbox-Gruppen vorhanden (in diesem "Beispiel-Feedback-Formular" ja nicht - da nur eine Frage/Thematik - "Zu verbessern?"-), so sind für zusammenhängende Gruppen von Checkboxen auch gleiche Namen vergeben.
value: Interner Bezeichnerwert, wichtig um in Antwortmail die angekreuzten Checkboxen zuzusortieren.

INPUT/RADIO - Radio Buttons(rund, Auswahl nur eines Buttons)

Möchtest Du per Email über neue Inhalte informiert werden?
<input type="Radio" name="ra_info" value="yes">ja
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Radio" name="ra_info" value="no">nein

name: Name der Radio Buttons.
Bei den Radio Buttons ist zwingend (!) auch nur bei einer Frage bzw. auch nur einer zusammenhängenden Gruppe von Radio Buttons (so wie bei diesem Beispiel - "Möchtest Du über neue Inhalte informiert werden ?") der gleiche Name zu vergeben. Das hängt damit zusammen, dass im Gegensatz zu den Checkboxen hier nur eine Auswahl (ein Ankreuzen) möglich ist. Bei mehreren Fragen , d.h. mehrere zusammenhängende Radio Buttons-Gruppen ist für jede der Gruppen ein unterschiedlicher, aber innerhalb der Gruppe gleiche Name zu setzen.
value: Interner Bezeichnerwert, wichtig um in Antwortmail die angekreuzten Radio Buttons zuzusortieren.

SUBMIT-BUTTON (Absende-Button)

<input type="Submit" value="Abschicken" >

value: sichtbare Beschriftung des Buttons (hier Abschicken)

form action=" "></form>

RESET-BUTTON (Lösch-Button)

<input type="Reset" value="Löschen" >

value: sichtbare Beschriftung des Buttons (hier Löschen), man sieht auch Beschriftungen wie Zurücksetzen oder Abbrechen.

QUELLTEXT, das gesamte Formular eingebettet in eine HTML-Seite:

<html>
<head>
<title>Formular - Feedback </title>
</head>

<body  bgcolor="white" text="black">

<div align="center">F e e d b a c k zur Mouseover-Seite</div>

<form name="mailer" action="mailto:deine.mail@deinmailanbieter.de" method="post"
enctype="text/plain">
<table  width="100%" border="1" cellpadding="10" cellspacing="0" >
<tr>
<td >
Dein Name:&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Text" name="d_name" value="" size="20" maxlength="50" >
<br>
Deine E-Mail:&nbsp;
<input type="Text" name="d_mail" value="" size="20" maxlength="50" >
<br>
Die Note :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="bewertung_note" >
<option >Bitte auswählen
<option >1=super, klasse, weiter so.
<option >2=gute homepage.
<option >3=zufriedenstellend, im prinzip OK.
<option >4=noch zu verbessern.
<option >5=ups..ich bin den tränen nahe.
<option >6=auweia...dabeisein ist alles.
</select>
<br>
<br>
Zu verbessern:
<input type="Checkbox" name="verbesserung" value="inhalt">
Inhalt&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Checkbox" name="verbesserung" value="layout">
Layout&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Checkbox" name="verbesserung" value="langsam">
Zu langsam&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Checkbox" name="verbesserung" value="nichts">
nichts
<br>
<br>
Möchtest Du per Email über neue Inhalte informiert werden?
<input type="Radio" name="ra_info" value="yes">ja
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Radio" name="ra_info" value="no">nein
<br>
<br>
Kommentar:&nbsp;&nbsp;&nbsp;
<textarea name="comment" cols="30" rows="5"  ></textarea></td></tr>
<tr>
<td align="center" ><input type="Reset"  value="Löschen">
&nbsp;&nbsp;&nbsp;<input type="Submit"  value="Abschicken"  ></td>
</tr>
</table>
</form>

</body>
</html>

Wenn das Formular z.B. wie folgt ausgefüllt wird ...

... dann sieht die Nachricht welche der Empfänger per Mail erhält, wie folgt aus:

d_name=willi bienchen
d_mail=w.bienchen@wunderland.de
bewertung_note=5=ups..ich bin den tränen nahe.
verbesserung_inh=inhalt
verbesserung_langs=langsam
ra_info=no
comment=hallo, ich wünsche mir noch mehr dhtml-beispiele....
bis dann,
willi b.

weiter »