Html=
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAPTCHA Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="captchaForm" action="submit.php" method="post">
<label for="captcha">What is <span id="number1"></span> + <span id="number2"></span>? </label>
<input type="text" id="captcha" name="captcha" required>
<input type="hidden" id="captchaValue" name="captchaValue">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
JS=
document.addEventListener("DOMContentLoaded", function() {
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const number1 = getRandomInt(1, 10);
const number2 = getRandomInt(1, 10);
const captchaValue = number1 + number2;
const number1Span = document.getElementById("number1");
const number2Span = document.getElementById("number2");
const captchaValueInput = document.getElementById("captchaValue");
number1Span.setAttribute("data-value", number1);
number2Span.setAttribute("data-value", number2);
captchaValueInput.value = captchaValue;
});
css=
#number1::before, #number2::before {
content: attr(data-value);
display: inline-block;
width: 1em;
text-align: center;
}
Copyright © - 10 | NR