html密码默认提示,5 记住密码提示.html

记住密码提示框

body,input,p{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#outer{width:200px;margin:10px auto;}

input{margin-right:5px;vertical-align:middle;}

#tips{padding:5px;margin-top:5px;background:#ffefa4;border:1px solid #f90;display:none;}

window.onload = function ()

{

var oTips = document.getElementById("tips");

var oLabel = document.getElementsByTagName("label")[0];

oLabel.onmouseover = function ()

{

oTips.style.display = "block"

};

oLabel.onmouseout = function ()

{

oTips.style.display = "none"

}

}

两周内自动登陆

为了您的信息安全,请不要在网吧或公用电脑上使用此功能!

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Django框架,HTML,CSS和JavaScript编写的用户登录页面的示例代码: login.html ``` {% extends "base.html" %} {% block title %}用户登录{% endblock %} {% block content %} <div class="login-container"> <h1>用户登录</h1> <form method="post"> {% csrf_token %} <div class="form-group"> <label for="username">用户名:</label> <input type="text" name="username" id="username"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" name="password" id="password"> </div> <div class="form-group"> <input type="checkbox" name="remember_me" id="remember_me"> <label for="remember_me">记住我</label> </div> <div class="form-group"> <button type="submit">登录</button> </div> </form> <div class="register-link"> <p>还没有账号?<a href="{% url 'register' %}">注册账号</a></p> </div> </div> {% endblock %} ``` 在这个页面中,我们先通过继承“base.html”模板来添加一些共同的HTML头和尾。接着在“content”块中,我们创建了一个登录容器,其中包含一个登录表单和一个注册账号链接。登录表单中包括用户名输入框,密码输入框和一个记住我复选框。注册链接直接指向了一个名为“register”的URL。 login.css ``` .login-container { width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px #ccc; text-align: center; } h1 { margin: 0; padding: 0; } form { margin-top: 20px; text-align: left; } .form-group { margin: 10px 0; } label { display: inline-block; width: 120px; font-weight: bold; } input[type="text"], input[type="password"] { width: 200px; padding: 5px; border-radius: 3px; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; } input[type="checkbox"] { margin-right: 5px; } button[type="submit"] { padding: 5px 10px; background-color: #009688; color: #fff; border: none; border-radius: 3px; cursor: pointer; } .register-link { margin-top: 20px; } ``` 在CSS文件中,我们为登录容器、标题、表单和链接设置了一些样式。我们还设置了输入框、复选框和提交按钮的样式。 login.js ``` $(function() { $('form').submit(function(event) { event.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); if (!username) { alert('请输入用户名'); return; } if (!password) { alert('请输入密码'); return; } $(this).unbind().submit(); }); }); ``` 在JavaScript文件中,我们使用jQuery库来绑定登录表单的提交事件。在提交事件中,我们先阻止表单的默认行为,然后检查用户名和密码输入框是否为空。如果输入框为空,则弹出警告提示。如果全部都不为空,则提交表单。我们还使用unbind()方法来避免表单被多次提交的问题。 这就是一个简单的用户登录页面示例,其中包含记住我,注册账号,并用CSS和JavaScript控制样式和交互效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值