 CAPTCHA 02-A - in ein Formular einbinden (graph. Captcha)
Sie möchten ihr Formular um ein grafisches CAPTCHA erweitern. Dazu soll die CAPCHA-Frage angezeigt und ein Formularfeld für den Eintrag der Antwort bereitgestellt werden. Eine JavaScript-Funktion soll die Gültigkeit des Eintrags prüfen.
|
|
grafisches Captcha einbinden
Dieses CAPTCHA arbeitet ohne PHP und externen Dienst
Mein grafisches Semi-CAPTCHA lässt sich recht komfortabel auch nachträglich in ihr vorhandenes Formular 'einbauen'.
Sie müssen keine Formular-Elemente oder CSS-Formatierungen notieren oder den Formularnamen berücksichtigen. JavaScript übernimmt diesen Job.
CAPTCHAs sollen sicherstellen, dass nur Menschen und keine programmierten Roboter Formulare absenden können. Wenn sie in ihr Formular ein CAPCHA einbinden möchten, finden sie hier eine Anregung für ein simples grafisches CAPTCHA.  Grundlagen CAPTCHAs
Beispiel für ein grafisches Semi-CAPTCHA
Bei diesem grafischen CAPTCHA lasse ich (ausschließlich) eine Captcha-Grafik anzeigen. Der Text (Zahlen und / oder Buchstaben) muss in das Eingabefeld eingetragen werden.
(Eine Erweiterung dieses Beispiels mit Zufallsgrafik werde ich demnächst ebenfalls anbieten.)
Dieses CAPTCHA bietet lediglich einen Basis-Schutz. Schließlich wird immer ein und dieselbe Grafik angezeigt. Ich nenne es deshalb Semi-Captcha, weil die Grafik nicht durch PHP generiert wird. Ein CAPTCHA der zweiten Wahl, aber besser als nichts.
Aufwand zur Übernahme dieses Beispiels
Den Quellcode entnehmen sie der Textdatei (Link oben in der Kopfzeile) und kopieren die Elemente in ihre HTML-Datei.
- CSS-Anweisungen in den Head-Bereich kopieren
- JavaSCript-Code in den Head-Bereich kopieren
- Funktion Kontrolle-01 in die Prüfroutine einbinden
- 2 Funktionsaufrufe in ihrem Formular notieren
- Grafik 'captcha01.gif' herunterladen
Weitere Erklärungen finden sie als Kommentar in der Textdatei (Link im Kopfbereich)
Das war's schon! Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen sie ab hier weiter. Sie können dieses Captcha-Script erweitern oder die mathematische Prüfung abändern, die Formatierung des Textes oder des Eingabefeldes durch eigene CSS-Angaben anpassen.
innerhalb ihres Formulars
Innerhalb ihres Formulars soll die CAPTCHA-Frage gestellt werden (Aufgabenstellung). In diesen fall soll die Grafik angezeigt werden. Außerden soll eine Input-Box für die Antwort angezeigt werden (Eingabefeld). Beides übernimmt jeweils eine JavaScript-Funktion mit entsprechender Schreibanweisung.
- Den ersten Teil übernimmt die Funktion 'Schreiben01()'.
- Den zweiten Teil übernimmt die Funktion 'Fragen01()'.
Der Inhalt der grün hinterlegten Felder wird durch die beiden Funktionen in das Dokument geschrieben! Die Ausgabe erscheint an der Stelle, wo der Funktionsaufruf notiert wurde.
Die Implementierung habe ich ihnen leicht gemacht (denke ich). Besonders bei einer nachträglichen Erweiterung ihres vorhandenen Formulars werden ihnen meine Vorbereitungen nützlich sein. Innerhalb ihres Formulars müssen sie keine Formular-Elemente oder CSS-Anweisungen eintragen oder den Formularnamen berücksichtigen. Lediglich die beiden Funktionsaufrufe sollen innerhalb ihres Formulars notiert werden.
Ich habe diese Form mit 2 separaten Elementen gewählt, damit sie das Captcha-Script leichter in ihr Formular integrieren können. Beide Elemente können unmittelbar hintereinander angezeigt werden oder auch in separaten Tabellenzellen eingefügt werden (falls ihr Formular mit einer Tabelle formatiert ist).
Die Funktionen
1 Schreiben01
Die erste Funktion hat einen simplem Job. Sie schreibt die HTML-Tags zur Darstellung der CAPTCHA-Grafik in die HTML-Seite.
 (diese Grafik herunterladen)
var GrafikURL = "captcha01.gif";
var GrafikHoehe = 25;
var GrafikBreite = 60;
var Antwort01 = "abc"
function Schreiben01() {
document.write('<img src="' + GrafikURL + '" width="' + GrafikBreite ... >');
}
Die auf der CAPTCHA-Grafik dargestellten Textzeichen tragen sie bei der Variablen Antwort01 ein. Für die hier verwendete Grafik ist das 'abc'.
2 Fragen01
Die zweite Funktion schreibt ein Eingabefeld in die HTML-Seite.
function Fragen01() {
document.write('<input type="text" id="antwort01" maxlength="3" value="">');
document.write(' Captcha eintragen');
return
}
Der Code oben ist lediglich ein Auszug. Weitere Anweisungen zur Formatierung und zum Wechsel der Hintergrundfarbe sehen sie im Quelltext.
3 Kontrolle01
Die dritte Funktion soll beim Absenden des Formulars den in der Variablen 'Antwort01' eingetragenen Wert mit der Eingabe vergleichen und feststellen, ob der CAPTCHA-Code korrekt ist. Bei einem korrekten Eintrag kann das Formular gesendet werden, falls nicht wird eine Meldung angezeigt und eine neue Eingabe erwartet.
Wird im Formular z.B. die Grafik 'captcha01.gif' angezeigt, wird die Eingabe 'abc' erwartet. Bei der Kontrolle wird der eingetragene Wert aus dem Formularfeld mit der ID 'antwort01' entnommen und mit dem errechneten Wert verglichen.
function Kontrolle01() {
var Eintrag01 = document.getElementById("antwort01").value;
if(Antwort01 != Eintrag01)
{
alert("CAPTCHA-Eintrag nicht korrekt!");
document.getElementById("antwort01").value = "";
document.getElementById("antwort01").focus();
return false;
}
}
Bei einem falschen Eintrag wird eine Meldung angezeigt (alert), der Inhalt des Eingabefeldes 'antwort01' gelöscht und die Eigabemarke dort positioniert.
Prüfungsfunktion einbinden
Die Funktion Kontrolle01 soll beim / noch vor dem Absenden aufgerufen werden!
a Wenn bereits andere Prüfungen vorhanden sind
<form onSubmit="return IhrePruefungen();" action="mailto:" ... >
Dann notieren sie den Aufruf der Prüfroutine in den Block der vorhandenen Prüfungen. Angenommen, ihre Prüfungen stehen innerhalb der Funktion Pruefungen(). Dann notieren sie den Aufruf für Kontrolle01 innerhalb der (geschweiften Klammern) der vorhandenen Funktion
function Pruefungen()
{
Emailadresse prüfen
Name prüfen
Textfeld prüfen
Kontrolle01();
}
a Wenn keine anderen Prüfungen vorhanden sind
Wenn in ihrem Formular keine Prüfungen der Eingaben vorgesehen sind, wird die Prüfung des CAPTCHA-Eintrags die einzige Prüfung sein. Dann wird der Aufruf der Funktion Kontrolle01 im einleitenden <form>-Tag notiert:
<form onSubmit="return Kontrolle01();" action="mailto:" ... >
Anpassungen
2 eine andere CAPTCHA-Grafik einbinden
In der Funktion Schreiben01 sind 3 Angaben für die CAPTCHA-Grafik eingetragen: URL, Breite und Höhe. Wenn sie eine andere Grafik verwenden möchten, tragen sie dort die entsprechenden Werte ein.
var GrafikURL = "ccccccc";
var GrafikHoehe = 25;
var GrafikBreite = 60;
var Antwort01 = "xxx"
function Schreiben01() {
document.write('<img src="' + GrafikURL + '" width="' + GrafikBreite ... >');
}
Nicht vergessen: Die auf der neuen CAPTCHA-Grafik dargestellten Textzeichen tragen sie bei der Variablen Antwort01 ein.
Sollte der neue Code mehr als 4 Zeichen lang sein, ändern sie im Script den Eintrag für die maximale Länge (maxlength="4") entsprechend.
Grafiken zum Download:
      
Weitere Captcha-Grafiken finden sie in meiner  MINI-IMAGE-BOX 
Menü: Miscellaneous (Diverses) - Captchas (Unterseite)
2 CSS-Formatierungen
Ein CSS-Style für das kurze Eingabefeld wird im HEAD-Bereich der HTML-Datei notiert:
<style type="text/css">
<!--
.kurz02 {
font-family:Arial;sans-serif;
font-size:14px;
font-weight:bold;
color: #5F5F5F;
background-color:#FFE6FF;
border: 1px solid #7F9DB9;
width:50px;
height:23px;
line-height:20px;
text-align:center;
vertival-align:middle;
}
-->
</style>
Nur zur Erklärung:
Das Script schreibt ein <input>-Tag für die Eingabe der Antwort mit folgenden Anweisungen in ihr Formular:
<input
type="text"
value=""
id="antwort01"
class="kurz02"
onFocus="this.style.background='#FFFFFF';"
>
Wichtig ist die Notierung der ID und der CSS-Klasse, onFocus ist 'Kosmetik'.
Basiswissen Spam + Email-Spider
CAPTCHA-Schutz für Formulare - Basiswissen
CAPTCHA-Schutz für Formulare 01 - mathematisches Captcha
Formularvorlage 01-A (Basis-Formular) mit Spam und Captcha
Formularvorlage 01-B (Basis-Formular) mit Spam und Captcha
Formularvorlage 07 (Fehler melden) mit Spam und Captcha
|
Home • Formulare • grafisches Captcha
Schreiben01