验证码实现,但是仅图片
<!DOCTYPE html> <html> <head> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } .container { max-width: 400px; margin: 0 auto; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="number"] { width: 100%; height: 40px; padding: 5px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } .captcha { display: flex; align-items: center; } .captcha img { margin-right: 10px; } .captcha input[type="text"] { flex: 1; } .submit-btn { width: 100%; height: 40px; background-color: #007bff; color: #fff; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form> <div class="form-group"> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Enter your username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password"> </div> <div class="form-group"> <label>Captcha</label> <div class="captcha"> <img src="D:\zhuo mian\mLvJmVXKpY.png " alt="Captcha" width="80px"> <input type="text" name="captcha" placeholder="Enter the captcha"> </div> </div> <button class="submit-btn" type="submit">Login</button> </form> </div> </body> </html>
效果
标签:color,type,9.11,captcha,input,margin,border From: https://www.cnblogs.com/zeyangshuaige/p/17694422.html