如何在单击下一步时使文本移动/更改


How to make text moving/changing when click next?

我想做一个关于托福考试的网络。 在一个页面中,即显示登录表单。 所以在底部有一个声明"不注册?立即注册"。我想,如果我点击"立即注册"声明,登录表单将更改为注册表单。它发生在一页纸上。请帮帮我

     <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/