<div id="captcha"> <img src="http://example.com/captcha.png" alt="CAPTCHA"> <input type="text" id="captchaInput"> </div> <script> function validateCaptcha() { var captcha = document.getElementById("captchaInput").value; var captchaImage = document.getElementById("captcha").src; // Make a request to the server to verify the CAPTCHA. $.ajax({ url: "/verify-captcha", type: "POST", data: { captcha: captcha, captchaImage: captchaImage } }).done(function(response) { // If the CAPTCHA is valid, continue with the form submission. if (response.success) { document.getElementById("form").submit(); } else { // Otherwise, show an error message. alert("Invalid CAPTCHA. Please try again."); } }); } </script>Bu kod, sahte bot tıklamalarını önlemek için bir CAPTCHA görüntüsü kullanır. Bir kullanıcı formu gönderdiğinde, CAPTCHA kodu doğrulama için sunucuya gönderilir. CAPTCHA geçerli ise form gönderilir. Aksi takdirde, bir hata mesajı görüntülenir. css formstında
/* Örneğin, bir butonu hedefalım */
.button {
position: relative;
}
/* Butonun üzerine gelen sahte bot tıklamasını engelleyen özel bir öğe ekleyelim */
.button::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* Arkaplan rengini istediğiniz gibi ayarabilirsiniz */
z-index: 9999; /* Diğer öğelerden daha üstte olması için yüksek bir z-index değeri veriyoruz */
pointer-events: none; /* Bu öğenin tıklanmasını engelliyoruz */
}Yukarıd kod, .button sınıfına sahip bir öğenin üzerine gelen sahte bot tıklamalarını engellemek için bir overlay ekler. Overlay, ::after seçicisiyle oluşturulur ve pointer-events: none; özelliği sayesinde tıklanmayı engeller.Bu kodu kullanarak, sahte bot tıklamalarını engelek istediğiniz öğelerin üzer overlay ekleyebilirsiniz. Kodu ihtiyaçlarınıza göre uyarlayabilir diğer özellikleri ekleyebilirsiniz.