Search code examples
jinja2bootstrap-5flask-wtformsfloating-labels

Bootstrap 5 Form Floating Labels are always in the upper position when using flask-wtforms

I am using flask, jinja, and wtforms to make an account creation page, and am using bootstrap's floating labels. My issue is that the labels start in the upper "floating" position on page load, as if there was something typed in to the fields, but there is nothing entered. The labels do not drop down to their default position even if I click and then click away from the elements, or type, delete it, and then click away.

Relevant sections of python:

class createAccForm(FlaskForm):
    fname = StringField('First Name', [DataRequired(dataReqMsg), VCName])
    lname = StringField('Last Name', [DataRequired(dataReqMsg), VCName])
    email = EmailField('Email', [DataRequired(dataReqMsg), VCEmail, Email(emailMsg)])
    password = StringField('Password', [DataRequired(dataReqMsg), VCPassword])
    password1 = StringField('Password1', [DataRequired(dataReqMsg), VCPassword, PasswordsMatch])
    submit = SubmitField('Submit')

@app.route("/createAccount")
def createAccount():
    form = createAccForm()

    return render_template("createAccount.html", form = form)

Relavent HTML (with jinja): [I only included one of the form elements, all the rest are the same.]

<div class="form-floating mb-3">
    {{form.fname(class="form-control", id="fname")}}
    <label for="fname">First Name</label>
</div>
{% if form.errors.fname %}
{{form.errors.fname[0]}}
{% endif %}

This is what the element looks like on load:Form element

P.S. When I inspect the elements, I see they have the value attribute given to them by wtforms (see below), but not assigned to anything. Could that be causing bootstrap to move the labels upwards? If so, is there a way to fix it other than writing some javascript to remove the attributes (and possibly triggering a change event if necessary)?

The input element in the inspector window:

<input class="form-control" id="fname" name="fname" required type="text" value>

EDIT: I added the following code in a script tag, which did as it was supposed to (none of the inputs have that unassigned value tag anymore), but it did not fix the floating labels.

$("document").ready( () => {
    $("input").removeAttr("value");
});
Solution

  • Apparently the placeholder attribute is required (as it says in the very first paragraph of the bootstrap docs). I should read better.

    P.S.

    It turns out the unassigned value attributes had nothing to do with the issue. But, if you do ever need to change what wtforms renders, this answer leading to the rendering widgets page on the wtforms docs can help.