Html 在烧瓶中单击按钮隐藏/显示窗体

我正在学习创建一个wtf Flask web表单，它是：

class Update(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    pic = FileField('Update Profile Pic', validators=[FileAllowed(['jpg','png'])])
    submit = SubmitField('Update')

我想做的是，只需单击按钮，表单就可以加载到同一页面上，而无需为表单创建单独的html页面。如何使用Flask或HTML来完成？如果必须对路线进行任何更改，请同时提及

HTML代码：

<div class="content-section">
            <form method="POST" action="" enctype="multipart/form-data">
                {{ form.hidden_tag() }}
                <fieldset class="form-group">
                    <legend class="border-bottom mb-4">Account Info</legend>
                    <div class="form-group">
                        {{ form.username.label(class="form-control-label") }}

                        {% if form.username.errors %}
                        {{ form.username(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.username(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.email.label(class="form-control-label") }}
                        {% if form.email.errors %}
                        {{ form.email(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.email(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.pic.label() }}
                        {{ form.pic(class="form-control-file") }}
                        {% if form.pic.errors %}
                        {% for error in form.picture.errors %}
                        <span class="text-danger">{{error}}</span><br>
                        {% endfor %}
                        {% endif %}
                    </div>
                </fieldset>
                <div class="form-group">
                    {{ form.submit(class="btn btn-outline-info") }}
                </div>
            </form>

{{form.hidden_tag（）}}
帐户信息
{{form.username.label（class=“form control label”）}
{%if form.username.errors%}
{{form.username（class=“form control form control lg无效”）}
{%form.username.errors%中的错误}
{{error}}
{%endfor%}
{%else%}
{{form.username（class=“form control form control lg”）}
{%endif%}
{{form.email.label（class=“form control label”）}
{%if form.email.errors%}
{{form.email（class=“form control form control lg is invalid”）}
{%form.email.errors%}
{{error}}
{%endfor%}
{%else%}
{{form.email（class=“form control form control lg”）}
{%endif%}
{{form.pic.label（）}
{{form.pic（class=“form control file”）}
{%if form.pic.errors%}
{%form.picture.errors%中的错误}
{{error}}

{%endfor%}
{%endif%}
{{form.submit（class=“btn btn outline info”）}

您可以正常加载表单，并将其可见性设置为

隐藏

。如果有人单击该按钮，只需将表单的可见性更改为

visible

示例如下：

功能切换_显示（）{
el=document.querySelector（'.content_section'）；
如果（el.style.visibility==“隐藏”）{
el.style.visibility='visible'
}否则{
el.style.visibility='hidden'
}
}

切换显示
再见

谢谢，你的方法奏效了！但是默认情况下表单是可见的，如何将其默认可见性设置为隐藏？我尝试使用上述代码的一部分将值设置为“隐藏”，但不起作用。您可以简单地将其作为内联属性

不再查看
。但是请注意，它会占用空间（它只会隐藏表单，但表单会表现为它仍然在那里）。要完全隐藏它并删除表单占用的空间，请使用
style=“display:none；”
。如果决定使用
display
属性，要再次显示表单，请将display设置为
block
。