CODEWITHSUNDEEP
pythonhtmlflaskflask-wtformswtforms
Philipp
Philipp

Reputation: 662

Cannot enter text into form (Flask, WTForm)

I want to build a website with Flask and WTForms. But I cannot get the text input to work (The page will not let me enter any text into the boxes). Can you show me what is wrong?

This is what the page looks like:

enter image description here

This is the form I created with WTForms

from flask_wtf import FlaskForm
from wtforms import SubmitField, IntegerField
from wtforms.validators import DataRequired, NumberRange, EqualTo


class RequestDataForm(FlaskForm):

    feature_count = IntegerField('Number of features', validators=[DataRequired(), NumberRange(min=1, max=50)])

    effective_rank = IntegerField('Effective Rank', validators=[DataRequired(), NumberRange(min=1, max=EqualTo(feature_count))])

    noise = IntegerField('Noise', validators=[DataRequired(), NumberRange(min=0, max=1)])

    submit = SubmitField('Submit')

This is the layout.html

<!DOCTYPE html>
<html>
<style>
</style>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <main role="main" class="container">
      <div class="row">
        <div class="col-md-8">
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
            {% endif %}
          {% endwith %}
          {% block page_content %}{% endblock %}
        </div>
      </div>
    </main>
</body>
</html>

and this is my page.html

{% extends 'layout.html' %}
{% block page_content %}
    <div class="content-section">
        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Fill with values.</legend>
                <div class="form-group">
                    {{ form.feature_count.label(class="form-control-label") }}
                    {{ form.feature_count.label(class="form-control form-control-lg") }}
                </div>
                <div class="form-group">
                    {{ form.effective_rank.label(class="form-control-label") }}
                    {{ form.effective_rank.label(class="form-control form-control-lg") }}
                </div>
                <div class="form-group">
                    {{ form.noise.label(class="form-control-label") }}
                    {{ form.noise.label(class="form-control form-control-lg") }}
                </div>
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info") }}
            </div>
        </form>
    </div>
{% endblock page_content%}

Upvotes: 0

Views: 861

Answers (1)

Peter Featherstone
Peter Featherstone

Reputation: 8102

According to your HTML you are only outputting the label for each form element not the element itself. Try updating them all to:

<div class="form-group">
    {{ form.noise.label(class="form-control-label") }}
    {{ form.noise(class="form-control form-control-lg") }}
</div>

Upvotes: 3

Related Questions