How to introduce and display the verification code file on the login page

The previous chapter introduced how to make a simple verification code. Define the php file of the verification code as: captcha.php

Now let’s talk about how Introducing the verification code file, our initial login page looks like this:

The verification code here looks like this.

The code in the login.html file is as follows:

<div class="form-group">
    <div class="field">
        <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
       <img src="images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">  
                               
    </div>
</div>

Here we need to make some modifications to this code and introduce the verification code file , the modified code is as follows

<div class="form-group">
   <div class="field">
      <input type="text" class="input input-big" name="code" placeholder="填写验证码" data-validate="required:请填验证码" />
      <a style="float:right; padding:5px;" href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
         <img id="captcha_img" class="passcode" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:42px" />
      </a>
   </div>
</div>

Then make some modifications to the css style. The HTML DOM Document object in javascript is used here, and the image generated by the verification code of captcha.php is referenced.

The effect achieved after running the code:

##Next Section