How to make such a simple captcha?

Question

css

How to make such a simple captcha? Now there is the simplest form handler in php (separate send.php page)

Answer 1

Above is stupidity. Captcha needs to be done on the backend, and checked in the same way! NEVER TRUST THE [email protected] ALL DATA SHOULD BE VERIFIED ON THE BACKEND!!!

Answer 2

Think over the principle and saw.
Something like:
When submitting the form, look at the value of the captcha input field and compare it with the already known (or calculated based on which expression you want to calculate, such as Math.Random*10 + Math.Random*10 ) value and if they " ==" only after that let him submit.

<form action="noact.js">
      <label for="bruh">Сколько будет <span class="span1"></span> + <span class="span2"></span> ?</label>
      <input type="text" name="bruh">
      </input>
      <button type="submit" class="button" name="button">Press Me, BEACH</button>
    </form>

var val1 = Math.ceil(Math.random() * 10);
      var val2 = Math.ceil(Math.random() * 10);
      var span1 = $('.span1').text(val1);
      var span2 = $('.span2').text(val2);
      var spankl = val1 + val2;
      $("form").on("submit", function(event) {
        $('input[name=bruh]').val() == spankl ? console.log('Всё хорошо') : event.preventDefault();
      });