Abhishek Malik
Abhishek Malik

Reputation: 577

Flask Form doesn't render in extended template

Created a basic sign in form in flask. The index page renders just fine, however /login does not render any form. No errors have popped up either. [returns a 200 response]

My forms.py is:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired


class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember_me = BooleanField('Remember Me')
    submit = SubmitField('Sign In')

My routes.py is:

from flask import render_template, flash, redirect, url_for from app import app from app.forms import LoginForm

@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html', title='Home')


@app.route('/login')
def login():
    form = LoginForm()
    #return render_template('index.html', title='Home')
    return render_template('login.html', title='Sign In', form=form)

My template for the form is:

{% extends "base.html" %}

{% block content %}
    <h1>Sign In</h1>
    <form action="" method="post" novalidate>
        <!---{{ form.hidden_tag() }}-->
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}
        </p>
        <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

The index base that the template above extends is rendered but no form:

enter image description here

The terminal output:

enter image description here

Tried this on chrome, safari and firefox.

Upvotes: 0

Views: 561

Answers (1)

Charles R
Charles R

Reputation: 1661

You probably forgot to declare your block in the base.html file.

In base.html :

<body>
    ... base content ...

    {% block body %}

    ... your login.htlm will set there ...

    {% endblock %}

</body>

Upvotes: 0

Related Questions