TDLR:
所有你 3 Q. 回答如下:
- 选择正确的方式来展示它。
- 设置样式以使其内嵌。
- 请在下方查看如何正确操作。
from wtforms import widgets
Gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')],
widget=widgets.TableWidget(with_table_tag=True) )
- 导入 widgest 以便您可以访问所有类并在小部件 arg 中使用所需的类。
在这里,我使用了TableWidget 类,您可以使用其他东西,但也可以使用表格,然后在您的静态文件夹中添加一个style.css 并设置表格样式,使其显示在一行中,其中 intnet 被淹没以及如何设计您的桌子。例如看看这个
一点解释和我是怎么想出来的:
其实你的方法是对的..
请参阅我确定您使用的可能是这样的验证器:
from wtforms import validators, ValidationError
class ContactForm(FlaskForm):
name = TextField("Student Name:", [
validators.Required("Plz enter your name.")])
或者可能是这样的:
from wtforms.validators import DataRequired
class RegistrationForm(FlaskForm):
username = StringField('Username',
validators=[DataRequired(), Length(min=2, max=20)])
您可能了解它的工作原理并想使用验证器导入它们...
现在你可能会问这有什么关系?
当您查看有关内置小部件的link(您提供)时:
上面写着:
class wtforms.widgets.ListWidget(html_tag='ul', prefix_label=True)
# Renders a list of fields as a ul or ol list.
并通过检查 widgets.core 模块,特别是 ListWidget 类(source code)
class ListWidget(object):
def __init__(self, html_tag='ul', prefix_label=True):
assert html_tag in ('ol', 'ul')
self.html_tag = html_tag
self.prefix_label = prefix_label
所以它检查(通过断言)选择 ul 或 li 标签然后如果你不想使用任何一个(比如说表)你必须使用另一个类
- 这意味着默认情况下我们使用 ul 或 li HTML 标签,我们如何更改它?
简单!就像我们为验证器所做的那样,导入所需的类并更改所需的参数,如下所示:
from wtforms import widgets
Gender = RadioField('Gender', choices=[('M', 'Male'), ('F', 'Female')],
widget=widgets.TableWidget(with_table_tag=True) )
在此示例中,我将 ul 或 li 更改为 TableWidget,请参阅文档 here 中的相关信息
它将显示为如下表格:
this Image shows gender as RadioField with also other fields
稍后您可以通过添加 id 或 class 来设置表格的样式。
这就是它在您的模板中的样子(我也在使用 Bootsrap,并计划单独设置标签和输入的样式):
<div class="custom-control custom-radio custom-control-inline ">
{{ form.Gender.label(class="custom-control-label") }}
{{ form.Gender() }}
</div>
你也可以使用Flask-Bootstrap,
例如上图中的年龄(一个 IntegerField)在模板中看起来像这样:
{% import "bootstrap/wtf.html" as wtf %}
.
.
.
<div class="form-group">
{{ wtf.form_field(form.Age, class='form-control', placeholder='Age') }}
</div>
这是在一个表单中显示所有字段,但有时您只希望标签单独设置样式,以便我在 Gender RadioField 中所做的事情