实现表单注册登录网页及其信息显示和跳转（javaweb实验）

已于 2023-12-06 19:25:32 修改
阅读量794 收藏 8
点赞数
分类专栏： JavaWeb 文章标签： 前端 web javascript html css
于 2023-09-24 23:49:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73889628/article/details/133243408
版权

下面是完整结果截图及其效果：

显示完整网页布局

点击按钮Register实现表单注册页的显示

点击按钮Login实现上个页面的跳转及登录页面的显示

点击个人简介按钮实现上个页面的跳转及个人简介页面的显示

参考代码如下：

<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>登录注册页</title>
    <style>
        #all{
            width: 1100px;
            height: 800px;
            background-color: #6CACD8;
            margin: auto;
        }
        #top{
            width: 1100px;
            height: 100px;
            background-color: aquamarine;
            margin: auto;
            position: absolute;
        }
        #center{
            width: 900px;
            height: 600px;
            background-color: lightgoldenrodyellow;
            position: absolute;
            margin-top: 200px;
            margin-left: 200px;
        }
        #right{
            width: 200px;
            height: 600px;
            background-color: aqua;
            position: absolute;
            margin-top: 200px;
        }
        #center table{
            width: 100%;
            height: 500px;

        }
        #register-form{
            display: none; /* 初始状态下隐藏 */
        }
        #login-form{
            display: none; /* 初始状态下隐藏 */
        }
        #information{
            display: none; /* 初始状态下隐藏 */
            margin: auto;
        }
        .cell1{
            text-align: right;
            padding-right: 20px;
        }
        .cell2{
            width: 220px;
            height: 25px;
            border: 1px solid grey;
            border-radius: 6px;
            padding-left: 6px;
        }
        .cell3{
            width: 200px;
            height: 40px;
            background-color: #6CACD8;
            border: 1px solid #6CACD8;
            border-radius: 20px;
        }
        .cell4{
            width: 120px;
            height: 25px;
            border: 1px solid grey;
            border-radius: 6px;
            padding-left: 6px;
        }
        .cell5{
            width: 180px;
            height: 25px;
            border: 1px solid grey;
            border-radius: 6px;
            padding-left: 6px;
        }
        .cell7{
            width: 500px;
            height: 25px;
            border: 1px solid grey;
            border-radius: 6px;
            padding-left: 6px;
        }
    </style>
    <title>Title</title>
</head>




<script>
    // 定义一个函数，用于显示注册表单
    function showRegisterForm() {
        // 获取注册表单，并将其显示出来

        document.getElementById("register-form").style.display="block";
        document.getElementById("login-form").style.display="none";
        document.getElementById("information").style.display="none";
    }

    // 定义一个函数，用于显示注册表单
    function showLoginForm() {
        // 获取注册表单，并将其显示出来

        document.getElementById("login-form").style.display="block";
        document.getElementById("register-form").style.display="none";
        document.getElementById("information").style.display="none";

    }

    function showInformation(){
        document.getElementById("information").style.display="block";
        document.getElementById("register-form").style.display="none";
        document.getElementById("login-form").style.display="none";

    }

</script>


<body>
    <div id="all">

        <div id="top">
            <button onclick="showRegisterForm()" style="position:absolute;width: 100px;margin-top: 40px;margin-left: 530px">Register</button>
        </div>

        <button onclick="showLoginForm()" style="position:absolute;width: 100px;margin-top:140px;margin-left: 530px">Login</button>

        <div id="right">
        <button onclick="showInformation()" style="position:absolute;width:100px;display: block;margin-left: 45px;margin-top: 300px">个人简介</button>
        </div>

        <div id="center">
    <%--表一--%>
            <form id="information" style="display: none;">
                <table >
                    <br>
                    <br>
                    <caption style="text-align: center"><strong>Information</strong></caption>
                    <br>
                    <tr>
                        <td class="cell1">ID:</td>
                        <td>
                            K2
                        </td>

                    </tr>
                    <tr>
                        <td class="cell1">Password:</td>
                        <td>
                            ***************
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">First Name:</td>
                        <td>
                            ×
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Last Name:</td>
                        <td>
                            ××
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Address:</td>
                        <td>
                            ******
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Country:</td>
                        <td>
                            中国
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">City:</td>
                        <td>
                            广州市
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Email Address:</td>
                        <td>
                            **************
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Interest:</td>
                        <td>
                            Technology;
                            Enterprise;
                            Research;
                            Government;
                            People;
                            Life Style;
                            Opinion
                        </td>
                    </tr>
                </table>
            </form>

<%--            表二--%>
            <form id="login-form" style="display: none;">
                <table>
                    <br>
                    <br>
                    <caption style="text-align: center"><strong>Please Log In</strong></caption>
                    <tr>
                        <td class="cell1">Login:</td>
                        <td>
                            <input class="cell7" type="text" placeholder="请输入Login">
                        </td>

                    </tr>
                    <tr>
                        <td class="cell1">Password:</td>
                        <td>
                            <input class="cell7" type="password" placeholder="请输入password">
                        </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>
                            <input class="cell3" type="button" value="OK" style="padding-left: 6px">
                            <input class="cell3" type="button" value="Forget Password" >
                        </td>
                    </tr>
                </table>
            </form>

<%--            表三--%>
            <form id="register-form" style="display: none;">
                <table >
                    <br>
                    <caption style="text-align: center"><strong>New Member</strong></caption>
                    <br>
                    <tr>
                        <td class="cell1">ID</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入ID">
                        </td>

                    </tr>
                    <tr>
                        <td class="cell1">Password</td>
                        <td>
                            <input class="cell2" type="password" placeholder="请输入password">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Re-Password</td>
                        <td>
                            <input class="cell2" type="password" placeholder="请再次输入password">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">First Name</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入First Name">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Last Name</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入Last Name">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Address</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入Address">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">City</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入所在City">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">State</td>
                        <td>
                            <select class="cell4" type="text" placeholder="请输入State">
                                <option>[Select State]</option>
                                <option>111</option>
                                <option>222</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">County</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入County">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Email Address</td>
                        <td>
                            <input class="cell2" type="email" placeholder="请输入Email Address">
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Select Interest</td>
                        <td>
                            <input type="radio"/>Technology
                            <input type="radio"/>Enterprise
                            <input type="radio"/>Research
                            <input type="radio"/>Government
                            <input type="radio"/>People
                            <input type="radio"/>Life Style
                            <input type="radio"/>Opinion
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Question</td>
                        <td>
                            <select class="cell5" type="text" placeholder="请输入Question">
                                <option>[Select Question]</option>
                                <option>你喜欢什么?</option>
                                <option>你喜欢我吗?</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell1">Answer</td>
                        <td>
                            <input class="cell2" type="text" placeholder="请输入Answer">
                        </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>
                            <input class="cell3" type="button" value="Submit Information" >
                            <input class="cell3" type="button" value="Reset Form" >
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

تچ快乐杂货店يچ
关注
专栏目录
javaWeb 页面跳转方式&jdbc
weixin_65089602的博客
03-29 1547
思维导图 登录页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta h..
java跳转_java web里面页面跳转的方法总结
weixin_35700754的博客
02-12 1774
在Java Web开发中，经常会用到跳转页面的方法，一般有下面两种方法。Java代码HttpServletResponseresponse=newHttpServletResponse();response.sendRedirect(location)Java代码RequestDispatcherrd=newRequestDispatcher();rd.forward(reques...
JavaWEB快速入门页面跳转方式&JDBC交互【03】
m0_67768699的博客
03-24 2064
一、页面跳转方式 （1）javascript方式跳转 window.location.href = "跳转的地址" （2）java方式跳转 ① 转发 1.1 概述 由服务器端进行的页面跳转 1.2 方法 （1）获取转发器 RequestDispatcher rd = request....
JavaWEB（页面跳转方式&JDBC交互）
m0_63579794的博客
03-24 2720
JavaWEB（页面跳转方式&JDBC交互）
Java web注册表单提交之后页面跳转总结
a_Hello_tomorrow的博客
01-25 4773
单机注册表单提交后，有两种页面跳转方式，各有区别。 1、使用response.sendRedirect(跳转地址);方式进行跳转 response.sendRedirect("./qiantai/index.jsp"); 2、使用JavaScript提示框跳转 PrintWriter out = response.getWriter(); out.write("alert('恭喜您
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
10-22
主要基于Servlet+JSP+JavaBean开发模式实现JavaWeb用户登录注册功能实例代码，非常实用，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
JavaWeb登录注册源码
03-21
在这个项目中，可能会有专门的Servlet处理登录和注册的POST请求，而JSP页面则用来渲染表单和显示结果。 2. **HTTP协议与请求响应**：了解HTTP协议的基本原理，包括GET和POST请求，是编写登录注册功能的关键。登录...
javaweb和mysql登陆并显示登录信息
07-02
在JavaWeb开发中，结合MySQL数据库进行用户登录并显示...以上就是使用Struts2框架和MySQL数据库实现JavaWeb登录并显示登录信息涉及的主要知识点。这个过程中，良好的代码结构、数据安全和用户体验都是不可忽视的重点。
Javaweb 登录页面自动跳转
05-07
在JavaWeb开发中，登录页面自动跳转是一个常见的功能需求，它涉及到用户认证、会话管理以及URL重定向等核心概念。以下是对这个主题的详细解释： 1. **用户认证**：用户认证是验证用户身份的过程，通常在登录页面...
javaWeb_struts2框架实现简单用户注册登录
02-09
基于javaWeb MVC模式，借助struts2框架编写，实现用户简单的注册与登录功能。 1.本demo严格按照MVC的分层模式采用myeclipse编写，可直接运行，服务器为tomcat，数据库为mysql。 2.数据库操作使用c3p0连接池和dbtuils...
039 漂亮的登录界面 单页form表单【html登录注册页面代码】
05-31
039 漂亮的登录界面 单页form表单【html登录注册页面代码】
JavaWeb表单注册界面的实现方法
08-29
主要介绍了JavaWeb表单注册界面的实现方法的相关资料,希望通过本文大家能掌握这部分内容，需要的朋友可以参考下
一个注册表单
06-18
一个结合html css jquery 的实战小项目，注册表单，喜欢的可以下载看一下
简单的注册登录功能(JavaWeb项目)
06-04
简单的注册，登录功能，注册功能使用MySQL数据库，采用mvc编程模式，注册功能有详细的表单填写限制
java web怎么实现跳转,jsp实现一个简单的注册跳转界面 - Java / Web 开发
weixin_29341747的博客
03-20 331
我想实现一个注册跳转功能，可总是出现异常：程序也没什么问题啊？怎么回事。。。。。。(数据库已经连接上了)////////////////////////////////////////////////////////////////////////////////////////////exceptionorg.apache.jasper.JasperExceptionorg.apache.jas...
Java实现注册登录跳转
m0_52339405的博客
07-07 2189
创建数据库，创建一个登录表login存储用户的用户名和密码，使用sql insert语句将注册的信息插入到数据库中，使用sql select语句查询用户名和密码是否存在数据库的login表中，实现登录功能。 依赖 <dependencies> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java&l
使用javaweb实现登录注册页面，并且对功能和业务进行分层 用户登录成功跳转到主页并展示数据库的商品的信息
weixin_68829057的博客
02-18 4695
5：准备我们的实体类 （User类 和Goods类）起名和数据库的名字起的一样方便。一：首先我们因为要查询到数据 应该先建立我们需要的数据库。8：准备我们的java登录代码操作。二：准备我们的登录页面jsp代码。4：注册页面java代码操作。3：登录过后的主页内容显示。4：准备servlet映射。3：准备servlet映射。7：登录失败后显示的页面。三：注册页面jsp代码。四：登录页面显示效果。五：注册页面效果显示。
2021-08-22 过滤器实现登录权限拦截
pangiggs的博客
08-22 313
登录页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>登录</title> </head> <body> <form action="/servlet/login" method="post"> <input type="text" name="usernam.
几种方式实现Javaweb页面跳转
热门推荐
Davie's Happy Life
08-21 2万+
背景：         自己经手的一个java项目要实现带参页面跳转和页面跳转，完成任务后，总结一下自己知道了的几种方式。 实现：          首先我们有两大种方式来实现页面跳转：1、JS（javascript）；2、jsp跳转 我们先来说一下简单的js实现页面跳转：好几种，这里简单介绍3个         1、window.location.href="URL"
html表单登录页面
最新发布
03-05
HTML表单登录页面是一种常见的用户认证方式，用于用户在网站或应用程序中输入用户名和密码进行登录。以下是一个简单的HTML表单登录页面的示例： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h2>Login</h2> <form action="login.php" method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <input type="submit" value="Login"> </form> </body> </html> ``` 在上面的示例中，我们使用`<form>`元素创建了一个表单，并将其`action`属性设置为`login.php`，表示在用户提交表单时将数据发送到`login.php`处理。`method`属性设置为`POST`，表示使用POST方法发送表单数据。 表单中包含两个输入字段：用户名和密码。`<input>`元素用于创建输入字段，`type`属性设置为`text`和`password`分别表示文本输入和密码输入。`id`属性用于标识字段，`name`属性用于指定字段的名称，这些名称将在后端处理程序中使用。 最后，我们使用`<input>`元素创建了一个提交按钮，用户点击该按钮后将提交表单数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

تچ快乐杂货店يچ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值