
How to create a Login Box on a web page that appears only when a button that is already present on the page is clicked

Show Login box on button click.
The given code displays a button. When the user click the button, login box will get appear and allow the user to enter username and password. Using style attribute, you can easily hide or show html elements.
<html>
<script>
function showLogin(){
document.loginform.style.visibility="visible";
}
</script>
<body>
<input type="button" value="Show Login Page" onclick="showLogin();">
<form style="visibility:hidden" name="loginform" method="post" action="loginbean.jsp">
<br><br>
<table align="center"><tr><td><h2>Login Authentication</h2></td></tr></table>
<table width="300px" align="center" style="border:1px solid #000000;background-color:#efefef;">
<tr><td colspan=2></td></tr>
<tr><td colspan=2> </td></tr>
<tr>
<td><b>Login Name</b></td>
<td><input type="text" name="userName" value=""></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input type="password" name="password" value=""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
<tr><td colspan=2> </td></tr>
</table>
</form>
</body>
</html>