Python Flask: 用户注册网页设计
来自CloudWiki
效果图
实训步骤
网页头
<head> <meta charset="utf-8"> <title>读书笔记</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/style.css"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head>
导航栏
<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">学习笔记</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/">主页</a></li> <li><a href="/articles">笔记</a></li> <li><a href="/about">关于</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/register">注册</a></li> <li><a href="/login">登录</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>
注册表单
<div class="container"> <div class="content"> <h1 class="title-center">用户注册</h1> <form method="POST" action=""> <div class="form-group"> <label for="email">邮箱</label> <input class="form-control" id="email" name="email" required type="text" value=""> </div> <div class="form-group"> <label for="username">用户名</label> <input class="form-control" id="username" maxlength="25" minlength="2" name="username" required type="text" value=""> </div> <div class="form-group"> <label for="password">密码</label> <input class="form-control" id="password" maxlength="20" minlength="6" name="password" required type="password" value=""> </div> <div class="form-group"> <label for="confirm">确认密码</label> <input class="form-control" id="confirm" maxlength="20" minlength="6" name="confirm" required type="password" value=""> </div> <p><input type="submit" class="btn btn-primary" value="注册"></p> </form> </div> </div>
页脚
<!-- 页脚 --> <footer class="page-footer font-small blue" style="margin-top: 50px"> <!-- Copyright --> <div class="footer-copyright text-center py-3"> Copyright ©2007-2019 <a href="http://www.mingrisoft.com">明日科技有限公司</a> All Rights Reserved 吉ICP备10002740号-2 吉公网安备22010202000132 </div> <!-- Copyright --> </footer>
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>读书笔记</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/style.css"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">学习笔记</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="/">主页</a></li> <li><a href="/articles">笔记</a></li> <li><a href="/about">关于</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/register">注册</a></li> <li><a href="/login">登录</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="content"> <h1 class="title-center">用户注册</h1> <form method="POST" action=""> <div class="form-group"> <label for="email">邮箱</label> <input class="form-control" id="email" name="email" required type="text" value=""> </div> <div class="form-group"> <label for="username">用户名</label> <input class="form-control" id="username" maxlength="25" minlength="2" name="username" required type="text" value=""> </div> <div class="form-group"> <label for="password">密码</label> <input class="form-control" id="password" maxlength="20" minlength="6" name="password" required type="password" value=""> </div> <div class="form-group"> <label for="confirm">确认密码</label> <input class="form-control" id="confirm" maxlength="20" minlength="6" name="confirm" required type="password" value=""> </div> <p><input type="submit" class="btn btn-primary" value="注册"></p> </form> </div> </div> <!-- 页脚 --> <footer class="page-footer font-small blue" style="margin-top: 50px"> <!-- Copyright --> <div class="footer-copyright text-center py-3"> Copyright ©2007-2019 <a href="http://www.mingrisoft.com">明日科技有限公司</a> All Rights Reserved 吉ICP备10002740号-2 吉公网安备22010202000132 </div> <!-- Copyright --> </footer> </body> </html>