我想做一个关于托福考试的网络。 在一个页面中,即显示登录表单。 所以在底部有一个声明"不注册?立即注册"。我想,如果我点击"立即注册"声明,登录表单将更改为注册表单。它发生在一页纸上。请帮帮我
<form method="POST" action="proseslogin.php">
<table>
<table>
<tr>
<td><input style="width:300px; height:30px; border:3px; font-family:'Trebuchet MS'; font-size:14px;" type="text" name="email" placeholder="Email"/></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td><input style="width:300px; height:30px; border:1px; font-family:'Trebuchet MS'; font-size:14px;"type="password" name="password" placeholder="Password"/></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td><input style="width:200px; height:30px; border:1px; font-family:'Trebuchet MS'; font-size:14px;" type="submit" name="submit" value="Login"/></td>
</tr>
</table>
</form>
<h3>Login <br><span>Not Register?</span> <a href="index_2.html">Register Now</a></h3>
这可以通过javascript轻松解决。有很多方法可以做到这一点,最简单的方法之一是这样的:
在 html 中,你可以制作两种形式,并将 js 代码放在一个 <script>
-tag 中:
<form method="POST" action="proseslogin.php" id="login-form">
Your login form
<input type="submit" value="Login"><br><br>
<span>Not Register?</span> <a href="#" onclick="showRegisterForm()">Register Now</a>
</form>
<form method="POST" action="prosesregister.php" id="register-form" style="display:none">
Your register form
</form>
<script>
var showRegisterForm = function() {
document.getElementById("login-form").setAttribute("style", "display:none");
document.getElementById("register-form").setAttribute("style", "display:block");
}
</script>
工作 js 小提琴:http://jsfiddle.net/tjespe/42pjtvpa/