Question

我正在努力解决这个问题。我有第一个代码块，我想用它来进行css格式化/外观等等。

<div class="login-form">
        <!-- Start Error box -->
        <div class="alert alert-danger hide">
            <button type="button" class="close" data-dismiss="alert"> &times;</button>
            <h4>Error!</h4>
            Your Error Message goes here
        </div> <!-- End Error box -->
        <form action="#" method="get"  >
            <input type="text" placeholder="User name" class="input-field" required/> 
            <input type="password"  placeholder="Password" class="input-field" required/> 
            <button type="submit" class="btn btn-login">Login</button> 
        </form> 
    </div>

然后我有这个单独的代码，它使用脚本在输入后提交用户信息。我想将此脚本执行的操作移动到上面的代码上。因此，具有第一个代码块的外观和第二个代码的行为。

我正在学习，所以尝试使用作为起点存在的示例代码似乎是合乎逻辑的。我无法找到任何有助于解决这个问题的帮助。

我想如果我可以解决问题，如果我可以将脚本包裹在顶部块中，我可以从那里得到它，只需要一些方向。

<div class="container" id="login-block">
    <script type="text/template" id="login-template">
      <header id="header"></header>
      <div class="login">
        <form class="login-form">

          <div class="error" style="display:none"></div>
          <input type="text" id="login-username" placeholder="Username" />
          <input type="password" id="login-password" placeholder="Password" />
          <button>Log In</button>
        </form>
</script>

Answer 1

这就是我想要实现的目标。现在工作，只用了3个小时就可以完成; - /

<div class="container" id="login-block todoapp">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
            <div class="page-icon-shadow animated bounceInDown" > </div>
            <div class="login-box clearfix animated flipInY" id="login-block">
                <div class="page-icon animated bounceInDown">
                    <i class="glyphicon glyphicon-user"></i>
                </div>
                <div class="login-logo">
                    <a href="#"><img src="img/login-logo.png" alt="Company Logo" /></a>
                </div> 
                <hr />
                <div class="login-form content">
                    <!-- Start Error box -->
                    <div class="alert alert-danger hide">
                        <button type="button" class="btn btn-login" data-dismiss="alert"> &times;</button>
                        <h4>Error!</h4>
                        Your Error Message goes here
                    </div></div> <!-- End Error box -->


                    <script type="text/template" id="login-template">
                    <header id="header"></header>
                    <div class="login">
                    <form class="login-form">

                    <div class="error" style="display:none"></div>
                    <input type="text" id="login-username" placeholder="Username" />
                    <input type="password" id="login-password" placeholder="Password" />
                    <button>Log In</button>
                    </form>
                    </script>



                    <div class="login-links"> 
                        <a href="forgot-password.html">
                            Forgot password?
                        </a>
                        <br />
                        <a href="sign-up.html">
                            Don't have an account? <strong>Sign Up</strong>
                        </a>
                    </div>              
                </div>                      
            </div>

        </div> </div>

无法正确使html / javascript表单功能

1 个答案: