WTForms中如何将RadioField渲染为StringField的展示样式？

问题根因 #

你遇到的问题是两个错误共同导致的：

1. FieldList遍历得到的single_form本身就是SingleForm的实例，不需要额外加.form访问
2. 你将HiddenInput绑定到了表单对象上，而非要修改的radio字段本身，所以字段不会正常渲染

解决方法 #

方案1：仅修改RadioField的渲染组件（保留RadioField原有逻辑，样式对齐StringField） #

这是改动最小的方案，仅需修改你循环赋值的逻辑，将widget绑定到radio字段而非表单对象上：
首先导入对应的组件：

from wtforms.widgets import TextInput

然后修改循环部分的代码：

for single_form in form.field_forms:
    # 将radio字段的渲染组件改为TextInput，和StringField的默认组件一致
    single_form.radio.widget = TextInput()

渲染后就会和普通StringField的外观完全一致，同时保留RadioField的原有的验证、数据处理逻辑。

方案2：前端层面修改样式（无后端逻辑改动） #

如果不想改后端代码，可以直接在模板层对原生单选框做样式隐藏，套上StringField的外观样式，还可以用JS实现自定义交互：

<style>
/* 隐藏原生单选框 */
.native-radio {
    display: none;
}
/* 模拟输入框样式 */
.simulate-input {
    border: 1px solid #ccc;
    padding: 4px 8px;
    border-radius: 4px;
    width: 100px;
}
</style>

<table>
    <tr>
        {% for single_form in form.field_forms %}
            <td>
                <input type="text" class="simulate-input" 
                       oninput="this.nextElementSibling.value = this.value">
                {{ single_form.radio(required='required', class="native-radio") }}
            </td>
        {% endfor %}
    </tr>
</table>

方案3：直接替换字段类型（不需要保留RadioField逻辑时使用） #

如果后续不需要用到RadioField的特性，可以直接将字段替换为StringField，完全匹配StringField的行为：

from wtforms import StringField

for single_form in form.field_forms:
    # 继承原有字段的验证规则、必填属性等配置
    single_form.radio = StringField(
        validators=single_form.radio.validators,
        render_kw={"required": "required"}
    )

如果你是想要把字段设为隐藏 #

如果你的需求是隐藏字段而不是改成StringField样式，只需要把widget改成HiddenInput绑定到radio字段即可：

from wtforms.widgets import HiddenInput

for single_form in form.field_forms:
    single_form.radio.widget = HiddenInput()

内容的提问来源于stack exchange，提问作者emilaz