当前位置：首页 > 行业动态 > 正文

html验证码代码

admin
行业动态
2024-03-23
1

在HTML中，验证码的编写通常涉及到前端和后端的交互，前端负责展示验证码图片，用户输入验证码后，前端将用户输入的验证码发送到后端进行验证，后端负责生成验证码图片和验证用户输入的验证码是否正确，这里我们以JavaScript、HTML和PHP为例，详细介绍如何编写一个简单的验证码。

1、我们需要在HTML页面中创建一个表单，用于用户输入验证码，在表单中，我们需要一个输入框用于用户输入验证码，一个按钮用于提交表单，我们还需要一个<img>标签用于显示验证码图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>验证码示例</title>
</head>
<body>
    <form action="check_captcha.php" method="post">
        <label for="captcha">请输入验证码：</label>
        <input type="text" name="captcha" id="captcha" required>
        <br>
        <img src="captcha.php" alt="验证码" id="captcha_img">
        <br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

2、接下来，我们需要创建一个PHP文件（如captcha.php），用于生成验证码图片，在这个文件中，我们首先需要设置一个随机数种子，然后生成一个随机字符串作为验证码，接着，我们使用GD库创建一个新的图像，设置背景颜色、字体颜色等属性，并将验证码字符串绘制到图像上，我们将图像输出为PNG格式，并设置响应头信息。

<?php
header("Contenttype: image/png");
session_start();
// 设置随机数种子
mt_srand(microtime(true) * 1000000);
// 生成随机字符串作为验证码
$captcha = '';
for ($i = 0; $i < 4; $i++) {
    $captcha .= chr(mt_rand(33, 126));
}
$_SESSION['captcha'] = $captcha; // 将验证码存储到会话中以便后续验证
// 创建一个新的图像，设置背景颜色、字体颜色等属性
$image = imagecreatetruecolor(100, 40);
$bgColor = imagecolorallocate($image, 255, 255, 255); // 背景颜色为白色
$textColor = imagecolorallocate($image, 0, 0, 0); // 字体颜色为黑色
imagefilledrectangle($image, 0, 0, 100, 40, $bgColor);
// 将验证码字符串绘制到图像上
imagestring($image, 5, 30, 8, $captcha, $textColor);
// 将图像输出为PNG格式，并设置响应头信息
imagepng($image);
imagedestroy($image);
?>

3、我们需要创建一个PHP文件（如check_captcha.php），用于验证用户输入的验证码是否正确，在这个文件中，我们首先从会话中获取生成的验证码，然后与用户输入的验证码进行比较，如果两者相同，说明用户输入的验证码正确；否则，说明用户输入的验证码错误，我们可以输出相应的提示信息。

<?php
session_start();
// 从会话中获取生成的验证码
$generated_captcha = $_SESSION['captcha'];
$user_input_captcha = $_POST['captcha'];
// 验证用户输入的验证码是否正确
if ($generated_captcha == $user_input_captcha) {
    echo "验证码正确！";
} else {
    echo "验证码错误！";
}
?>

至此，我们已经完成了一个简单的验证码编写，用户可以在前端页面中看到生成的验证码图片，并输入验证码后提交表单，后端会验证用户输入的验证码是否正确，并给出相应的提示信息，需要注意的是，这个示例仅用于演示目的，实际应用中还需要考虑安全性、用户体验等因素，可以添加一些安全措施，如防止暴力破解、限制尝试次数等。