实现下面这个登录界面:
图片是百度的 >_<
提交之后简单实现这样的弹出效果:
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? '男':'女'} `);
}