将小部件应用于 RadioField 的 WTForms

Question

我需要在 wtforms 中创建一行单选按钮。所以：buttons = RadioField(choices=[(0, 'Option1), (1, 'Option2'), (2, 'Option3')])创建：选项1选项2选项3我想得到的是：选项1 选项2 选项3（由于某种原因，实际的单选按钮不会在此处呈现）含义而不是按钮的无序列表，我想要一排单选按钮。在发布问题之前，我尝试自己解决问题。看完这篇文章：WTForms RadioField如何在没有<ul>和<li>标签的情况下生成html？我在这里阅读了有关小部件和按钮的信息： https://wtforms.readthedocs.io/en/stable/widgets.html#built-in-widgets 和这里： https : //wtforms.readthedocs.io/en/stable/ fields.html 似乎有一个内置小部件：类 wtforms.widgets.Input(input_type=None) 可能会通过不将无序列表标签应用于单选按钮来解决问题。我试图按如下方式应用它：buttons = RadioField(widget=Input(input_type='radio'), choices=[(0, 'Option1'), (1, 'Option2'), (2, 'Option3')])但我只得到错误：AttributeError：'RadioField'对象没有属性'_value'我的问题是：Input 小部件会将我的按钮显示为一行而不是列表？我该如何正确应用它？如果没有，还有其他解决方案可以显示我想要的按钮吗？

Answer 1

所有你 3 Q. 回答如下：

• 脚步：

1. 选择正确的方式来展示它。

2. 对其进行样式设置以使其内联。

3. 在下面查看如何正确执行此操作。

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

你可能了解它是如何工作的想要使用验证器导入它们......

现在你可能会问这有什么关系？

当您查看有关内置小部件的此链接（您提供）时：

它说：

class wtforms.widgets.ListWidget(html_tag='ul', prefix_label=True)

  # Renders a list of fields as a ul or ol list.

并通过检查 widgets.core 模块 excatly ListWidget 类（源代码）

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 在此处的文档中阅读有关它的信息

它将显示为如下表格：

此图像将性别显示为 RadioField 以及其他字段

稍后您可以通过添加 id 或类来设置表格的样式并对其进行样式设置。

这就是它在您的模板中的样子（我也在使用 Bootsrap 并计划单独设置标签和输入的样式）：

<div class="custom-control custom-radio custom-control-inline ">

        {{ form.Gender.label(class="custom-control-label") }}

         {{ form.Gender() }}

    </div>

您也可以使用Flask-Bootstrap，例如上图中的 age(an IntegerField) 在模板中看起来像这样：

{% import "bootstrap/wtf.html" as wtf %}

.

.

.

<div class="form-group">

        {{ wtf.form_field(form.Age, class='form-control', placeholder='Age') }}

    </div>

这是以表格形式显示所有字段，但有时您只希望标签单独设置样式，以便我在 Gender RadioField 中执行的操作