正文

HTML5表单验证码制作示例

/0 浏览量
0507

在互联网上，验证码（Captcha）是一种常见的防止恶意用户进行自动化攻击的措施。HTML5提供了内建的表单验证功能，包括验证码的实现。以下是一个简单的HTML5表单验证码制作的示例。

1. 准备工作

在开始之前，确保你的网页环境支持HTML5，并且你的浏览器是最新版本。

2. HTML结构

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5验证码示例</title>
<style>
  .captcha {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<form action="/submit-form" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="captcha">验证码:</label>
  <input type="text" id="captcha" name="captcha" required>
  <img src="captcha.php" alt="验证码" onclick="this.src='captcha.php?'+Math.random()">
  <br>
  <input type="submit" value="提交">
</form>
</body>
</html>

在这个例子中，我们创建了一个包含用户名输入框、验证码输入框和图片的表单。当用户点击验证码图片时，会重新加载新的验证码，以此来防止恶意用户缓存验证码。

3. PHP后端处理

为了使验证码功能完整，我们需要一个PHP脚本（captcha.php）来生成验证码图片。

<?php
session_start();
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < 6; $i++) {
    $randomString .= $characters[rand(0, $charactersLength - 1)];
}
$_SESSION['captcha'] = $randomString;

$image = imagecreatetruecolor(120, 30);
$background_color = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image, 0, 0, 120, 30, $background_color);

$font_color = imagecolorallocate($image, 0, 0, 0);
$font_file = './arial.ttf';
imagettftext($image, 18, 0, 10, 25, $font_color, $font_file, $_SESSION['captcha']);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>

这个PHP脚本会生成一个包含6位随机字符的验证码，并将其保存在会话中。然后，它将创建一个图像并将其发送到浏览器。

4. 验证表单数据

在用户提交表单后，我们需要验证用户输入的验证码是否正确。

<?php
session_start();

$username = $_POST['username'];
$captcha = $_POST['captcha'];

if ($captcha == $_SESSION['captcha']) {
    // 验证成功，处理表单数据
    echo "验证成功！";
} else {
    // 验证失败，提示用户
    echo "验证码错误，请重新输入！";
}
?>

在这个PHP脚本中，我们首先检查用户输入的验证码是否与存储在会话中的验证码相匹配。如果匹配，则处理表单数据；如果不匹配，则提示用户验证码错误。

5. 总结

通过以上步骤，我们可以创建一个简单的HTML5验证码系统。当然，在实际应用中，你可能需要考虑更多的安全措施，如使用更复杂的字符集、添加图片干扰元素等。希望这个示例能帮助你入门。

-- 展开阅读全文 --