复制
收藏
提问
简洁
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录注册</title> <style> * { margin: 0; padding: 0; } #container { width: 600px; margin: auto; text-align: center; } li { list-style-type: none; } .tab { position: relative; top: 100px; width: 600px; margin: auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #FB2C3C; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; } #header { width: 978px; } .box2 { width: 600px; height: 300px; background: url(../网易游戏/img/1111.png); } .zh { height: 50px; font-size: 30px; } .zh input { width: 515px; height: 50px; } .mima { position: relative; top: 50px; font-size: 30px; height: 50px; } .mima input { width: 503px; height: 50px; } .sh { position: relative; top: 55px; width: 600px; height: 60px; /* background-color: orange; */ text-align: center; } .sh button { width: 200px; height: 60px; font-size: 15px; background-color: bisque; } .st { margin-left: 70px; position: relative; top: 90px; text-align: center; } .st button { width: 200px; height: 50px; background-color: beige; } .st a { font-size: px; width: 200px; height: 86px; background-color: beige; } .zc { position: relative; top: 40px; height: 50px; font-size: 22px; } .zc input { width: 506px; height: 50px; } .sl { position: relative; top: 58px; width: 600px; height: 60px; font-size: 30px; text-align: center; } .sl input { width: 503px; height: 50px; font-size: 15px; } </style> </head> <body> <div id="container"> <div class="tab"> <div class="tab_list"> <ul> <li class="current">登录</li> <li>注册</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> <div class="box2"> <div class="zh"> <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 账号: <input type="text" name="fname"> </div> <div class="mima"> 密码：<input type="password" placeholder="请输入密码"> </div> <div class="sh"> <a href="yjwj.html"><form><button type="submit">登录</button></form></a> </div> <div class="st"> <form><button type="submit">网易登录</button> <a href="yjwj.html">返回首页</a> </form> </div> </div> </div> <div class="item"> <div class="box2"> <div class="zc"> 用户名：<input type="text" placeholder="请输入用户名"> </div> <div class="mima"> 邮箱：<input type="password" placeholder="请输入邮箱"> </div> <div class="sl"> 密码：<input type="password" placeholder="请输入密码"> </div> <div class="st"> <form><button type="submit">注册</button> </form> </div> </div> </div> </div> </div> </div> </div> <script> //获取li部分对象 var tab_list = document.getElementsByClassName('tab_list'); var lis = tab_list[0].getElementsByTagName('li'); //获取内容部分的所有对象 var items = document.getElementsByClassName('item'); for (var i = 0; i < lis.length; i++) { //for循环绑定点击事件 lis[i].setAttribute('index', i); lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = ""; } this.className = 'current'; //显示内容 var index = this.getAttribute('index'); for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } items[index].style.display = 'block'; }; } function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x==""){ alert("账号不能为空"); return false; }else{ alert("登录成功"); return false; } } </script> </body> </html>
2月前
全网
文档
学术
百科
知识库
回答简洁模式
深入研究一些
这段HTML代码是一个简单的登录和注册页面，包含了一些基本的CSS样式和JavaScript脚本。页面分为两个主要部分：登录和注册。每个部分都有输入框和提交按钮。此外，页面顶部有一个简单的标签切换功能，允许用户在登录和注册之间切换。
以下是代码的一些关键点：
-
HTML结构：页面使用
<div>元素来组织内容，包括一个容器#container，一个标签列表.tab_list，以及两个内容区域.item。 -
CSS样式：定义了页面的布局和元素样式，如宽度、高度、背景色、字体大小等。
-
JavaScript脚本：实现了标签切换功能，当用户点击不同的标签时，会显示对应的内容区域。同时，还有一个简单的表单验证函数
validateForm，用于检查登录表单中的账号是否为空。 -
表单提交：登录和注册表单都包含了提交按钮，但实际的表单处理逻辑（如提交到服务器的URL）需要根据实际需求进行配置。
-
链接：在注册部分，有一个链接指向
yjwj.html，这可能是一个返回首页的链接。 -
表单验证：
validateForm函数在表单提交时被调用，检查账号字段是否为空，如果为空则弹出警告并阻止表单提交。 -
小错误：在注册部分的邮箱输入框中，输入类型被错误地设置为
type="password"，这应该改为type="email"以适应邮箱输入。 -
样式问题：
.st a选择器中的font-size属性值缺失，这可能是一个遗漏。 -
HTML5表单属性：可以使用HTML5的表单属性，如
required、pattern等，来增强表单的客户端验证。
请注意，这段代码只是一个前端示例，实际的登录和注册功能需要后端逻辑来处理用户数据的验证、存储和安全措施。
你觉得结果怎么样？