CAPTCHA doğrulama formu, botların otomatik olarak form doldurmasını engellemek için kullanılan bir güvenlik önlemidir. Bu formu, HTML, CSS ve JavaScript kullanarak basitçe oluşturabilirsiniz. Aşağıdaki adımları takip edebilirsiniz:
HTML Kodu:
İlk olarak, formunuzun HTML kodunu yazın. Form, kullanıcının adını, e-posta adresini ve mesajını içerebilir. Bunun yanı sıra, CAPTCHA doğrulama formu için bir alan oluşturmanız gerekiyor. Aşağıdaki örnek kodu kullanabilirsiniz:
<form>
<label for=”name”>İsim:</label>
<input type=”text” id=”name” name=”name”><br><br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Mesaj:</label>
<textarea id="message" name="message"></textarea><br><br>
<label for="captcha">Güvenlik Kodu:</label>
<input type="text" id="captcha" name="captcha"><br><br>
</form>
Yukarıdaki kodda, “captcha” olarak adlandırılan bir giriş alanı ekledik. Bu alanda, kullanıcının CAPTCHA doğrulama kodunu girmesi gerekiyor.
CSS Kodu:
CAPTCHA alanını stilize etmek için CSS kullanabilirsiniz. Aşağıdaki örnek kodda, CAPTCHA alanına sarı bir arka plan ve siyah renkli bir yazı rengi atadık:
css
#captcha {
background-color: yellow;
color: black;
}
JavaScript Kodu:
CAPTCHA doğrulama kodunu oluşturmak için JavaScript kullanabilirsiniz. Aşağıdaki örnek kodda, bir dizi harf ve rakamdan rastgele bir dize oluşturduk ve CAPTCHA alanına yazdık:
javascript
function generateCaptcha() {
var chars = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz”;
var captcha = ”;
for (var i = 0; i < 6; i++) {
var randomIndex = Math.floor(Math.random() * chars.length);
captcha += chars.substring(randomIndex, randomIndex + 1);
}
document.getElementById(“captcha”).value = captcha;
}
Yukarıdaki kodu, sayfa yüklenirken çalıştırmak için aşağıdaki kodu kullanabilirsiniz:
javascript
window.onload = generateCaptcha;
Bu kod, sayfa yüklendiğinde CAPTCHA doğrulama kodunu otomatik olarak oluşturur.
Sonuç olarak, yukarıdaki HTML, CSS ve JavaScript kodlarını kullanarak basit bir CAPTCHA doğrulama formu oluşturabilirsiniz. Bu formu daha da güvenli hale getirmek için, kullanıcıların CAPTCHA doğrulama kodunu yanlış girdiğinde hata mesajları görüntüleyebilirsiniz.