如何制作 HTML 验证码

验证码（CAPTCHA）是一种用于确保访问者是人类而不是机器人的方法。在网站上，验证码通常作为一种验证步骤出现在表单提交，登录等地方。在这篇文章中，我们将介绍如何使用 HTML、CSS 和 JavaScript 来创建一个简单的验证码。

步骤

1. 创建 HTML 表单

首先，我们需要创建一个 HTML 表单，包括输入框和验证码图片。

<form>
  <label for="username">用户名：</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码：</label><br>
  <input type="password" id="password" name="password"><br>
  <label for="captcha">验证码：</label><br>
  <input type="text" id="captcha" name="captcha"><br>
  <img src="captcha.php" alt="验证码">
</form>

在这个示例中，我们用 CSS 把输入框和验证码图片放在一行，并为验证码图片添加了一个 alt 属性以提高可访问性。

2. 创建验证码图片

接下来，我们需要创建一个用于生成验证码图片的 PHP 脚本，并将其的路径放入 HTML 表单中的 src 属性中。

<?php
session_start();

$width = 120;
$height = 40;

$image = imagecreatetruecolor($width, $height);
$bg_color = imagecolorallocate($image, 255, 255, 255);
$font_color = imagecolorallocate($image, 0, 0, 0);

imagefilledrectangle($image, 0, 0, $width, $height, $bg_color);

$font = 'Arial.ttf';
$code_length = 4;
$code = substr(md5(rand()), 0, $code_length);

$_SESSION['captcha'] = $code;

for ($i = 0; $i < $code_length; $i++) {
    $x = ($width / $code_length) * $i + 10;
    $y = rand(20, 30);
    imagettftext($image, 20, rand(-10, 10), $x, $y, $font_color, $font, $code[$i]);
}

header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);

?>

这段 PHP 脚本生成了一个 120x40 的图像，并将其填充为白色背景和黑色字体。它使用 md5 函数生成一个 4 位验证码，使用 imagettftext 将验证码绘制到图像中。最后，它将生成的图像作为 JPEG 格式输出，并从服务器内存中销毁。

注意，我们使用了 $_SESSION 全局数组来在服务器间记住验证码。这个数组需要在脚本开头使用 session_start 函数初始化。

3. 验证输入的验证码

在表单提交时，我们需要检查输入的验证码是否与服务器上的值匹配。

session_start();

if (isset($_POST['username']) && isset($_POST['password']) && isset($_POST['captcha'])) {

    if ($_POST['captcha'] === $_SESSION['captcha']) {

        // 验证通过
        // 处理提交的表单数据

    } else {

        // 验证码错误
        // 显示错误信息

    }

}

在这个示例中，我们使用 === 操作符来比较输入的验证码和服务器上的值。如果它们不相等，我们将显示一个错误信息。

结论

现在您已经知道如何使用 HTML、CSS 和 JavaScript 来创建一个简单的验证码，这个验证码可以在服务器端使用 PHP 进行验证。当然，这只是一个基础知识，您可以使用更复杂的算法和技术来创建更强大的验证码。