Unable to render from from login.html file-CodePudding

I am learning flask by watching some video tutorials. I have an app.py file in which I am rendering login.html which is an extension of base.html. I don't know why but my form is somehow not appearing on the webpage.

**app.py - **

from flask import Flask , redirect , url_for , render_template , request , flash

app = Flask(__name__)

    @app.route("/")
    def home():
        return render_template("index.html" )
    
    @app.route("/login", methods=["GET","POST"])
    def login():
        return render_template("login.html")
    
    @app.route("/<usr>")    
    def user(usr):
        return f"<h1> {usr} </h1>"


if __name__ == "__main__":
    app.run(debug=True)

**login.html - **

{% extends "base.html" %}  
{%  block title %} Login Page {% endblock %}

{% block content %} 
<form action= "#" method ="post">
    <p>Name:</p>
    <p><input type = "text" name = "nm" /></p>
    <p><input type = "submit" value = "submit" /></p>

</form>

{% endblock %}

This is my base.html file. As I told earlier , I am getting no error but a blank page. base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
     integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title{% block title%}{% endblock%}</title>
</head>
<body>
    <nav >
        <a  href="#">Navbar</a>
        <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <div  id="navbarNav">
          <ul >
            <li >
              <a  href="#">Home <span >(current)</span></a>
            </li>
            <li >
              <a  href="#">Features</a>
            </li>
            <li >
              <a  href="#">Pricing</a>
            </li>
            <li >
              <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
    </nav>
    <h1>My website</h1>
    {% block content %}
    {% endblock %}
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

Kindly check login.html filepath, as it needs to be in the same app folder. Then,just add simple code in login.html as below:

<html>
<head>
</head>
<body>Test login page</body>
</html>