在HTML中添加图片验证码通常是为了防止机器人或自动化工具自动提交表单。以下是一个简单的示例,展示如何在HTML表单中添加一个图片验证码。假设你已经有了一个名为captcha.jpg的图片文件和一个用于验证用户输入的表单字段。
你需要在HTML中创建一个表单,并在其中添加一个用于显示验证码的图片和一个输入框供用户输入验证码,你可以使用PHP(或其他服务器端语言)来生成和验证验证码,这是一个基本的示例:

HTML部分:
<!DOCTYPE html>
<html>
<head>
<title>添加图片验证码</title>
</head>
<body>
<form action="verify.php" method="post">
<!-- 显示验证码图片 -->
<img id="captcha" src="https://www.271shop.com/static/image/lazy.gif" class="lazy" original="https://www.271shop.com/static/image/nopic320.png" alt="验证码">
<!-- 用户输入验证码 -->
<input type="text" name="user_captcha" placeholder="请输入验证码">
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
</html>你需要一个服务器端脚本来验证用户输入的验证码是否正确,这里是一个简单的PHP示例(假设你使用的是PHP):

PHP部分 (verify.php):
<?php session_start(); // 开始会话以存储验证码信息 // 生成一个随机的验证码字符串并存储在session中,以便后续验证用户输入是否正确 $random_number = rand(1000, 9999); // 生成一个四位数随机数字作为验证码示例 $_SESSION[’captcha’] = $random_number; // 存储在session中以便后续验证用户输入是否正确 // 创建验证码图片并输出到浏览器(这里只是一个简单示例,实际生产中可能需要更复杂的处理) $image = imagecreate(80, 32); // 创建画布大小 80x32像素的图像资源对象,可以根据需要调整大小。 $background_color = imagecolorallocate($image, 255, 255, 255); // 设置背景颜色为白色,可以根据需要调整颜色。 $text_color = imagecolorallocate($image, 0, 0, 0); // 设置文本颜色为黑色,可以根据需要调整颜色。 imagestring($image, 5, 5, $_SESSION[’captcha’], $text_color); // 在图像上写入验证码字符串,可以根据需要调整字体大小和位置。





