CAPTCHA doğrulama formu, web formlarındaki güvenliği arttırmak için kullanılan bir yöntemdir. Aşağıdaki adımlar HTML, CSS ve JavaScript kullanarak CAPTCHA doğrulama formu oluşturmanıza dair bir örnek vermektedir:
HTML formunu oluşturun: Aşağıdaki HTML kodu, bir CAPTCHA doğrulama formunun nasıl oluşturulacağını gösterir.
<form id="form">
<div>
<label for="name">Adınız:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
</div>
<div id="captcha">
<span id="num1"></span> + <span id="num2"></span> =
<input type="text" id="result" name="result">
</div>
<button type="submit">Gönder</button>
</form>
CSS stilini ekleyin: Formun görünümünü düzenlemek için CSS stilini ekleyin.
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
label, input[type="text"], input[type="email"], input[type="submit"] {
padding: 10px;
margin-bottom: 20px;
}
#captcha {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
JavaScript kodunu ekleyin: CAPTCHA doğrulamasını yapmak için JavaScript kodunu ekleyin.
const form = document.getElementById('form');
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');
// Random sayılar oluştur
num1.textContent = Math.floor(Math.random() * 10) + 1;
num2.textContent = Math.floor(Math.random() * 10) + 1;
form.addEventListener('submit', (e) => {
e.preventDefault();
// Doğrulama
if (parseInt(result.value) !== (parseInt(num1.textContent) + parseInt(num2.textContent))) {
alert('CAPTCHA doğrulama başarısız!');
} else {
alert('CAPTCHA doğrulama başarılı! Form gönderildi.');
}
});