时间戳

首页 > 解决方案 > 将小部件应用于 RadioField 的 WTForms

python - 将小部件应用于 RadioField 的 WTForms

问题描述

我需要在 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'

    我的问题是：

    标签： pythonhtmlflaskjinja2wtforms

    解决方案

    TDLR：

    所有你 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 中执行的操作

    推荐阅读