 Formulare, Vorlage 02 (mit Radiobuttons + Checkboxen)
Diese Vorlage für eine Info-Anforderung per Formular hat neben den Textfeldern Checkboxen und Radiobuttons.
Die drei Felder Email, Name und Text sind Pflichtfelder und werden vor dem Senden auf eine Eingabe (Ist das Feld leer?) überprüft, die Eingabe der Email-Adresse zusätzlich noch auf Gültigkeit.
In den Eingabefeldern steht erklärender Text der automatisch gelöscht wird, sobald das Feld den Focus erhält.
|
|
update 13.08.2008 - CSS-Formatierungen überarbeitet + SPAM-Schutz eingefügt
Aufwand zu Übernahme dieses Beispiels
Den Quellcode entnehmen sie der Textdatei (Link oben in der Kopfzeile) und kopieren die Elemente in ihre HTML-Datei.
- CSS-Anweisungen für die Formatierungen in den Head-Bereich kopieren
- JavaSCript-Code in den Head-Bereich kopieren
- Formulartabelle in den Body-Bereich kopieren
- Email-Adresse anpassen
Vorlage für eine Info-Anforderung
Bitte senden sie mir weitere Informationen zum unten eingetragenen Urlaubsziel zu.
Das war's schon! Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen sie ab hier weiter. Sie können diese Vorlage um einige Formularfelder erweitern, Prüfungen ausklammern oder hinzufügen und die CSS-Angaben ändern.
Erklärung Prüfung der 3 Pflichtfelder:
Beim Absenden (onSubmit) wird die Funktion Pruefen02() aufgerufen, welche die 3 Pflichtfelder überprüft. Ein 'return' im Aufruf sorgt für die Rückkehr zum Formular bei nicht bestandener Prüfung.
... onSubmit="return Pruefen02();"
| Eingabefeld |
Eingabe erforderlich |
Gültigkeitsprüfung |
| Name |
ja |
nein |
| E-Mail |
ja |
ja |
| Nachricht |
ja |
nein |
Bei einer ungültigen Eingabe wird nach der Anzeiger einer Alert-Box das Eingabezeichen automatisch im betreffenden Eingabefeld positioniert.
In dieser Formularvorlage sind außerdem die Funktionen Leerenxxxx() dafür zuständig, dass die Textvorgaben in den Eingabefeldern automatisch geleert werden, sobald die Felder den Fokus erhalten.
Schutz vor Email-Spidern
Ein Script schreibt das einleitende HTML-Tag für das Formular. Der Wert für das Attribut ' action="mailto: xxxx "' der normalerweise eine Emailadresse darstellt, wird dabei mit mehreren 'document.write-Anweisungen in das HTML-Dokument geschrieben.
|
 |
So ist es möglich die Empfänger-Emailadresse zu zerstückeln. Das dient als SPAM-Schutz und soll den Robots das Herausfischen der Emailadresse erschweren.
Siehe dazu:  Basiswissen Spam
Das übliche einleitende Form-Tag, das sie normalerweise im HTML-Dokument notieren
<form action="mailto:JuppZupp@abc.de" method="post" ...
wird ersetzt durch JavaScript Schreibanweisungen. Das JavaScript schreibt nun das einleitende Form-Tag erst bei der Anzeige der Seite durch den Browser in das Dokument:
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form action="mailto:JuppZupp');
document.write('@');
document.write('abc.de"');
document.write(' name="vorlage02" method="post"');
document.write(' onSubmit="return Pruefen02();"');
document.write(' enctype="text/plain">');
//-->
</script>
Anpassungen
1 Emailadresse anpassen
Damit die Post auch ankommt, müssen sie die Emailadresse im Formular anpassen. Diese Anpassung ist zwingend notwendig!
Ersetzen sie im Formularkopf die zwei Segmente der Adresse JuppZupp@abc.de mit den Werten der Emailadresse des Empängers.
<script type="text/javascript" language="JavaScript">
<!--
document.write('<form action="mailto:JuppZupp');
document.write('@');
document.write('abc.de"');
...
2 Prüfungen
Innerhalb der Funktion PruefeObLeer() stehen die Anweisungen zur Überprüfung der Eingaben für alle Felder. Wenn ein Feld nicht geprüft werden soll, es also auch leer bleiben darf, löschen sie einfach den entsprechenden Teil innerhalb der Funktion, wobei xxxxxxx dem Feldnamen entpricht.
von //:: anfang Prüfung xxxxxxx
bis einschließlich //:: ende Prüfung xxxxxxx
3 CSS-Formatiereung
update 10.08.2008 - CSS-Formatierungen überarbeitet
Die Formularelemente hier im Beispiel wurden mit CSS formatiert. Die Zuweisung der Formatierungen erfolgt über eine ID und auch über Unterklassen.
Rand mit Abständ wurde über einen Absatz (<p>) und mit einer zusätzlichen, umschließenden Tabelle realisiert. Diese zusätzliche Formatierung können sie natürlich entfernen.
|
HOME
Demo
ZURÜCK