CAPTCHA, kullanıcıların bot olmadıklarını doğrulamak için kullanılan bir güvenlik öğesidir. CAPTCHA doğrulama formunu HTML, CSS ve JavaScript kullanarak oluşturmak için aşağıdaki adımları takip edebilirsiniz:
İlk olarak, HTML formunu oluşturun. Bu form, kullanıcıların adını, e-posta adresini ve mesajlarını girmelerine olanak tanıyacaktır.
html
<form>
<label for=”name”>Adınız:</label>
<input type=”text” id=”name” name=”name”><br><br>
<label for=”email”>E-posta Adresiniz:</label>
<input type=”email” id=”email” name=”email”><br><br>
<label for=”message”>Mesajınız:</label><br>
<textarea id=”message” name=”message” rows=”6″></textarea><br><br>
</form>
CAPTCHA öğesini ekleyin. Bu, kullanıcıların doğrulama kodunu girerek formu gönderebileceklerini doğrulamalarını sağlayacaktır.
html
<div class=”captcha”>
<img src=”captcha.php” alt=”CAPTCHA”>
<input type=”text” id=”captcha” name=”captcha”>
</div>
Bu örnekte, “captcha.php” dosyası CAPTCHA görüntüsünü oluşturacak ve kullanıcının doğrulama kodunu girmesine izin verecektir.
CAPTCHA kodunu oluşturmak için “captcha.php” dosyasını oluşturun. Bu dosya, rasgele bir dize oluşturacak ve kullanıcıların doğrulama kodunu girmelerini sağlayacaktır.
php
<?php
session_start();
$random_code = substr(md5(uniqid(mt_rand(), true)), 0, 5);
$_SESSION[‘captcha’] = $random_code;
$im = imagecreatetruecolor(75, 25);
$bg = imagecolorallocate($im, 22, 86, 165);
$fg = imagecolorallocate($im, 255, 255, 255);
imagefill($im, 0, 0, $bg);
imagestring($im, 5, 20, 5, $random_code, $fg);
header(“Cache-Control: no-cache, must-revalidate”);
header(‘Content-type: image/png’);
imagepng($im);
imagedestroy($im);
?>
Bu PHP dosyası, rasgele bir kod oluşturmak için “md5” fonksiyonunu kullanır ve kullanıcının girdiği kodla karşılaştırmak için bu kodu bir oturum değişkenine kaydeder. Ayrıca, CAPTCHA görüntüsünü oluşturur ve gösterir.
JavaScript kodunu ekleyin. Bu, kullanıcının doğru CAPTCHA kodunu girdiğinden emin olacaktır.
javascript
var form = document.querySelector('form');
var captcha = document.querySelector('#captcha');
var submit = document.querySelector('input[type="submit"]');
form.addEventListener('submit', function(e) {
if (captcha.value.toLowerCase() !== '<?php echo $_SESSION["captcha"]; ?>') {
e.preventDefault();