用 html, css, js 实现登陆提交界面

实现下面这个登录界面：
图片是百度的 >_<

在这里插入图片描述
提交之后简单实现这样的弹出效果：

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="photo">
        <img src="./res/dong_66cae51456b9983a890610875e89183c.gif">
        <div id="inP">
            <div id="name">
                姓名：<input type="text" id="userName">
            </div>
            <div id="age">
                年龄：<input type="text" id="userAge">
            </div>
            <div id="university">
                大学：<input type="text" id="userUniversity">
            </div>
            <div id="sex">
                性别：<input id='man' type="radio" name="sex">男
                     <input id='woman' type="radio" name="sex">女   
            </div>
        </div>
        <p>
            <input type="submit" value="提交" id="submit">       
            <input type="reset" value="重置">
        </p>
    </div>

    <script src="src/question.js"></script>
</body>
</html>

css 文件

* {
    margin: 0;
}

#photo {
    width: 600px;
    height: 600px;
    text-align: center;
    margin: auto;
    background-color: rgb(165, 220, 241);
}

#inP {
    width: 240px;
    margin: auto;
    text-align: left;
}

#name,#age,#university,#sex {
    margin: 10px; 
}

js 文件

const name = document.querySelector('#userName');
const age = document.querySelector('#userAge');
const university = document.querySelector('#userUniversity');
const man = document.querySelector('#man');
const woman = document.querySelector('#woman');
const clickButton = document.querySelector('#submit');

man.checked = true;

clickButton.onclick = function(){
    alert(`姓名${name.value},年龄${age.value},大学${university.value},${man.checked? '男':'女'} `);
}

用 html, css, js 实现登陆提交界面

html 文件

css 文件

js 文件

猜你喜欢