无法使html/java脚本表单功能正确

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>