一个注册页面

最新推荐文章于 2022-08-15 19:49:49 发布
最新推荐文章于 2022-08-15 19:49:49 发布
阅读量265 收藏 1
点赞数
分类专栏： PC端页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35367566/article/details/103147718
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body,input{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url(images/bg.jpg);/*设置背景图片*/
            background-repeat:no-repeat;/*图片适应窗口大小，这里设置的是不进行平铺*/
            background-attachment: fixed;/*图片相对于浏览器固定,这里设置背景图片固定，不随内容滚动*/
            background-origin: border-box;/*从边框区域显示*/
            background-size:cover;/
        }
        input{
            display: inline-block;
            background: #fff;
        }
        .container{
            width: 100%;
        }
        .register-box{
            position: relative;
            height: 800px;
            width: 800px;
            top: 50px;
            margin: 0 auto;
            z-index: 99999;
            background:#ffffff;
            border: 7px solid #ccc;
        }
        .title-box{
            position: absolute;
            width: 300px;
            height: 50px;
            margin-left: 250px;
            margin-top: 5px;
            text-align: center;
            font-size: 28px;
            font-weight: 800;
            color: black;
            line-height: 50px;
        }
        .username-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:100px;
            margin-left:80px;
            font-weight: 700;
        }
        .username-input{
            display: inline-block;
            margin-left: 45px;
            /*background: green;*/
        }
        #username{
            height: 35px;
            width: 290px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        .password-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:180px;
            margin-left:80px;
            font-weight: 700;
        }
        .password-input{
            display: inline-block;
            margin-left: 61px;
        }
        #password{
            height: 35px;
            width: 290px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        .rePassword-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:260px;
            margin-left:80px;
            font-weight: 700;
        }
        .rePassword-input{
            display: inline-block;
            margin-left: 28px;
        }
        #rePassword{
            height: 35px;
            width: 290px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        .phone-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:340px;
            margin-left:80px;
            font-weight: 700;
        }
        .phone-input{
            display: inline-block;
            margin-left: 28px;
        }
        #phone{
            height: 35px;
            width: 290px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
        .email-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:420px;
            margin-left:80px;
            font-weight: 700;
        }
        .email-input{
            display: inline-block;
            margin-left: 28px;
        }
        #email{
            height: 35px;
            width: 290px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }

        .gender-box{
            position: absolute;
            width: 420px;
            height: 40px;
            line-height: 40px;
            margin-top:500px;
            margin-left:82px;
            font-weight: 700;
        }
        .gender-input{
            display: inline-block;
            margin-left: 62px;
        }
        .require{
            color: red;
        }
        .submit-box{
            position:absolute;
            width: 66px;
            height: 40px;
            line-height: 40px;
            margin-top: 580px;
            margin-left:200px;
            border-radius: 5px;
            background: grey;
        }
        #submit-button{
            display: inline-block;
            width: 66px;
            height: 40px;
            border-radius: 5px;
            background: green;
        }
        .goLogin-box{
            position:absolute;
            width: 150px;
            height: 20px;
            margin-top: 600px;
            margin-left:320px;

        }

    </style>
</head>
<body>
<div class="container">
    <div class="register-box">
        <div class="title-box">
            <span>用户注册页面</span>
        </div>
        <form action="#" method="post">
            <div class="username-box">
                <span class="require">*</span>
                <label for="username">用户名</label>
                <div class="username-input">
                    <input type="text" id="username" name="username" placeholder="请输入用户名 " />
                </div>
            </div>

            <div class="password-box">
                <span class="require">*</span>
                <label for="password">密码</label>
                <div class="password-input">
                    <input type="password" id="password" name="password" placeholder="请输入密码 " />
                </div>
            </div>

            <div class="rePassword-box">
                <span class="require">*</span>
                <label for="rePassword">确认密码</label>
                <div class="rePassword-input">
                    <input type="password" id="rePassword" name="RePassword" placeholder="请重复输入密码" />
                </div>
            </div>

            <div class="phone-box">
                <span class="require">*</span>
                <label for="phone">手机号码</label>
                <div class="phone-input">
                    <input type="text" id="phone" name="phone" placeholder="请输入手机号码" />
                </div>
            </div>

            <div class="email-box">
                <span class="require">*</span>
                <label for="email">电子邮箱</label>
                <div class="email-input">
                    <input type="text" id="email" name="email" placeholder="请输入邮箱地址" />
                </div>
            </div>

            <div class="gender-box">
                <span class="require">*</span>
                <label for="gender">性别</label>
                <div class="gender-input">
                    <input type="radio" id="gender" name="gender" value="男" checked="checked" />男   
                    <input type="radio" id="gender" name="gender" value="女" />女
                </div>
            </div>

            <div class="submit-box">
                <input id = "submit-button" type="submit" value="注册">
            </div>

            <div class="goLogin-box">
                <a href="#" style="text-decoration: none;">已有账号？去登录</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

效果如下图

在这里插入图片描述

小奔跳跳
关注
专栏目录
html注册页面代码实现案例,H5制作一个注册页面的代码实例
weixin_33425215的博客
06-09 3018
HTML5写的注册页面，正在学习html5的朋友可以参考下代码如下:register.html function play(){ document .getElementById("menu_item").style. display = ""; } function noplay(){ document.getEleme...
用php写出登录注册,用PHP写一个简单的登录注册页面
weixin_28683689的博客
03-09 3104
大家好，这里是耐特PHP，今天给一些学PHP刚入门的朋友介绍一个用PHP写后台的时候，做一个简单的登录和注册的页面。首先我们需要配置一个PHP的环境，其实现在有很多个工具都可以一次帮你搞定这个，好像我经常用的就是PHPSTUDY，以前我也用过WAMP和其他的工具，但是个人还是比较推荐PHPSTUDY，大家可以直接去它的官网下载，现在新版的PHPSTUDY已经越来越傻瓜式了~~基本上完全不用自己来配...
一个HTML注册页面
11-06
一个很简单的HTML表单提交页面，还可以扩展成将其提交至jsp页面
简单的注册页面
weixin_45165848的博客
08-04 1511
一个简单的注册页面，还未连接数据库，当打开程序时，将会随机产生一组10位数的账号（不能改动）， 如果点击注册，尚框内尚还有未填，或者数据错误提示错误，如果未发生错误将会跳转到新页面。 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></...
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
一个简单的注册 登录界面
07-21
点击注册按钮，弹出对话框让你填用户名和密码，注册好之后，去登录界面填信息，然后点击登录，程序会根据你填的信息是否正确返回信息给你~是用MFC做的，初学者看看的哈~
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
【Web】HTML 账号注册页面
common reader
01-16 4万+
使用CSS的选择器功能美化账号注册界面。
登录注册的页面制作
weixin_33889665的博客
12-19 331
下面来做一个超简易的登录注册 先来说注册 得先写个大标题证明是注册页面，然后再就是文本框填内容，在注册这里建三个文本框，用户名，密码，还有姓名，最后还有一个注册的按钮，用来跳转页面 分析好了之后，先建注册页面的第一个网页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
html中注册跳转到另一个页面,js本地注册跳转到另外一个页面显示注册信息
weixin_33835558的博客
06-04 1303
!DOCTYPE html>Documentbody {background: #F6F9FB;}label {width: 40px;display: inline-block;}span {color: red;}.container {position: relative;margin: 100px auto;width: 600px;height: 400px;padding-lef...
HTML+css+js实现一个完整的登录+注册页面
最新发布
12-27
html登录注册页面 使用div标签来划分页面的不同区域，方便进行样式设置和内容填充。 使用label标签来为输入框添加文本标签，方便用户输入和验证。 使用button标签来创建登录和注册按钮，设置背景颜色、边框样式和...
实现一个简单的注册页面功能，包括抓取注册用户的注册信息
weixin_43748930的博客
01-09 2558
注册界面 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
HTML(2) 实现一个简单的注册页面
郑清
09-14 1万+
效果图如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>注册页面</title> <style> table{ ...
一个简单的注册页面制作
qq_45126027的博客
11-02 1677
一个简单的网页–流水哗啦啦购物平台： 点击注册新用户后，出现的注册页面： 当密码少于八位时出现的提示： 当密码格式不正确时出现的提示： 当年龄格式不正确时出现的提示：（年龄有效格式为1-120之间的数 ） 注册成功： 代码： 流水哗啦啦购物平台页面： 流水哗啦啦平台页面css代码（部分） 注册页面代码： 验证密码是否为空、密码是否少于八位，密码格式是否正确 验证年龄是否正确 注册页面设计： ...
html动手做做一个简单的注册页面
qq_40180411的博客
08-07 1万+
1.创建一个html文件 2.根据案例图片进行设计 3.写相应的html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;META http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title &gt;注册&lt;/tit
用html写一个简短的员工注册界面
mischen520的博客
07-02 8679
用html写一个简短的员工注册界面 下面这是我自己写的一个小界面，有好多功能还不够完善，算是对html有个初步的了解了 mischen 表单 员工注册界面 编  号:<input type="text" name="userid" value="请输入编号" >
HTML-做一个网页的注册登记表单
晴天下的大头娃娃
11-05 4万+
/* *Copyright (c) 2017，烟台大学计算机学院 All rights reserved. *文件名称：关于HTML的练习 *作 者：张晴晴 *完成日期：201711月5日 *版 本 号：v1.0 * *问题描述：HTML5的新特性 *输入描述： 无 *程序输出： 无 */ 表单练习 body{ font-size:12px; fon
简单制作登录注册页面
热门推荐
weixin_43132106的博客
09-05 6万+
在一个网页中，html负责页面布局和内容，css负责组件具体样式，JS则与后台进行交互。 在设计网页前先介绍DIV，简单来说就是一个在网页上分割区域的方块。在DIV里面可以添加组件，包括另外的DIV。 制作登录界面。登录界面一般有两个文本框，分别用来获取用户的用户名和密码。我们也考虑用户忘记密码和未进行注册的情况，故也要加上这两个功能区域。 首先我们为登录界面设置一个标题： ...
用HTML制作一个注册界面
qq_43614355的博客
04-01 2万+
1.制作如下图的注册界面要求如下： 体大小均为14px，灰色文字#999，验证码灰色背景#eee，注册按钮为红色背景#e3393c，注册按钮圆角6px 思路分析，根据图片的信息，本题的格式可以看做是一个3X5的表格形式，因此可以用表格的形式进行解答；另外还可以用页面流里的float现将第一行信息转换出来，然后在利用clear让元素主动向下移动，从而达到换行的目的（需要在div标签中选择合适的选择...
如何做一个注册页面
05-28
要做一个注册页面，你可以使用HTML和CSS来创建界面，使用JavaScript来实现一些交互功能，使用后端语言（如PHP、Python等）来处理用户提交的数据并将其保存到数据库中。下面是一个简单的注册页面示例，包含输入用户名、密码、确认密码和电子邮件地址的表单： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> /* 样式表 */ label, input { display: block; margin-bottom: 10px; } input[type="submit"] { margin-top: 20px; } </style> <script> // JavaScript代码 function validateForm() { var username = document.forms["myForm"]["username"].value; var password = document.forms["myForm"]["password"].value; var confirm_password = document.forms["myForm"]["confirm_password"].value; var email = document.forms["myForm"]["email"].value; if (username == "") { alert("用户名不能为空"); return false; } if (password == "") { alert("密码不能为空"); return false; } if (confirm_password == "") { alert("确认密码不能为空"); return false; } if (password != confirm_password) { alert("两次输入的密码不一致"); return false; } if (email == "") { alert("电子邮件地址不能为空"); return false; } } </script> </head> <body> <h2>注册页面</h2> <form name="myForm" action="register.php" onsubmit="return validateForm()" method="post"> <label>用户名：</label> <input type="text" name="username"> <label>密码：</label> <input type="password" name="password"> <label>确认密码：</label> <input type="password" name="confirm_password"> <label>电子邮件地址：</label> <input type="email" name="email"> <input type="submit" value="注册"> </form> </body> </html> ``` 在这个示例中，我们使用了HTML和CSS来创建了一个简单的注册页面，其中包含输入用户名、密码、确认密码和电子邮件地址的表单。我们使用了JavaScript来实现了一个简单的表单验证函数，该函数会在表单提交之前检查用户输入的数据是否合法，如果不合法则会弹出一个警告框提示用户。在表单的action属性中，我们指定了一个后端脚本文件（register.php），该文件会处理用户提交的数据并将其保存到数据库中。 当用户提交表单时，浏览器会将表单数据发送到后端脚本文件（register.php）进行处理。在这个脚本文件中，你可以使用数据库操作语句来将用户提交的数据保存到数据库中。具体的实现方式因不同的后端语言而异，例如，在PHP中，你可以使用mysqli或PDO等扩展来连接和操作数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值