bootstrap 登录表单用户密码重置

bootstrap 表单重置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="zh-CN">
  <head>
    <link rel="icon" href="/static/image/favicon.ico">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title>xxx系统</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- Custom styles for this template -->
    <link href="/static/signin/signin.css" rel="stylesheet">
 
    <script src="/static/jq/jquery-3.6.0.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
                background-image:url(/static/image/d.jpg);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
                color:black;
                }
        </style>
  </head>
 
  <body>
 
    <div class="container">
 
      <form class="form-signin" action="/login/" method="POST">
        <h2 class="form-signin-heading text-center">xxx系统</h2>
        <br>
        <!-- 下拉选则地区 -->
        <p>
          <label for="diqu">请选择地区</label>
            <select name="selectdq" class="form-control form-control-placeholder" required="required">
              <option value="bj" style="color: black;">北京</option>
              <option value="hz" style="color: black;">杭州</option>
            </select>
        </p>
        <label for="inputUsername">用户名</label>
        <input type="text" id="inputUsername" name="username" class="form-control" placeholder="用户名" required autofocus style="margin-bottom: 5px;">
        <label for="inputPassword">密码</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
        <div>
          <label class="col-md-4">
            <input type="checkbox" value="remember-me"> 记住我
          </label>
          <label class="col-md-3 col-md-offset-5">
            <button class="btn btn-sm btn-default" id="resetBtn">重置</button>
          </label>
        </div>
        <button class="btn btn-lg btn-success btn-block" type="submit">登录</button>
        <!-- <a href="#" class="col-md-4 text-danger"><strong>忘记密码</strong></a>
        <a href="#" class="col-md-3 col-md-offset-5 text-danger"><strong>注册</strong></a> -->
        {{ error }}<br>
        {% csrf_token %}
      </form>
 
    </div> <!-- /container -->
<script>
  $(document).ready(function(){
    $("#resetBtn").off().on("click", function () {
      $("#inputUsername").val("");
      $("#inputPassword").val("");
    })
  });
</script>
  </body>
</html>

  

本文作者:香菜哥哥

本文链接:https://www.cnblogs.com/yizhipanghu/p/16189552.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   香菜哥哥  阅读(502)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开