jsp制作用户注册页面

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量2.7k 收藏 32
点赞数 3
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XZXLOVELXY/article/details/121422602
版权

 需要准备   bootstrap  jquery  

          导包

<link href="bootstrap\css\bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css\setting.css">
    <link rel="stylesheet" href="bootstrap\css\bootstrap-theme.css">
    <link rel="stylesheet" href="bootstrap\css\bootstrap-theme.min.css">
    <link rel="stylesheet" href="bootstrap\css\bootstrap.css">
    <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
    <script src="js\jquery-3.6.0.min.js"></script>
    <script src="bootstrap\js\bootstrap.min.js"></script>
    <script src="bootstrap\js\npm.js"></script>
    <script src="bootstrap\js\bootstrap.js"></script>

    <script src=" js\jquery-3.6.0.min.js"></script>

    <script src="bootstrap\js\bootstrap.min.js"></script>

css样式

/* 登录居中盒子样式 */
 #all {
        transform: translateY(50%);
        /*向下移动自身的一半*/
        /* background-color: rgb(97, 236, 241); */
        border: 1px solid  rgb(117, 245, 234, 0.3);
        
			/* width: 5rem;
			height: 5rem; */
			
            /* 背景透明  里面的元素不透明*/
            background:rgba(117, 245, 234, 0.3);
		

        height: 390px;
    }
    
    /* #all span {
        width: 5rem;
        height: 5rem;
        background: #87eec3;
    } */
    /* 验证码样式 */
    #verify{
        outline-style: none ;
        border: 1px solid #ccc; 
        border-radius: 4px;
        padding: 7px 0px;
    }
/* 注册盒子居中 */
    #sign-all{
          /*向下移动自身的30  向右移动自身的10*/
        transform: translateY(30%) translateX(5%);
        /* 向左移动 */
        
      
        /* background-color: rgb(97, 236, 241); */
        border: 1px solid  rgb(239, 241, 81, 0.3);
        
			/* width: 5rem;
			height: 5rem; */
            /* 设置注册框架大小 */
            width: 800px;
            
			
            /* 背景透明  里面的元素不透明*/
            background:rgba(239, 241, 81, 0.3); 
    }

body的内容

    body {
        background-image: url("img/3234.gif");
        /*整个图片作为背景，不够自动拉伸*/
        background-size: cover;
    }
    
</style>

<body>
<div class="container">
        <div class="col-md-offset-2 col-sm-8" id="sign-all">
            <h2 style="text-align: center; color:rgb(240, 135, 44)">
                <b style="font-family: Sofia;">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</b>
            </h2>
            <form class="form-horizontal" style="transform: translateX(-7%);" action="${pageContext.request.contextPath}/LoginController">

                <!-- 账号 -->
                <div class="form-group">
                    <label for="username"
                        class="col-sm-4 control-label">用<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>户</label>
                    <div class="col-sm-7">
                        <input class="form-control" type="text" name="userName" id="username"
                            placeholder="由2-12个字符组成"  />
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>
                <!-- 昵称 -->
                <div class="form-group">
                    <label for="username"
                        class="col-sm-4 control-label">昵<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>称</label>
                    <div class="col-sm-7">
                        <input class="form-control" type="text" name="nickname" id="nickname"
                            placeholder="由2-12个字符组成" />
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>
                <!-- 密码 -->
                <div class="form-group">
                    <label for="psw"
                        class="col-sm-4 control-label">密<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>码</label>
                    <div class="col-sm-7">
                        <input class="form-control" type="password" name="userpassword" id="psw"
                            placeholder="由6-18个字符组成" />
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>
                <!-- 确认密码 -->
                <div class="form-group">
                    <label for="psw" class="col-sm-4 control-label">确认密码</label>
                    <div class="col-sm-7">
                        <input class="form-control" type="password" name="userPassword2" id="psw"
                            placeholder="再次确认密码" />
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>

                <!-- 手机号码 -->
                <div class="form-group">
                    <label for="Phone" class="col-sm-4 control-label">手机号码</label>
                    <div class="col-sm-7">
                        <input name="userPhone" class="form-control" type="text" name="userPhone" id="Phone"
                            placeholder="需要绑定的手机号">
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>

                <!-- 性别-->
                <div class="form-group">
                    <label for="gender"
                        class="col-sm-4 control-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                    <div class="col-sm-7"
                        style="color: rgb(134, 126, 10);  font-weight:900; transform: translateY(20%);">
                        男<input name="gender" type="radio" id="gender"
                            style="cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        女<input name="gender" type="radio" id="gender" style="cursor:pointer">

                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>

                <!-- 年龄-->
                <div class="form-group">
                    <label for="gender"
                        class="col-sm-4 control-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</label>
                    <div class="col-sm-7" style="color: rgb(134, 126, 10); ">
                        <input name="age" type="text" id="age" class="form-control" placeholder="请输入真实合法年龄">


                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>

                <!-- 邮箱 -->
                <div class="form-group">
                    <label for="email"
                        class="col-sm-4 control-label">邮<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>箱</label>
                    <div class="col-sm-7">
                        <input name="email" class="form-control" type="email" name="email" id="email"
                            placeholder="例如:123@123.com">
                    </div>
                    <div class="col-sm-1">
                    </div>
                </div>
                <div class="form-group"></div>
                <div class="form-group"></div>
                <div class="form-group">
                    <button type="submit" class="btn btn-success col-sm-12"
                        style="width: 50%; transform: translateX(65%)">注册</button>

                    <!-- <div class="form-group">
                    <label for="userName" class="col-sm-3 control-label col-md-offset-1">请输入用户名:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="userName" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="passwd" class="col-sm-3 control-label col-md-offset-1">密码：</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="passwd" placeholder="请输入密码">
                    </div>
                </div>
                <div style=" transform: translateX(18.5%)">
                    <button type="submit" class="btn btn-primary btn-block btn-flat" style="width: 320px;">登录</button>
                </div> -->

                    <div style=" transform: translateX(41%)   translateY(140%); ">
                        <a href="Lonig.html" style="color: rgb(85, 80, 5)"> <b>已有账号,直接登录 </b></a>

                    </div>
                </div>
            </form>

        </div>

    </div>
</body>

成品为:

紫星LZ
关注
  • 3
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用户注册页面表单设计
06-16
用户注册的表单网页，有两次密码输入是否正确的判断，提交窗口的弹出，同页面的重制和提交，多个选项的设置，下拉菜单的设置
用jsp实现简单登入注册界面功能（css美化）（软件idea）
程序猿追的博客
03-24 4万+
思路：创建登入界面（login），再创建登入成功与登入失败界面（loginsuccess与loginfail），再创建注册成功界面（registersuccess）与注册界面（register）以及总控制文件（check）通过form标签的action将他们连接起来。 第一步 首先我们来看看效果 登入界面（login） 登入成功与登入失败（loginsuccess与loginfail） 注册界面（register） 注册成功(registersuccess) 第二步 创建项目，再添加框
用JSP做个简单的登录注册页面
热门推荐
l1051663145的博客
10-21 8万+
用JSP做个简单的登录注册页面 第一步先分析整个过程，然后得出大概思路。 首先，进入登录页面（login.jsp），如下： 我们是没有账号的所以需要注册账号，所以这时候必须有一个注册页面（register.jsp）,如下 紧接着注册成功后跳转成功页面，这时我们需要一个注册成功的页面（registersuccess.jsp）,如下： 点击返回页面后，我们就可以在登录页面登录，然后登录时有登录成功和登录失败的页面。所以还要再写两个（loginsuccess.jsp loginfailure.jsp）如下
用JSP简单的写一个登录注册页面
qq_52076808的博客
07-10 1万+
用JSP简单的写一个登录注册页面，并对输出是的乱码进行处理
JSP实现简单的登录和注册
weixin_61370021的博客
03-19 8516
JSP实现简单的登录和注册，使用Map集合模拟数据库存储数据
JSP实现登录与注册界面
bb_111的博客
10-05 4111
JSP实现登录与注册界面
【JSP】实现注册页面跳转以及注册用户功能实现
懂得一千零一种,赋予你失败的方法！
01-23 1万+
文章目录一、目标二、注册页面的实现Ⅰ.实现注册页面跳转Ⅱ.制作注册页面Ⅲ.完善dbHelper类Ⅳ.创建RegisterServletⅤ.效果展示 一、目标 在之前的一篇文章中我们做了登陆界面，并且实现了登陆时与数据库信息的交互，成功登陆了页面。今天，接下去，实现注册界面的设计以及功能实现。 二、注册页面的实现 Ⅰ.实现注册页面跳转 <%-- Created by IntelliJ IDEA. User: 35192 Date: 2021/1/21 Time: 20:33 T..
jsp页面注册
weixin_70738141的博客
02-19 882
jsp
jsp实现注册页面，以及如何实现验证码，同时包含jsp异步请求实现用户名查询，防止出现用户名重复。
zzjlmn的博客
12-29 901
javaWeb注册页面前后端实现，以及验证码实现
Jsp 页面注册与登录实现
05-18
页面注册与登录实现 Jsp注册与登录 Jsp注册与登录 Jsp注册与登录
JSP编写的注册页面
10-21
带有全国三级省市三级联动的JSP注册页面
Jsp+Servlet实现简单登录注册查询
01-08
制作一个注册页面 用户输入： 用户名 密码 年龄 注册成功：——>跳转至登录页面进行登录 注册失败：——>文字或其他形式的提示皆可 2、简易查询： 制作一个查询页面 输入用户名 显示该用户的用户名、密码、年龄 ...
简单的用户注册登录
07-06
里面是一个例子，详细的描述了如何通过jsp语言制作的用户登录注册页面
jsp页面，连接数据库实现增删改查
11-02
友好而美观的jsp页面实现用户注册，登录（修改数据库中中的相关数据）
element-ui的bug记录
nick_zhang的博客
04-29 518
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 105
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 916
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 826
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 369
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
javaweb登录注册页面jsp
09-13
对于JavaWeb登录注册页面，通常会使用JSP（JavaServer Pages）来实现。JSP是一种基于Java技术的服务器端网页开发技术，它允许我们在HTML页面中嵌入Java代码，从而实现动态内容的生成和交互。 在登录注册页面的JSP文件中，我们可以通过HTML表单来收集用户输入的用户名和密码，并将其传递给后台进行验证。在后台验证时，可以使用类似于引用中提到的代码来查询数据库，检查用户提供的用户名和密码是否匹配。如果匹配成功，则可以让用户跳转到登录后的学生页面。 登录注册页面通常分为两个部分，一个是登录部分，另一个是注册部分。在登录部分，用户需要输入已注册的用户名和密码进行登录。在注册部分，用户需要填写一些必要的信息并提交，这样就可以创建一个新的用户账号。 在JSP中，我们可以使用表单元素、按钮、链接等HTML元素来实现登录和注册的功能。通过编写相应的控制器和业务逻辑代码，我们可以处理用户提交的数据，并进行相应的操作，比如验证用户信息、创建新的用户账号等。 总之，使用JSP可以方便地实现JavaWeb登录注册页面，通过HTML表单和后台代码的结合，我们可以实现用户的认证和注册功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值