frontend_teaching_project
/
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="img/favicon.gif" type="image/gif" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/login.css">
    <script>
    function init(){
        document.getElementById("btn_cookieShow").addEventListener("click",()=>{
            let node=document.getElementsByClassName("cookieSelect")[0];
            if(node.hidden==true){
                node.hidden=false;
                document.getElementById("btn_cookieShow").classList.add("change");
            }else{
                node.hidden=true;
                document.getElementById("btn_cookieShow").classList.remove("change");
            }
        },false);
    }
    window.addEventListener("load",init,false);
    </script>
</head>
<body>
    <article class="login_article">
        <aside class="img_box"></aside>
        <aside class="login_article_image">
            <img src="img/login_logo.jpg" title="logo">
            <div hidden class="errorMsg" style="color:red">用户名或密码错误！</div>
        </aside>
        <section>
            <form action="" method="POST">
                用户名：<input type="text" name="userName"><br>
                密&nbsp;&nbsp;&nbsp;码：
                <input type="password" name="password"><br>
                <div id="btn_cookieShow"></div>
                <div hidden class="cookieSelect">
                    <input type="checkbox" name="isCookie" value="yes">
                    <span style="vertical-align:2px;">一周之内不需要登录</span>
                </div>
                <button id="btn_login" type="submit">登录</button>
            </form>
        </section>
    </article>
</body>
</html>