今天下课之后，课后作业是登录界面设计，我首先用java中自带的命令框实现了功能。其中的难点就是生成一个随机的字符串当做验证码。之后我想要使用html去实现这个程序。但是在我写完html程序之后，简单的画完了一个登录框。代码如下：
<!DOCTYPE html> <html> <head> <title>登录界面</title> <style> .container { text-align: center; margin-top: 200px; } .form { display: inline-block; text-align: left; padding: 20px; border: 1px solid #ccc; } .form input { margin-bottom: 10px; } .form button { margin-top: 10px; } </style> </head> <body> <div class="container"> <form class="form"> <h2>登录</h2> <div> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div> <label for="captcha">验证码:</label> <input type="text" id="captcha" name="captcha" required> <img id="captchaImg" src="" alt="验证码"> <button type="button" onclick="refreshCaptcha()">刷新</button> </div> <button type="submit">登录</button> </form> </div> <script> function refreshCaptcha() { var randomCode = Math.random().toString().substring(2, 8); var captchaImgElement = document.getElementById("captchaImg"); captchaImgElement.src = "http://example.com/captcha?code=" + randomCode; } // 页面加载时刷新验证码 window.addEventListener("load", function() { refreshCaptcha(); }); </script> </body> </html>。但是在验证码的实现上面，陷入了困境，我不知道该如何生成一个动态的验证码图片，超文本html似乎无法实现这个功能。但是通过java打包成jar程序上传到服务器接着通过url访问的话，实现难度对我来说有点大，只能放弃。接着我又想到可以使用jsp实现java嵌入到html中来实现这个功能。
今天主要学习了html的基本编写方法。明天准备学习简单的jsp编程方法。
标签：11,java,form,登录,验证码,html,2022,margin From： https://www.cnblogs.com/czfznb/p/17694712.html