html+javascript登录注册界面源码

博主在学习web前端时接触到几个较为高大上的登陆注册界面,在这里分享给大家
效果图如下:(代码较多只展示一个)有需要的可以下载:
在这里插入图片描述
在这里插入图片描述
`

注册

普通登录

手机无密码登录

扫码登录
					</div>
					<div class="aui-register-form-item">
						<p class="aui-for-pwd">
							<a class="" href="#">忘记密码</a>
						</p>
						<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
					</div>
					<div class="aui-protocol">
						登录即同意
						<a  href="#">《17素材网使用协议》</a>&
						<a  href="#">《隐私权条款》</a>
					</div>
					<div class="aui-thirds">
						<a href="#">
							<i class="aui-qq-img"></i>
							<i>QQ登录</i>
						</a>
						<a href="#">
							<i class="aui-wx-img"></i>
							<i>微信登录</i>
						</a>
						<a href="#">
							<i class="aui-wb-img"></i>
							<i>微博登录</i>
						</a>
						<div class="clear"></div>
					</div>
				</div>

				<!--手机动态码登录-->
				<div class="login-con" id="lc">
					<div class="aui-register-form-item">
						<input type="text" name="phone" placeholder="手机号码" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>请输入手机号||<i class='icon-tips'></i>手机号码格式不正确" maxlength="11" id="phone">
						<label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您还未输入手机号</div></label>
						<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>
						<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" >获取动态码</span>
					</div>
					<div class="aui-register-form-item">
						<input type="text" placeholder="动态码" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>请填写正确的手机动态码||<i class='icon-tips'></i>请填写6位手机动态码">
						<label class="focus valid"></label>
					</div>
					<div class="aui-register-form-item">
						<input id="aui-btn-reg1" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登录" >
					</div>
					<div class="aui-protocol">
						登录即同意
						<a  href="#">《17素材网使用协议》</a>&
						<a  href="#">《隐私权条款》</a>
					</div>
					<div class="aui-thirds">
						<a href="#">
							<i class="aui-qq-img"></i>
							<i>QQ登录</i>
						</a>
						<a href="#">
							<i class="aui-wx-img"></i>
							<i>微信登录</i>
						</a>
						<a href="#">
							<i class="aui-wb-img"></i>
							<i>微博登录</i>
						</a>
						<div class="clear"></div>
					</div>
				</div>


				<!-- 扫码登录 -->
				<div class="saoma" id="sm">
					<div class="screen-tu" id="screen">
						<span class="aui-tag-size">密码登录</span>
					</div>
					<div class="aui-text-item">
						<h1>1秒即登录,方便又安全</h1>
					</div>
					<div class="qr-code">
						<span class="tips_img"></span>
						<img src="images/code.png" alt="">
					</div>
					<div class="aui-tab-footer">
						<p>17扫码登录,同步账户信息 | <a href="#">下载17APP</a></p>
					</div>

				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="aui-register-bottom">
		<a>©188.com</a>
		<a href="#">联系客服</a>
		<a href="#">帮助中心</a>
		<div class="clear"></div>
	</div>
</div>
`![在这里插入图片描述](https://img-blog.csdnimg.cn/20190608232957325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg=,size_16,color_FFFFFF,t_70)
以下是一个简单的HTMLJavaScript实现的登录注册界面示例: ```html <!DOCTYPE html> <html> <head> <title>Login/Register Form</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } form { background-color: #fff; padding: 20px; max-width: 500px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.3); } h2 { text-align: center; margin-bottom: 20px; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; width: 100%; } button:hover { background-color: #45a049; } .cancelbtn { background-color: #f44336; } .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } </style> </head> <body> <h2>Login/Register Form</h2> <form> <div class="imgcontainer"> <img src="avatar.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit" id="login-btn">Login</button> <button type="submit" id="register-btn">Register</button> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> <script> // Login button event listener document.getElementById("login-btn").addEventListener("click", function() { event.preventDefault(); // Prevent form submission var username = document.getElementsByName("username")[0].value; var password = document.getElementsByName("password")[0].value; // Perform login validation here alert("Login successful!"); }); // Register button event listener document.getElementById("register-btn").addEventListener("click", function() { event.preventDefault(); // Prevent form submission var username = document.getElementsByName("username")[0].value; var password = document.getElementsByName("password")[0].value; // Perform registration validation here alert("Registration successful!"); }); </script> </body> </html> ``` 请注意,这只是一个演示示例,需要根据实际需求进行修改和完善。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彭祥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值