如何向 WTForm Radio 字段添加类？答案

【问题标题】：How do I add a class to WTForm Radio field?如何向 WTForm Radio 字段添加类？
【发布时间】：2020-10-24 20:22:50
【问题描述】：

我正在尝试使用 UIkit 设置我的 WTForm Radio 输入的样式，但是在遍历每个字段时，我无法弄清楚如何应用该类。如果我将form.difficulty(class_"uk-radio") 添加到for 循环中，我会得到一个疯狂的输出而不是格式化的字段。将此 UIkit 类应用于 WTForm 中的 radio 字段的正确语法是什么？

谢谢！

HTML：

{% from "_formhelpers.html" import render_field %}
<form class="uk-grid-small uk-background-muted uk-padding" action="/ask/" method="post" uk-grid>
    <div class="uk-width-1-2@s uk-margin-small">{{ render_field(form.title,placeholder="The Problem", class_="uk-input") }}</div><br>

    <div class="uk-width-1-1 uk-margin-small">
        <strong>Question Difficulty:</strong>
        <br>
        {% for subfield in form.difficulty(class_="uk-radio") %}
            <tr>
                <td>{{ subfield.label }}</td>
                <td>{{ subfield }}</td>
                &nbsp;&nbsp;&nbsp;&nbsp;
            </tr>
        {% endfor %}
    </div>
    <br>

    <div class="uk-width-1-1 uk-margin-small">
        {{ render_field(form.body,placeholder="My device probably has a virus. I clicked the wrong link, and I have like a million popups a minute now. Minute.tech HELP! I need some direction here guys.", class_="uk-textarea", rows="20", cols="100") }}
    </div>
    <br>
    <div class="uk-width-1-1 uk-margin-small">{{ render_field(form.tags,placeholder="Mac, virus, Facebook, etc", class_="uk-input") }}</div>
    <br>
    <div class="uk-width-1-4@s uk-margin-small">
        <input class="uk-button uk-button-primary" type="submit" value="Ask">
    </div>
</form>

Python

class AskForm(Form):
    difficulty = RadioField('Difficulty Rating', choices = [('1','1'), ('2','2'),('3','3'),('4','4'),('5','5')])
    title = TextField('Title:', [validators.Length(min=5, max=100)])
    body = TextAreaField('Desciption:', [validators.Length(min=10, max=2000)])
    tags = TextField('Tags:', [validators.Optional()])

结果：

编辑：试过{{ render_field(form.difficulty, class_="uk-input") }}，输出仍然是垂直格式而不是样式

结果：

【问题讨论】：

标签： flask uikit jinja2 wtforms

【解决方案1】：

没有子字段，difficulty 是一个可以多选的字段。
像任何其他字段一样渲染它，它应该可以工作。

{{ render_field(form.difficulty, class_="uk-input") }}

【讨论】：

试过这个；单选按钮没有样式，垂直显示而不是水平显示，这是我不想要的（输出在帖子中更新）
这是一个演示问题。表单和字段按预期工作。
知道了，所以你是在建议我不能在 WTForms 的无线电字段中添加一个类？也许我会尝试结合使用 Flask request 字段，因为我真的不需要验证无线电字段输入

【解决方案2】：

老问题，但这里是你如何做到的：

 <div class="uk-input">
        
             {{form.difficulty.label}}
            
            {% for subfield in form.difficulty %}
    
                {{ subfield(class="class name") }}
                {{ subfield.label }}
   
            {% endfor %}  
    
    </div>

你也可以对标签做同样的事情：

 {{ subfield.label(class="class name") }}

【讨论】：

【解决方案3】：

使用这种方式我能够实现水平布局

<div class="uk-input">
    <table>
        <tr><td> {{form.difficulty.label}} </td></tr>
        <tr>
        {% for subfield in form.difficulty %}

            <td>{{ subfield }}
            {{ subfield.label }}</td>


        {% endfor %}
      </tr>
      </table>
</div>

【讨论】：