Question

我想建立一个关于toefl测试的网站。在一个页面中，即显示登录表单。所以在声明的底部theres“不注册？现在注册”。我想制作，如果我点击“立即注册”声明，登录表格将更改为注册表格。它发生在一个页面中。请帮帮我

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

Answer 1

这可以通过javascript轻松解决。有很多种方法，最简单的灵魂之一就是这样：

在html中，您可以创建两个表单，并将js-code放在<script> - 标记内：

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

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

1 个答案: