做一个登录验证码页面,在网页显示图片字母验证码,用HTML
时间: 2024-03-10 10:48:14 浏览: 20
好的,我可以为你提供以下 HTML 代码,用于创建一个简单的登录页面,其中包含图片字母验证码:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
</head>
<body>
<h1>登录</h1>
<form action="" method="POST">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="captcha">验证码:</label>
<input type="text" id="captcha" name="captcha"><br><br>
<img src="captcha.php" alt="验证码"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
在上面的代码中,我们使用了一个 `form` 元素,其中包含了一个用于输入用户名和密码的文本框,以及一个用于输入验证码的文本框。我们还添加了一个 `img` 元素,该元素的源指向 `captcha.php`,该文件将生成和显示验证码图片。
你需要创建一个名为 `captcha.php` 的 PHP 文件,以生成和显示验证码图片。以下是一个简单的 `captcha.php` 文件示例:
```php
<?php
session_start();
// 设置验证码图片的宽度和高度
$width = 120;
$height = 40;
// 创建一个空白的图像
$image = imagecreatetruecolor($width, $height);
// 设置图像的背景颜色
$bgColor = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $bgColor);
// 生成随机的验证码字符串
$characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
$captcha = substr(str_shuffle($characters), 0, 6);
$_SESSION['captcha'] = $captcha;
// 将验证码字符串绘制到图像上
$textColor = imagecolorallocate($image, 0, 0, 0);
$font = 'arial.ttf';
$fontSize = 20;
$textX = 20;
$textY = 30;
imagettftext($image, $fontSize, 0, $textX, $textY, $textColor, $font, $captcha);
// 输出图像
header('Content-type: image/png');
imagepng($image);
// 释放内存
imagedestroy($image);
?>
```
在上面的代码中,我们首先设置了验证码图片的宽度和高度。然后,我们创建了一个空白的图像,并将其填充为白色。接下来,我们生成了一个随机的验证码字符串,并将其存储在会话中。最后,我们将验证码字符串绘制到图像上,并输出图像。
当用户提交表单时,我们将检查用户输入的验证码是否与会话中存储的验证码匹配。以下是 PHP 代码示例:
```php
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
$captcha = $_POST['captcha'];
if ($captcha === $_SESSION['captcha']) {
// 验证码匹配,进行后续的登录验证操作
} else {
// 验证码不匹配
}
}
?>
```
希望这可以帮助你创建一个简单的登录页面,其中包含了图片字母验证码!