登陆、注册页面编写

最新推荐文章于 2022-03-26 11:14:07 发布
最新推荐文章于 2022-03-26 11:14:07 发布
阅读量526 收藏 4
点赞数
分类专栏： html 文章标签： html html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37634735/article/details/107043971
版权

 注册页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>register</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(background.jpg) ;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 650px;
            background-color: chocolate;
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }

        .sexDiv>input,
        .hobby>input {
            width: 30px;
            height: 17px;
        }

        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        .introduce {
            margin-left: 110px;
        }

        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }

        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
</head>

<body>
    <div id="loginDiv">
        <form action="">
            <h1>注册</h1>
            <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

            <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>

            <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>

            <p>
                用户类型:
                <select name="type" id="userType">
                    <option value="0">请选择</option>
                    <option value="1">普通类型</option>
                    <option value="2">VIP类型</option>
                </select>
                <label id="type_trip"></label>
            </p>

            <div class="sexDiv">
                用户性别:
                <input class="userSex" name="sex" value="boy" type="radio">男
                <input class="userSex" name="sex" value="girl" type="radio">女
                <label id="sex_trip"></label>
            </div>
            <p>
                出生日期:
                <input id="birthday" type="date">
                <label id="birthday_trip"></label>
            </p>
            <p class="hobby">
                兴趣爱好:
                <input type="checkbox" name="hobby" value="read">阅读
                <input type="checkbox" name="hobby" value="music">音乐
                <input type="checkbox" name="hobby" value="sport">运动
                <label id="hobby_trip"></label>
            </p>
            <p>
                电子邮件:
                <input id="email" type="email" required>
                <label id="emil_trip"></label>
            </p>
            <p> 自我介绍:</p>
            <div class="introduce">
                <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
                <label id="introduce_trip"></label>
            </div>
            <p style="text-align: center;">
                <input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">
                <input type="reset" class="button" value="重置">
            </p>
        </form>
    </div>

</body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }

    function checkSex() {
        var sexNum = document.getElementsByName("sex");
        var sex = "";
        for (let i = 0; i < sexNum.length; ++i) {
            if (sexNum[i].checked) {
                sex = sexNum[i];
            }

        }
        if (sex == "") {
            trip("sex_trip", "ERROR!!");
            return false;
        } else {
            trip("sex_trip", "OK!!");
        }
    }

    function checkHobby() {
        var hobbyNum = document.getElementsByName("hobby");
        var hobby = "";
        for (let i = 0; i < hobbyNum.length; ++i) {
            if (hobbyNum[i].checked) {
                hobby = hobbyNum[i];
            }
        }
        if (hobby == "") {
            trip("hobby_trip", "ERROR!!");
            return false;
        } else {
            trip("hobby_trip", "OK!!");

        }
    }

    function checkSelect() {
        var myselect = document.getElementById("userType");
        var index = myselect.selectedIndex;
        var checkValue = myselect.options[index].value;
        if (checkValue == 0) {
            trip("type_trip", "请选择!!");
            return false;
        } else {
            trip("type_trip", "OK!!");
        }
    }

    function checkForm() {
        checkSelect();
        checkHobby();
        checkSex();

        var trip = document.getElementsByName("em");
        var tripV = trip.innerHTML();
        //获取用户名输入项
        var userNname = document.getElementById("userNname");
        var uName = userNname.value;
        if (uName.length < 1 || uName.length > 10) {
            trip("name_trip", "账号长度为1-10位!!");
            return false;
        } else {
            trip("name_trip", "OK!!");

        }

        //密码长度大于6 和确认必须一致 
        var password = document.getElementById("password");
        var userPass = password.value;
        if (userPass.length < 6) {
            trip("password_trip", "密码要>6位!!");
            return false;
        } else {
            trip("password_trip", "OK!!");
        }

        //获取确认密码框的值 var
        var surePassword = document.getElementById("surePassword");
        var surePass = surePassword.value;
        if (userPass != surePass) {
            trip("surePassword_trip", "两次密码不一致!!");
            return false;
        }

        //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        var inputEmail = document.getElementById("email");
        var uEmail = inputEmail.value;
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
            trip("emil_trip", "邮箱不合法!!");
            return false;
        } else {
            trip("emil_trip", "OK!!");
        }

        // 校验自我介绍
        var introduceText = document.getElementById("introduceText");
        var introduce = introduceText.value;
        if (introduce.length < 3 || uName.length > 60) {
            trip("introduce_trip", "长度为3-50字!!");
            return false;
        } else {
            trip("introduce_trip", "OK!!");
        }

        return true;
    }

    function submitT() {
        if (checkForm()) {
            return true;
        } else {
            return false;
        }
    }
</script>

</html>

登陆页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(background.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: chocolate;
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="loginDiv">
        <form action="" id="form">
            <h1 style="text-align: center;color: aliceblue;">登录界面</h1>
            <p>用户名:<input id="userNname" type="text"><label id="name_trip"></label></p>

            <p>密&nbsp;&nbsp;码&nbsp;:<input id="password" type="password"> <label id="password_trip"></label></p>
            <!-- &nbsp;这代表空格，调整登录注册之间的位置，使其对齐 -->

            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" value="登录">
                <input type="reset" class="button" value="注册">
            </div>
        </form>
    </div>

</body>

</html>

 

飞龙王
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IDEA登陆注册页面.rar
07-10
在本项目中，我们主要探讨如何使用IntelliJ IDEA（简称IDEA）开发一个基于Java的登陆注册页面，并集成MySQL数据库进行数据存储。这个过程涵盖了前端界面设计、后端业务逻辑处理以及数据库交互等多个关键环节。 首先...
超详细编写登录注册页面（内含验证码登录）
m0_57448314的博客
04-21 1万+
登录、注册、验证码的代码都有，并且详细讲解。
登录注册界面
菜鸟-传奇
04-14 1万+
登录注册界面 具体实现 先看一下最终效果，登陆和注册 背景图片： 附源码： login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <st...
简单登录注册页面（HTML5、CSS、JS）
weixin_49861340的博客
03-26 1万+
使用HTML5和简单的CSS样式写一个登录注册页面，JS和CSS都在HTML5中 登录代码如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</titl
python实现网站的自动登录（selenium实现，带验证码识别）
Paramete的博客
11-30 1万+
python实现网站自动登录（selenium实现，带验证码识别） 一、前言 这是鄙人写的第一篇博客，旨在总结一下近期所学，本文通过selenium工具实现工作所用网站的自动登录，下图为网站登录界面。 1、运行环境 操作系统：Windows10 python版本：python3.7 2、需要的python第三方库 1、selenium 安装：pip install selenium seleniu...
ddd.zip_eclipse mysql_登陆注册页面javaweb
09-24
1. 创建HTML表单：编写登录和注册页面的HTML，包括输入字段和提交按钮。 2. 编写Servlet：在Eclipse中创建Servlet类，重写doPost方法，处理HTTP POST请求。 3. 数据库操作：使用JDBC建立数据库连接，执行SQL语句，如...
PyQt 编写的用户登录，注册页面源码
06-03
客户端注册页面实现功能： 1、用户注册，保存注册成功用户数据。 2、检验用户ID，ID只能为字母与数字，不允许中文或其他特殊字符。 3、检查注册用户ID是否已存在，存在时拒绝注册。 4、检查用户密码，用户密码为6-10...
简单的登陆注册页面源码
07-29
在IT行业中，构建登录注册页面是基础且至关重要的一步，尤其对于C#初学者来说，理解这一过程能帮助他们快速入门Web开发。本资源提供的"简单的登录注册页面源码"是一个很好的学习起点。 首先，登录注册功能是任何...
python tkinter pickle 实现注册登陆页面
01-15
在注册页面，除了这两个输入框外，可能还会有一个确认密码的输入框和注册按钮。使用Tkinter，我们可以创建这些控件，并通过事件绑定来处理用户的交互，例如点击按钮时触发特定的函数。 接着，pickle模块在这个项目...
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
模仿唯品会设计的静态页面
12-29
使用dreamweaver实现的模仿唯品会实现的纯css+js静态页面。
getElementById() 方法以及innerhtml属性
webcenterol
09-28 2453
定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。 不过，如果您需要查找文档中的一个特定...
在document.getElementById("oDiv").innerHTML="JS执行问题";
quweiie的专栏
10-19 1万+
//====================== //此事例中js代码虽被赋值给oDiv,But js is not executed. //====================== "text/javascript"> var callback=function(){  if (xmlHttp.readyState==4&&xmlHttp.status==20
getElementById和$()获取值一点注意事项
weixin_30487701的博客
12-06 179
<script type="text/javascript"> window.onload = function () { var obj = document.getElementById("divID"); alert(obj.innerHTML); } $(fun...
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
document.getElementById()使用方法
weixin_33953384的博客
06-17 205
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 參数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：依据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如相应的为一组对象。则返回该组对象...
登录注册界面模板
菜鸟-传奇
04-14 6万+
登录注册界面 案例一 具体实现 先看一下最终效果，登陆和注册 背景图片： 附源码： login.html <!DOCTYPE html> <!-- saved from url=(0047)file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html --> <html lang="en"><head&...
简单制作登录注册页面
weixin_43132106的博客
09-05 6万+
在一个网页中，html负责页面布局和内容，css负责组件具体样式，JS则与后台进行交互。 在设计网页前先介绍DIV，简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件，包括另外的DIV。 制作登录界面。登录界面一般有两个文本框，分别用来获取用户的用户名和密码。我们也考虑用户忘记密码和未进行注册的情况，故也要加上这两个功能区域。 首先我们为登录界面设置一个标题： ...
用vue编写登陆注册页面
最新发布
05-19
好的，下面我将给您提供一个简单的示例代码，仅供参考： ``` 登录 ...您可以在这两个方法中编写与后端交互的代码，完成用户登录和注册的功能。同时，该示例还添加了简单的样式，以美化页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值