您的位置：首页 > Web前端 > HTML

html中设计用户登录界面

2017-10-23 22:50 597 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#dg{width: 60%;text-align: center;}
#dg label{display: block;margin: 6px;}
::backdrop{background-color: black;}
</style>
<title>hello</title>
</head>
<body>
<input id="btn" type="button"value="打开对话框" />
<dialog id="dg">
<h2>用户登录</h2>
<main>
<form>
<label for="texName" value="用户名:"/>
<input type="text"id="txtName" />
</label>
<label for="txtPassword"value="密码:"/>
<input type="password"id="txtPassword"autofocus="" />
</label>
<input type="button" value="登录"/>
<input id="cls" type="button"value="关闭" />
</form>
</main>
</dialog>
<script>
var btn=document.getElementById("btn");
var dg=document.getElementById("dg");
var cls=document.getElementById("cls");
btn.onclick=function(){
dg.showModal();
dg.returnValue='对话框的值';
}
cls.onclick=function(){
dg.close();
console.log(dg.returnValue);
}
dg.console=function(){
console.log("对话框关闭");
}
dg.oncancel=function(){
console.log('用户在模拟窗口中按了esc键');
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航