使用HTML写一个需要输入相应图片中的数字验证确认的登录页,文字居中
时间: 2023-12-10 09:39:06 浏览: 47
以下是一个简单的示例代码,包括一个输入框、一个验证码图片和一个登录按钮。验证码图片是随机生成的,要求用户在输入框中输入图片中显示的数字才能通过验证登录。
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页</title>
<style>
body {
text-align: center; /* 文字居中 */
}
</style>
</head>
<body>
<h1>登录</h1>
<form>
<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" style="width: 100px;"><br><br>
<img src="captcha.php" alt="验证码"><br><br>
<button type="submit">登录</button>
</form>
</body>
</html>
```
其中,`captcha.php` 是一个动态生成验证码图片的 PHP 文件,示例代码如下:
```php
<?php
session_start();
header('Content-type: image/jpeg');
$width = 120;
$height = 40;
$length = 4;
$image = imagecreatetruecolor($width, $height);
$background_color = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $background_color);
$code = '';
$chars = '0123456789';
$char_length = strlen($chars);
for ($i = 0; $i < $length; $i++) {
$char = $chars[rand(0, $char_length - 1)];
$code .= $char;
$color = imagecolorallocate($image, rand(0, 255), rand(0, 255), rand(0, 255));
$x = ($width / $length) * $i + 5;
$y = rand(0, $height - 15);
imagechar($image, 5, $x, $y, $char, $color);
}
$_SESSION['captcha'] = $code;
imagejpeg($image);
imagedestroy($image);
?>
```
这个 PHP 文件会生成一个验证码图片,并将验证码保存在会话中,以便后续验证用户输入的验证码是否正确。