<body> <div class="container"> <form action="#" class="login-form"> <h2>欢迎登录</h2> <input type="text" name="username" class="user1" placeholder="用户名"> <input type="password" name="password" class="pass1" placeholder="密码"> <button type="submit" class="sub1">登录</button> </form> </div> <script> //1.获取元素 let user1 = document.querySelector('.user1') let pass1 = document.querySelector('.pass1') let sub1 = document.querySelector('.sub1') var inputs = document.getElementsByTagName('input') console.log(inputs); //注册事件 sub1.onclick = function() { //获取用户输入的账户名和密码 // let username = user1.value // let password = pass1.value console.log(inputs[0].value); console.log(inputs[1].value); //条件判断 if (inputs[0].value == '1' && inputs[1].value == 1) { alert('登录成功') //存储用户输入的效据 // Window.localStorage.setItem('username', username) // Window.localStorage.setitem('password', password) //登录成功跳转页面选择跳转页面 window.location.replace('http://www.cnsoftbei.com/plus/view.php?aid=826') } else{ alert('用户名或密码错误') } } // 页面一加载就赋值给表单 // user1.value = localstorage.getItem('username') // pass1.value = IocalStorage.getitem('password') </script> </body>

时间: 2024-01-08 10:03:03 浏览: 21

这是一个简单的登录页面的 HTML 代码，使用了表单和 input 元素。在 JavaScript 中，通过获取元素并注册事件，实现了用户输入账户名和密码后的条件判断，如果符合要求，则跳转到指定网址，并存储用户输入的账户名和密码。如果不符合要求，则弹出提示框。未注释的代码中还包含了一些注释，可以帮助我们理解代码的功能。

<body style="background-color:#1c77ac; background-image:url(images/1.png); height:100%;width:100%;background-size:cover;"> <div id="mainBody"> <div id="cloud1" class="cloud"></div> <div id="cloud2" class="cloud"></div> </div> <div class="logintop"> <span>欢迎登录在线考试系统</span> <ul> <li><a href="#">回首页</a></li> <li><a href="#">帮助</a></li> <li><a href="#">关于</a></li> </ul> <base href="<%=basePath%>"> <title>登录</title> <link rel="stylesheet" href="css/login.css"> </head> <body> <section>  <div class="box"> <div class="container"> <div class="form"> <span style="text-align: center"><h2>学生考试管理系统</h2></span> <form action="login" method="post"> <div class="inputBox"> <input type="text" name="user" id="user"/ > </div> <div class="inputBox"> <input type="password" name="pw"/ > </div> <div class="danxuan" style="text-align: center"> <input type="radio" name="sf" value="0" checked="checked"/>管理员 <input type="radio" name="sf" value="1"/>教师 <input type="radio" name="sf" value="2"/>学生 </div> <div class="inputBox"> <input type="submit" value="登录"/> </div> <span style="text-align: center"></span> </form> </div> </div> </div> </div>

这段代码看起来是一个网页的 HTML 代码，其中包含了一个登录页面的样式和表单。具体来说，这个页面有一个蓝色的背景，背景图案是一张云朵的图片。页面顶部有一个导航栏，包含了三个链接：首页、帮助和关于。登录页面的主体部分包含了一个标题“学生考试管理系统”，一个表单和一个提交按钮。表单包含了三个输入框，分别是用户名、密码、身份（管理员、教师或学生），以及一个“登录”按钮。该页面的样式由一个名为“login.css”的样式表控制。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--<html>--%> <%--<head>--%> <%-- <title>Title</title>--%> <%--</head>--%> <%--<body>--%> <%--<div>--%> <%-- <div style="color: #37ff00">${requestScope.msg}</div>--%> <%-- 用户名：<input type="text" name="username" > <br>--%> <%-- 密码：<input type="password" name="password" > <br>--%> <form action="/userlogin" method="post"> <%-- <input type="submit" value="登录">--%> <%-- </form>--%> <%-- </div>--%> <%--</body>--%> <%--</html>--%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册表单</title> <style> .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; } .form-group { margin-bottom: 10px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input { width: 100%; padding: 5px; } .form-group button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>登录</h2> <form id="login-form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <button type="submit">登录</button> </div> </form> </div> <script> document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单提交的默认行为 var username = d帮我让这个代码把账号密码发给LoginServlet进行逻辑判断

要实现将账号密码发送给LoginServlet进行逻辑判断，你可以修改JavaScript部分的代码。在事件处理函数中，你可以使用AJAX技术将表单数据发送到LoginServlet，并接收返回的结果进行处理。请将以下代码替换掉原来的JavaScript部分： ```javascript document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单提交的默认行为 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和URL xhr.open('POST', '/userlogin', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求完成后的回调函数 xhr.onload = function() { if (xhr.status === 200) { // 请求成功，根据返回的结果进行处理 if (xhr.responseText === 'success') { window.location.href = '/sss.jsp'; // 验证成功，跳转到sss.jsp } else { window.location.href = '/zz.jsp'; // 验证失败，跳转到zz.jsp } } }; // 发送请求 xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)); }); ``` 在这段代码中，我们首先获取了用户名和密码的值。然后，创建了一个XMLHttpRequest对象，并设置请求方法为POST，URL为"/userlogin"。我们还设置了请求头的Content-Type为"application/x-www-form-urlencoded"，这是一种常用的表单数据编码格式。接下来，我们定义了一个回调函数xhr.onload，该函数会在请求完成后被调用。在该函数中，我们首先判断请求是否成功（状态码为200），然后根据返回的结果进行处理。如果返回的结果为"success"，则跳转到sss.jsp，否则跳转到zz.jsp。最后，通过调用xhr.send()方法将表单数据发送到LoginServlet。需要注意的是，我们使用encodeURIComponent()方法对用户名和密码进行编码，以确保特殊字符的正确传输。这样，当用户点击登录按钮时，表单数据会被发送到LoginServlet进行逻辑判断，并根据结果进行页面跳转。

相关推荐

firework.html

index.html

html完整教程(<html>标志用于Html文档的最前边，用来标识Html文档的开始。)

用JSP+Servlet设计一个美食网站，index.jsp里面有一个导航栏，导航栏选项分别是附近美食、小吃快餐、饮品甜点、上榜好店、聚餐宴请分别跳转到对应的jsp页面，login.jsp用form表单实现登录和注册功能

html登录源码login

用WEB--ASP.NET谢一个登入页面

用Java写一个电子邮件收发系统的登录html代码

好看的登录页面的HTML代码示例

使用bootstrap的组件制作一个美观的登陆界面 要求包含用户名 密码与登录按钮 并给出html代码

写一段上述网站的登录界面代码

帮我设计一个asp.net美观的登录界面代码

用JSP+Servlet+Bootstrap写一个登录注册页面，login.jsp,register.jsp loginServlet,registerServlet

html简单登录注册界面源代码

图书管理系统登录注册主页面代码

漂亮登陆注册html模板

最新推荐

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

管理建模和仿真的文件

：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章

ActionContext.getContext().get()代码含义

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

"互动学习：行动中的多样性与论文攻读经历"

：YOLO目标检测算法的挑战与机遇：数据质量、计算资源与算法优化，探索未来发展方向

设计一个算法，输出在顺序表｛3，6，2，10，1，8，5，7，4，9｝中采用顺序方法查找关键字5的过程。

建筑供配电系统相关课件.pptx

关系数据表示学习

使用bootstrap的组件制作一个美观的登陆界面要求包含用户名密码与登录按钮并给出html代码