Flask WTForms not allowing me to input anything to the forms

Question

I'm following a web app tutorial using Flask, and it has a section on how to implement WTForms. I followed everything correctly, it all works fine like I can go onto the page and all the fields are showing. But I cannot type anything into the actual fields. The button works and it brings up the error page since I haven't done anything to store them, but I physically cant click on for example username and start typing. It treats it like its a bunch of text. The tutorial I'm following is two years old, so that probably is the problem and maybe a new update has changed it.

My current version of WTForms is 2.3.3

I've tried to look at the documentation and also follow the latest tutorials, but still no progress. I checked out the crash course section and still anything I tried to edit to match that style just doesn't fix it.

Heres how it looks:

forms.py:

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

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])

    email = StringField('Email', validators=[DataRequired(), Email()])

    password = PasswordField('Password', validators=[DataRequired()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])

    submit = SubmitField('Sign Up')

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])

    password = PasswordField('Password', validators=[DataRequired()])
    remember = BooleanField('Remember Me')

    submit = SubmitField('Login')

Register.html:

{% extends "layout.html" %}
{% block content %}
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Join Today</legend>
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }}
                {{ form.username.label(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {{ form.email.label(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.password.label(class="form-control-label") }}
                {{ form.password.label(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.confirm_password.label(class="form-control-label") }}
                {{ form.confirm_password.label(class="form-control form-control-lg") }}
            </div>

        </fieldset>
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>
    </form>
</div>
<div class="border-top pt-3">
    <small class="text-muted">
        Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Login</a>
    </small>


</div>
{% endblock content %}

Main.py:

from flask import Flask, render_template, url_for
from forms import RegistrationForm, LoginForm
app = Flask(__name__)



posts = [
    {
        "author": "John Appleseed",
        "title": "Blog Post 2",
        "content": "Second Post Content",
        "date_posted": "Feb 26 2021"
    },
    {
        "author": "John Doe",
        "title": "Blog Post 3",
        "content": "Third Post Content",
        "date_posted": "Feb 27 2021"
    }
]

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html', posts=posts)

@app.route('/about')
def about():
    return render_template('about.html', title="About")

@app.route('/register')
def register():
    form = RegistrationForm()
    return render_template('register.html', title="Register", form=form)

Answer 1

I simply had to remove the .label in my HTML file.

<fieldset class="form-group">
            <legend class="border-bottom mb-4">Join Today</legend>
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }}
                {{ form.username(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {{ form.email(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.password.label(class="form-control-label") }}
                {{ form.password(class="form-control form-control-lg") }}
            </div>
            <div class="form-group">
                {{ form.confirm_password.label(class="form-control-label") }}
                {{ form.confirm_password(class="form-control form-control-lg") }}
            </div>

        </fieldset>
        <div class="form-group">