html注册界面示例分享

最新推荐文章于 2024-04-07 09:44:00 发布
最新推荐文章于 2024-04-07 09:44:00 发布
阅读量200 收藏
点赞数
分类专栏： 笔记 文章标签： css html js javascript 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58821483/article/details/117748378
版权

 效果图

背景图片需要自己添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script type="text/javascript">
        function checkEmail(node){
            var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
            if(email.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function checkUser(node)
        {
            var name = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,5}$/i;
            if(name.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function checkPsw(node)
        {
            var psw = /^(?!_)(?!.*?_$)[\w]{6,16}$/i;
            if(psw.test(node.value))
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function rcheckPsw(node)
        {
            var psw = document.getElementById("password1").value;
            if (psw=="")
            {
                node.value="";
                return ;
            }
            if(node.value==psw)
            {
                node.style.color="#28ff28";
            }
            else
            {
                node.value="";
            }
        }
        function register()
        {
            if (document.getElementById("email").value == "") { alert("请填写邮箱！"); return; }
            if (document.getElementById("username").value == "") { alert("请填写用户名！"); return; }
            if (document.getElementById("password1").value == "") { alert("请填写密码！"); return; }
            if (document.getElementById("password2").value == "") { alert("请确认密码！"); return; }
            localStorage.setItem("email",document.getElementById("email").value);
            localStorage.setItem("username",document.getElementById("username").value);            
            var item = null;
            var obj = document.getElementsByName("sex")
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) {
                    item = obj[i].value;                   
                }
            }
            localStorage.setItem("sex",item); 
            localStorage.setItem("password",document.getElementById("password1").value);
            alert("已成功提交您的注册信息！");
            window.location.href="登录.html";
        }
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family:宋体;
            background-image: url("../../images/10087.jpg");
            background-size: cover;
        }

        #bigbox{
            margin: auto;
            margin-top: 20px;
            width: 900px;
            height: 600px;
        }

        #bigbox_left {
            /*设置整体的尺寸、背景色、边距等*/
            width: 600px;
            height: 600px;
            border: 8px solid #eeeeee;
            float: left;
            background: rgba(0, 0, 0,0.6);
        }

        #bigbox_right {
            /*设置整体的尺寸、背景色、边距等*/
            width: 300px;
            height: 600px;
            border: 8px solid #eeeeee;
            background: white;
            float: right;
            background-image: url("../../images/10088.jpg");
        }

        #left {
            /*设置左浮动和外边距*/
            float: left;
            margin: 10px;
        }

        #left > p:first-child {
            /*设置段落（新用户注册）颜色和字体大小*/
            color: gray;
            font-size: 20px;
        }

        #left > p:last-child {
            /*设置段落（USER REGISTER）颜色和字体大小*/
            color: #A6A6A6;
            font-size: 20px;
        }

        #center {
            /*设置中间的各种输入框等*/
            margin:0 auto;
            float: right;
            width: 600px;
        }

        #right {
            /*设置右边段落浮动和外间距*/
            float: right;
            margin-top:500px;
            margin-right:30px;
        }

        #right > p:first-child {
            font-size: 15px;
        }

        #right p a {
            /*设置超链接（立即登录）颜色*/
            color: crimson;
            text-decoration:none;
        }

        .td_head {
            /*设置表单中字体对齐方式和宽度、高度*/
            color:#fff;
            width: 100px;
            height: 30px;
        }

        .input{
            /*设置输入框大小和边框*/
            width: 250px;
            height: 30px;
            margin-bottom: 5px;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            text-align: center;
            color:#fff;
            background: rgba(0, 0, 0,0);
        }

        .input::-webkit-input-placeholder{
            color: #a0a0a0;
            font-size: 10px;
        }

        .input1{
            /*设置输入框大小和边框*/
            display: none;
            width: 250px;
            height: 30px;
            margin-bottom: 5px;
            border: none;
            border-bottom: 1px solid white;
            outline: none;
            text-align: center;
            color:#fff;
            background: rgba(0, 0, 0,0);
        }

        #but_code{
            width: 100px;
            height: 30px;
            border: 1px solid #A4A4A4;
            /* 设置边框为圆角 */
            border-radius: 8px;
        }

        #zhuce{
            margin: 0 auto;
            text-align: center;
        }

        #btn_sub{
            /*注册按钮*/
            margin-top:20px;
            background: orangered;
            color: whitesmoke;
            width: 150px;
            height: 40px;
            border: 1px solid gray ;
            border-radius: 30px;
        }
        table{
            margin:0 auto;
            text-align: center;
        }
        .btn{
            width: 80px;
            height:30px;
            margin-top: 30px;
            text-transform: uppercase;
            border: 2px solid #fcfcfc;
            color:#fcfcfc;
            text-align: center;
            border-radius: 30px;
            background: rgba(0, 0, 0,0);
            cursor: pointer;
            transition: .2s;
        }
        #bigbox_right .div1{
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
            color:#fcfcfc;
            font-size: 30px;
        }
        #bigbox_right .div2{
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
            color:#fcfcfc;
            font-size: 15px;
        }
        #bigbox_right .div3{
            margin: 0 auto;
            text-align: center;
            padding-top: 150px;
            color:#fcfcfc;
            font-size: 30px;
        }
        .fileinput {
            width: 102px;
            height: 34px;
            opacity: 0;
            padding: 0;
            margin: 0;
        }
        .filefont {
            width: 150px;
            height: 34px;
            margin:0 auto;
            margin-top: -36px;
            display: block;
            line-height: 34px;
            border: 1px solid white;
            border-radius: 20px;
            color: #fff;
        }
    </style>
</head>
<body>
    <!--表单内容-->
    <div id="bigbox">
        <div id="bigbox_left">
            <div id="left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
            <div id="center">
                <div class="form">
                    <form action="http://www.baidu.com/" method="post" onsubmit="return false" autocomplete="off">
                        <table>
                            <tr>
                                <td class="td_head"><label>邮箱</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" class="input" name="email " id="email" onblur="checkEmail(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>用户名</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" class="input" name="username" placeholder="用户名长度不超过5位" id="username" onblur="checkUser(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>性别</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" checked="checked" name="sex" value="男"><span style="color: white;">男</span>
                                    <input type="radio" name="sex" value="女"><span style="color: white;">女</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>头像</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="file" name="" id="" class="fileinput">
                                    <div class="filefont">点击上传头像</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>设置密码</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" class="input" name="password1" placeholder="密码长度至少为6位且为字母与数字的组合" id="password1" onblur="checkPsw(this)">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_head"><label>确认密码</label></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" class="input" name="password2" placeholder="两次密码输入须一致" id="password2" onblur="rcheckPsw(this)">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div id="zhuce">
                    <button id="btn_sub"  onclick="register()">注册</button>
                </div>
            </div>
        </div>
        <div id="bigbox_right">
            <div class="div1">已有账号?</div>
            <div class="div2">有账号就登录吧，好久不见了！</div>
            <div class="div3"><button class="btn" OnClick="javascript:window.location.href='登录.html'">登录</button></div>
        </div>
    </div>
</body>
</html>

 

谭家菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML网页设计基础——用户注册界面
m0_64365419的博客
11-05 9499
定义表格---->将网页中的表单元素根据上图所示放入不同的行和列中。代码如下： 该实例包含的行和单元格的个数比较多，在书写代码的时候注意不要漏写，可以使用空格隔开，以便于检查。表格后几行的第一个单元格是没有内容的，虽然没有内容，但是还是需要定义空格单元格，这样才能保证和要求的表格一致。
HTML案例之注册页面
rihjyy的博客
02-07 1万+
HTML案例之注册页面 经过前面的学习，我们已经学了很多的标签和语法了，HTML的学习即将告一段落，我们一起来做一个综合的练习：做一个简单的小说网站的注册页面。 废话不多说，直接上代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
HTML实现用户注册页面
qq_64314976的博客
07-14 3万+
HTML实现用户注册页面
html写一个登录注册页面
最新发布
liulang68的博客
04-07 7233
【代码】html写一个登录注册页面。
HTML5用户注册页面实现案例
＃两个西柚
03-20 2374
【代码】HTML5用户注册页面实现案例。
用html+css制作简单好看的登陆注册界面
热门推荐
小袁同学的博客
07-19 6万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
html5调用app分享功能示例（WebViewJavascriptBridge）
09-27
为了处理分享成功后的反馈，HTML5页面需要注册一个`WebViewJavascriptBridgeReady`事件监听器。当JavaScript桥接准备就绪时，会调用`connectWebViewJavascriptBridge`函数内的回调，初始化通信通道。这样，原生APP...
PHP实现的用户注册表单验证功能简单示例
01-02
注册界面 register.html 用户注册 <form method=post action=register_verify.php> <input type=text placeholder=用户名 name=username> <br> <input type=password placeholder=密码 name...
JS校验与最终登陆界面功能完整示例
01-19
本文实例讲述了JS校验与最终登陆界面...注册页面</title> <meta charset=UTF-8/> [removed] // 校验用户名 function checkUname(){ // 获取用户名对象 var uname=document.getElementById(uname).val
bootstrap模态框示例代码分享
08-30
以上就是关于Bootstrap模态框的核心知识点，了解并熟练运用这些特性，可以帮助开发者创建出功能强大且用户体验良好的Web应用界面。在实际项目中，可以根据需求对模态框进行适当的修改和扩展，以满足各种复杂场景的...
jQuery表单验证简单示例
11-29
这几天一直在做一个表单验证的页面，为了达到友好界面，特意去抄了360buy的页面，模仿写了一个页面 jquery 表单验证 就是验证表单里面所信息都为必填 //注册页面验证机制 $("#username").focus(function(){ //用...
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
HTML实现简单注册登录页面
m0_57714421的博客
12-21 1万+
HTML实现注册登录
超级简单的登录注册界面（HTML+CSS）
weixin_74947024的博客
05-19 1967
初学html和css，然后用它写了一个简单的登录注册页面
HTML实现登录注册界面
m0_74135466的博客
11-01 5017
【代码】HTML实现登录注册界面。
HTML好看的登录注册界面
m0_74853171的博客
05-09 1546
input class="input100" type="password" name="pass" placeholder="请输入用户名"><input class="input100" type="password" name="pass" placeholder="密码"><input class="input100" type="text" name="email" placeholder="邮箱"><a href="javascript:" class="txt1">忘记密码？
用html简单做一个注册页面。
Jeffrey_11的博客
12-02 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url("./1.png"); } </style> </head> <body.
【Java 进阶篇】创建 HTML 注册页面
繁依Fanyi的博客
10-09 1655
通过本博客，我们学习了如何创建一个简单的HTML注册页面，包括表单元素、标签、输入字段和提交按钮。我们还了解了一些用于验证用户提交数据的常见技巧和最佳实践。最后，我们强调了表单处理后的成功页面和错误处理的重要性，以提供良好的用户体验。创建注册页面是HTML表单的基础，这个例子可以扩展到更复杂的表单和应用中，以满足不同的需求。希望这个博客对于初学者能够提供有关HTML表单的清晰概念和起点。
如何将html变成微信的自定义分享
09-18
这是微信提供的一组 JavaScript 库，可以让你在 HTML 页面中调用微信的分享功能。 下面是一个简单的示例，展示了如何使用微信 JavaScript SDK 实现自定义分享： ```html <!DOCTYPE html> <html> 微信自定义分享 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值