Nishit Ranjan
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
May 11, 2012 at 3:02 PM
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>
May 11, 2012 at 3:37 PM
but the login box appears at the background of my web page.I mean below my HTML page.
and I am not able to bring it to the front even through CSS.
May 11, 2012 at 5:23 PM
ok,thanks a lot.....it was very very useful and I am able to sort out my issues myself :)thanks again.
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
