用 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? 男:女} `);
}
