【问题标题】:WTForms applying widget to RadioField将小部件应用于 RadioField 的 WTForms
【发布时间】:2020-05-13 19:51:33
【问题描述】:

我需要在 wtforms 中创建一行单选按钮。所以:

buttons = RadioField(choices=[(0, 'Option1), (1, 'Option2'), (2, 'Option3')])

创建:

  • 选项1
  • 选项 2
  • 选项3
  • 我想得到的是:

    选项1 选项2 选项3

    (由于某种原因,实际的单选按钮不会在此处呈现) 意思是我想要一排单选按钮,而不是无序列表的按钮。

    在发布问题之前,我已经尝试自己解决问题。阅读这篇文章后:How can WTForms RadioField generate html without <ul> and <li> tag? 我在这里阅读了有关小部件和按钮的信息: 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”

    我的问题是:

    • 输入小部件是否会将我的按钮显示为一行而不是列表?
    • 如何正确应用?
    • 如果没有,是否有任何其他解决方案可以按我想要的方式显示按钮?

    【问题讨论】:

      标签: python html flask jinja2 wtforms


      【解决方案1】:

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

      您可能了解它的工作原理并想使用验证器导入它们...

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

      当您查看有关内置小部件的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 中所做的事情

      【讨论】:

      • 顺便说一句:将来当你在 web 开发中遇到此类问题或一般情况下。尝试查看检查(开发工具)并检查我在问题早期就知道的静态代码是我有这些点因为我知道 ul 的样子但是仔细检查并查看烧瓶生成的内容我看到了 HTML代码,实际上它是一个无序列表(ul)。这始终是调试的好方法,而不仅仅是在调试控制台上进行中继。
      • 感谢您抽出宝贵时间提供非常详细的答案。自从我问了这个问题后,我做了两件事:解决或避免问题,完全忘记了我是如何做到的。仍然,赞成。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-01
      • 1970-01-01
      • 2019-04-05
      • 2014-05-18
      • 1970-01-01
      • 2018-11-21
      • 2012-12-19
      相关资源
      最近更新 更多