验证码通常用于防止机器人或自动化工具自动提交表单,增加网站的安全性。以下是一个简单的网页制作验证码的示例代码,使用HTML和JavaScript实现。
HTML部分:

<!DOCTYPE html>
<html>
<head>
<title>验证码示例</title>
</head>
<body>
<form id="myForm">
<label for="captcha">请输入验证码:</label>
<input type="text" id="captcha" name="captcha">
<img id="captchaImg" src="https://www.qq959.com/static/image/lazy.gif" class="lazy" original="https://www.qq959.com/static/image/nopic320.png" alt="验证码">
<input type="submit" value="提交">
</form>
</body>
</html>在这个HTML代码中,我们创建了一个包含文本输入框和图像的表单,图像用于显示验证码,我们需要创建一个服务器端脚本(如PHP)来生成验证码并将其显示在图像上,这里假设你使用的是PHP。
PHP部分(captcha.php):
<?php session_start(); // 启动会话以存储验证码值 $random_number = rand(1000, 9999); // 生成一个四位数的随机验证码值 $_SESSION[’captcha’] = $random_number; // 将验证码值存储在会话中以便验证用户输入是否正确 $font_size = 50; // 设置字体大小 $image_width = 200; // 设置图像宽度 $image_height = 80; // 设置图像高度 $image = imagecreate($image_width, $image_height); // 创建空白图像 $background_color = imagecolorallocate($image, 255, 255, 255); // 设置背景颜色为白色 $text_color = imagecolorallocate($image, 0, 0, 0); // 设置文本颜色为黑色 imagettftext($image, $font_size, 0, 10, 40, $text_color, ’arial.ttf’, $random_number); // 在图像上添加验证码文字(假设arial.ttf是你的字体文件) header(’Content-type: image/png’); // 设置输出文件的类型(这里是PNG格式) imagepng($image); // 输出图像到浏览器或文件(这里直接输出到浏览器) imagedestroy($image); // 销毁图像资源以释放内存空间 ?>
这个PHP脚本生成一个包含四位随机数字的验证码图像,并将其显示在网页上,它将验证码值存储在会话中以备后续验证用户输入的正确性,你需要有一个字体文件(如arial.ttf)来在图像上添加文本,你可以根据需要修改字体大小、图像宽度和高度等参数,你可能还需要在服务器端安装GD库来支持图像处理功能。





