Flask 烧瓶/WTForms-如何内联制作表单?

Flask 烧瓶/WTForms-如何内联制作表单?,flask,wtforms,Flask,Wtforms,代码如下: <form class="form-inline" action="" method="post"> {{ form.hidden_tag() }} <fieldset class="form-group"> <legend class="border-bottom mb-4"></legend> <div

代码如下:

<form class="form-inline" action="" method="post">
  {{ form.hidden_tag() }}
  <fieldset class="form-group">
    <legend class="border-bottom mb-4"></legend>
    <div class="form-group">
      ... form fields here ...
    </div>
  </fieldset>
  <div class="form-group-submit">
    {{ form.submit(class="btn btn-outline-primary") }}
  </div>
</form>

{{form.hidden_tag()}}
... 这里的表单字段。。。
{{form.submit(class=“btn btn outline primary”)}

我不知道如何使此字段内联…引导文档说要将class设置为
。form inline
,但这在这里不起作用

在下面的示例中,我将向您展示如何使用
form inline
水平对齐字段:

假设我们有一个表单
login\u form
,该表单用于查看函数
login
,它依次呈现HTML文件
login.HTML

表单模型:

class login_form(FlaskForm):
    some_hiden_field = HiddenField()
    username = StringField('User Name :', validators=[DataRequired()])
    password = PasswordField('Password :', validators=[DataRequired()])
    submit_btn = SubmitField('Submit')
@app.route('/', methods=['Get', 'post'])
def login():
    # some code
    my_form = login_form()
    # some code
    return render_template('login.html', form=my_form)
{% extends "mybase.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}

<form class="form-inline"  method="POST">
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }} {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.password.label }} {{ form.password(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.submit_btn(class="btn btn-default") }}
    </div>
</form>

{% endblock %}
查看功能:

class login_form(FlaskForm):
    some_hiden_field = HiddenField()
    username = StringField('User Name :', validators=[DataRequired()])
    password = PasswordField('Password :', validators=[DataRequired()])
    submit_btn = SubmitField('Submit')
@app.route('/', methods=['Get', 'post'])
def login():
    # some code
    my_form = login_form()
    # some code
    return render_template('login.html', form=my_form)
{% extends "mybase.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}

<form class="form-inline"  method="POST">
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }} {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.password.label }} {{ form.password(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.submit_btn(class="btn btn-default") }}
    </div>
</form>

{% endblock %}
login.html:

class login_form(FlaskForm):
    some_hiden_field = HiddenField()
    username = StringField('User Name :', validators=[DataRequired()])
    password = PasswordField('Password :', validators=[DataRequired()])
    submit_btn = SubmitField('Submit')
@app.route('/', methods=['Get', 'post'])
def login():
    # some code
    my_form = login_form()
    # some code
    return render_template('login.html', form=my_form)
{% extends "mybase.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}

<form class="form-inline"  method="POST">
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }} {{ form.username(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.password.label }} {{ form.password(class="form-control") }}
    </div>
    <div class="form-group">
        {{ form.submit_btn(class="btn btn-default") }}
    </div>
</form>

{% endblock %}
把它们复制粘贴

导入集合

from flask import Flask, render_template, session, redirect, url_for, flash, request

from flask_bootstrap import Bootstrap

from flask_wtf import FlaskForm

import wtforms

from wtforms import StringField, FloatField, SubmitField, IntegerField, TextAreaField, DateField, DateTimeField, PasswordField, BooleanField, SelectField, FileField, HiddenField, Field, FieldList, FormField, Form

from wtforms.validators import Optional, NumberRange, DataRequired, Length, Email, Regexp

非常感谢。我回家后会接受答案,并能够测试出来谢谢,寻找你的评论。您好,对于行
{%import“bootstrap/wtf.html”as wtf%}
我发现它找不到文件。是否有一个特定的包需要导入到查看函数python文件中?编辑:我添加了
import flask\u bootstrap
,尽管错误仍然存在。您是否导入flask WTF?除了导入烧瓶引导not
Flask\u引导