templates/recover_email_form.htm

<h1>Change your password</h1>

<form action="" method="POST">
    <!-- Email input -->
    <div class="form-outline mb-3">
        <label class="form-label font-weight-bold" for="form3Example3">Email address*</label>
        <input required name="email" type="email" id="form3Example3"
            class="form-control <?php if(isset($error) && $error && !isset($_POST['email'])){echo 'border-danger';}?>"
            placeholder="myemail@example.com"
            value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
    </div>

    <!--captcha here-->
    <div class="form-outline mb-3">

        <label class="form-label font-weight-bold" for="form3Example4">Captcha:</label>
        <div class="container mb-2 offset-md-2">
            <img id="captcha" src="<?php echo $BASE_URL.'/captcha.php?token='.$_SESSION['captcha_token']; ?>" />
            <div id="reload_captcha">
                <button id="reload" class="btn btn-outline-info" type="button"> <span class="glyphicon glyphicon-refresh"
                    aria-hidden="true"></span></button>
            </div>
        </div>
        <input pattern="[^\s]{<?php echo $CAPTCHA_LENGTH; ?>,}" required title="Please fill the captcha. It has 5 characters" name="captcha"
            type="text" id="form3Example6" class="form-control" placeholder="Type what you see on the image above" />
    </div>

    <!-- Submit button -->
    <button name="type" value="recover" type="submit" class="btn btn-primary float-right btn-md">Confirm</button>

</form>
</div>