一个简单的登录注册页面html代码

本文提供了一个适合初学者的简单登录注册页面的HTML和CSS代码示例,包括登录和注册两个页面的展示及代码详情。
摘要由CSDN通过智能技术生成


前言

这一个简单的注册页面代码,适合初学者进行模仿和理解,这个代码仅限于两个页面的跳转,不包括数据处理

一、效果展示

1.登录

在这里插入图片描述

2.注册

在这里插入图片描述

二、代码部分

1.登录

代码如下(示例):

<style>
        * {
     
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        li {
     
            list-style: none;
        }
        
        a {
     
            text-decoration: none;
        }
        
        body {
     
            background-color: rgb(10, 158, 133);
        }
        
        .login {
     
            text-align: center;
            margin-top: 100px;
        }
        
        .login ul li input[type=text],
        .login ul li input[type=password] {
     
            font-size: 16px;
        }
        
        .login ul li input {
     
            width: 275px;
            height: 40px;
            margin-top: 20px;
        }
        
        .
HTML (HyperText Markup Language) 是一种用来创建网页的标准标记语言。一个基本的登录注册界面的 HTML代码可能包含表单元素,用于收集用户的输入。以下是一个简单的示例,展示了如何用 HTML 创建基本的登录注册界面的结构: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录注册界面</title> </head> <body> <!-- 登录表单 --> <div id="login"> <h2>登录</h2> <form action="/login" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <button type="submit">登录</button> </form> </div> <!-- 注册表单 --> <div id="register"> <h2>注册</h2> <form action="/register" method="post"> <label for="reg_username">用户名:</label> <input type="text" id="reg_username" name="reg_username" required> <label for="reg_email">邮箱:</label> <input type="email" id="reg_email" name="reg_email" required> <label for="reg_password">密码:</label> <input type="password" id="reg_password" name="reg_password" required> <label for="reg_confirm_password">确认密码:</label> <input type="password" id="reg_confirm_password" name="reg_confirm_password" required> <button type="submit">注册</button> </form> </div> </body> </html> ``` 这段代码创建了一个包含两个部分的页面:一部分用于登录,另一部分用于注册。每个部分都包含一个表单,表单中使用了 `input` 元素来获取用户名、密码和邮箱的输入,并使用 `button` 元素作为提交按钮。`action` 属性定义了表单提交后服务器端的处理程序路径,`method` 属性定义了提交数据的方式,通常是 `post` 或 `get`。 请注意,这只是一个 HTML 的结构示例,实际上还需要服务器端的脚本来处理登录和注册请求,而且通常还需要加入 CSS 和 JavaScript 来改善界面的样式和用户体验。
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值