html简单的登录注册_html登录注册页面,html做一个登录注册页面资源-CSDN文库

共8个文件

html：3个

js：2个

png：2个

需积分: 50 118 浏览量 2019-01-14 11:18:29 上传评论 2 收藏 2.1MB ZIP 举报

HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是网页设计的基础，可以构建出结构化的页面。在这个“html简单的登录注册”项目中，我们将深入探讨如何利用HTML来实现基本的用户登录和注册功能。登录和注册页面通常包含表单元素，如`<form>`标签，用于收集用户输入的数据。在HTML中，我们可以使用`<input>`标签来创建文本框（text）、密码输入框（password）等，让用户输入用户名和密码。例如： ```html <form> <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> ``` 这里的`required`属性确保用户必须填写这些字段才能提交表单。接下来，我们讨论正则表达式（Regular Expression）。在登录注册系统中，我们可能需要验证用户输入的数据，如邮箱格式、密码强度等。正则表达式可以实现这些验证。例如，检查邮箱格式的正则表达式可能是`/^\S+@\S+\.\S+$/`，而检查密码强度可能需要包含数字和字母，如`/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/`。页面跳转是通过HTML的`<a>`标签或JavaScript的`window.location`对象实现的。在用户成功登录或注册后，我们可以将他们重定向到其他页面。例如，使用JavaScript： ```javascript window.location.href = "success.html"; ``` 如果用户输入的信息不符合要求，我们可以通过JavaScript动态显示错误信息，比如使用`<span>`标签和CSS控制样式，然后在JavaScript中改变其内容。此外，这个项目可能还涉及了CSS（Cascading Style Sheets）用于美化页面，以及基础的JavaScript来处理表单提交和验证。CSS可以设置字体、颜色、布局等样式，让页面看起来更加专业。例如： ```css form { display: flex; flex-direction: column; align-items: center; } input { margin-bottom: 10px; } ``` JavaScript可以监听表单的`submit`事件，阻止默认的表单提交行为，转而进行服务器端请求或本地验证。例如： ```javascript document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // 进行验证和数据发送的代码 }); ``` 在实际应用中，通常会用到Ajax技术向后台发送异步请求，如使用jQuery的`$.ajax`或原生的`fetch` API，将用户输入的数据发送到服务器进行处理。总结一下，这个“html简单的登录注册”项目涵盖了HTML表单创建、正则表达式验证、页面跳转、CSS样式设置和基础JavaScript交互等多个知识点。理解并掌握这些内容，对于开发Web应用是至关重要的。通过实践这个项目，你可以更好地理解前端开发的基本流程，并为更复杂的交互和功能打下坚实的基础。

资源推荐

资源详情

资源评论

收起资源包目录

练习--登录注册.zip （8个子文件）

练习--登录注册

css

yangshi.css 2KB

image

earth.png 2.09MB

tub.png 4KB

html

frist.html 744B

myweb.html 2KB

javascript

myjs2.js 2KB

myjs.js 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册</title> <link rel="stylesheet" type="text/css" href="../css/yangshi.css"/> <script type="text/javascript" src="../javascript/myjs.js"></script> </head> <body> <div class="mall"> <div class="top"> <div class="topl"><a href="frist.html">返回首页</a></div> <div class="topr">已有账号，去<a href="login.html">登录</a></div> </div> <div class="biaozhi"> <center>啦<img src="../image/tub.png" width="50" height="50" />啦</center> </div> <div class="wenben"> <div id="change_margin_1"> <form name="from" method="post" action="" onsubmit="return submitTest()"> <p><input id="Phone" type="text" placeholder="手机号" onblur="oBlur_1()" onfocus="oFocus_1()"/> <label id="remind_1"></label> <p><input id="Name" placeholder="用户名(6-16允许有字母、中文、数字)" type="text" onblur="oBlur_2()" onfocus="oFocus_2()" /> <label id="remind_2"></label> <p><input id="Email" placeholder="邮箱" onblur="oBlur_3()" onfocus="oFocus_3()" /> <label id="remind_3"></label> <p><input id="pass1" type="password" placeholder="输入密码(8-16位数字，字母，字符至少包含两种)" onblur="oBlur_4()" onfocus="oFocus_4()" /> <label id="remind_4"></label> <p><input id="pass2" type="password" placeholder="确认密码" onblur="oBlur_5()" onfocus="oFocus_5()" /> <label id="remind_5"></label>  <p> <input class="tijiao" type="submit" value="立即注册" /></p> </form> </div> </div> </body> </html>

评论收藏

内容反馈