javascript - 无法使 html/javascript 表单正常运行

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> 

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

我目前正在学习，因此尝试使用现有的示例代码作为起点似乎是合乎逻辑的。我在 goofle 上找不到任何可以直接帮助解决这个问题的帮助。

我想如果我能解决我是否可以将脚本包裹在顶部 block 周围我可以从那里得到它，只需要一些指导。

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