html中設計使用者登入介面
阿新 • • 發佈：2019-01-29
<!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>
