Flask/WTForms - 如何制作内联表单？

Question

代码如下：

<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>

我不确定如何使该字段内联...bootstrap 文档说将 class 设置为 .form-inline 但这在这里不起作用

Answer 1

在下面的示例中，我将向您展示 form-inline 水平对齐字段的用法：

假设我们有一个表单 login_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)

login.html:

{% 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 %}

最后，如您所知，在上面的 HTML 代码中，如果将 <form class="form-inline" method="POST"> 替换为 <form method="POST">，您将获得垂直对齐样式。

我会根据下面的评论添加更多说明。

import Flask-Bootstrap
import Flask-WTF

拿去复制粘贴

导入集合

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

Flask/WTForms - 如何制作内联表单？

Flask/WTForms - how can I make a form inline?

flask

wtforms