 CAPTCHA 01-A - in ein Formular einbinden (mathem. Captcha)
Sie möchten ihr Formular um ein 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.
|
|
Captcha in ein Formular 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.
Dieses CAPTCHA bietet lediglich einen Basis-Schutz. Schließlich wird immer ein und dieselbe Graik angezeigt (ein Beispiel mit Zufallsgrafik werde ich demnächst ebenfalls anbieten). Außerdem, ich nenne es deshalb Semi-Captcha, wird die Grafik ja nicht durch PHP generiert.
(Die Aufgabe sollte leicht lösbar sein - sie wissen nicht wer sie besucht)
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 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
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) und 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 ermittelt aus den aktuellen Minuten- und Sekundenwerten der Systemzeit 2 Zufallszahlen zwischen 1 und 10 und schreibt die Fragestellung in die HTML-Seite.
Aufgabe: X + Y =
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var zufallszahl01 = sec % 10;
zufallszahl01 +=1;
zufallszahl02 = (min + sec) % 10;
zufallszahl02 +=1;
function Schreiben01() {
document.write("Aufgabe: " + zufallszahl01 + " + " + zufallszahl02 + " = ");
}
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 die vorher berechnete Lösung 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 Aufgabe '4 + 7 =' angezeigt, wird die Eingabe '11' 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 Ergebnis01 = zufallszahl01 + zufallszahl02;
var Eintrag01 = document.getElementById("antwort01").value;
if(Ergebnis01 != 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:" ... >
CSS-Formatiereungen
CSS-Formatiereungen für das Feld der Fragestellung und dem kurzen Eingabefeld werden im HEAD-Bereich der HTML-Datei notiert:
<style type="text/css">
<!--
.frage {
font-family:Arial;sans-serif;
font-size:12px;
color: #3F3F3F;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
width:110px;
height:20px;
text-align:left;
}
.kurz {
font-family:Arial;sans-serif;
font-size:12px;
color: #5F5F5F;
background-color: #FAFAFA;
border: 1px solid #7F9DB9;
width:50px;
height:20px;
text-align:center;
}
-->
</style>
Nur zur Erklärung, das <input>-Tag wird schließlich durch das JavaScript geschrieben!
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="kurz"
onFocus="this.style.background='#FFFFFF';"
>
Wichtig ist die Notierung der ID und der CSS-Klasse, der Rest ist 'Kosmetik'.
Basiswissen Spam + Email-Spider
CAPTCHA-Schutz für Formulare - Basiswissen
CAPTCHA-Schutz für Formulare 02 - graphisches 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 • Captcha 01A
Beispiel 1
Schreiben01