Django表单中重写RadioSelect渲染出现意外结果

我之前在Django里自定义RadioSelect样式的时候，也踩过一模一样的坑！你遇到的HTML转义问题，核心是没处理好Django对安全HTML的渲染规则——尤其是自定义ChoiceInput和Renderer类的时候，很容易漏掉关键的安全处理步骤。

问题根源分析 #

你复制了复选框的自定义代码并修改类名，但输出的是转义后的HTML字符串，本质原因是：

• 自定义的OtherRadioChoiceInput类没有正确实现安全HTML输出的方法，Django模板系统默认会对普通字符串进行转义
• 可能遗漏了@html_safe装饰器的正确应用，或者没有使用Django提供的安全HTML工具函数拼接内容

完整修复代码示例 #

以下是调整后的widgets.py代码，完全匹配你需求的同时解决转义问题：

from django.forms.widgets import ChoiceFieldRenderer, RadioChoiceInput
from django.utils.html import format_html, format_html_join
from django.utils.safestring import mark_safe, html_safe
from django.utils.encoding import force_text

# 假设你之前的复选框基础类是这样的（如果已有可直接复用）
class OtherChoiceInput(RadioChoiceInput):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.value = force_text(self.value)

    def __html__(self):
        # 用format_html确保HTML结构安全，参数自动转义
        return format_html(
            '<label class="custom-choice"><input type="{}" name="{}" value="{}"{}> {}</label>',
            self.input_type,
            self.name,
            self.value,
            mark_safe(' checked' if self.is_checked() else ''),
            self.choice_label,
        )

# 自定义Radio选项类，重点实现__html__并添加html_safe装饰器
@html_safe
class OtherRadioChoiceInput(OtherChoiceInput):
    input_type = 'radio'

    # 可选：如果Radio需要和复选框不同的样式，重写__html__
    def __html__(self):
        return format_html(
            '<label class="custom-radio"><input type="radio" name="{}" value="{}"{}> {}</label>',
            self.name,
            self.value,
            mark_safe(' checked' if self.is_checked() else ''),
            self.choice_label,
        )

# 自定义Radio渲染器
class ButtonRadioFieldRenderer(ChoiceFieldRenderer):
    choice_input_class = OtherRadioChoiceInput

    def render(self):
        # 用format_html_join拼接所有选项，确保整体输出为安全HTML
        return format_html_join(
            '\n',
            '{}',
            (force_text(choice) for choice in self.choices),
        )

# 最终的自定义RadioSelect Widget
class CustomRadioSelect(RadioSelect):
    renderer = ButtonRadioFieldRenderer

关键修复点说明 #

1. 实现__html__方法：
   Django模板系统会优先调用这个方法获取HTML内容，返回的字符串会被直接视为安全HTML，不会被转义。如果只依赖__str__方法，输出内容会被自动转义。

2. 使用安全HTML工具函数：

   • format_html：自动转义参数中的特殊字符（比如用户输入的选项文本），但保留你编写的HTML结构
   • mark_safe：手动标记一段固定HTML为安全（比如checked属性），避免被转义
   • format_html_join：批量拼接多个安全HTML片段，确保整体输出安全

3. @html_safe装饰器：
   给最终的OtherRadioChoiceInput类添加这个装饰器，进一步明确告诉Django：该类的字符串输出是安全HTML。

使用方式 #

在你的Form类中直接使用这个自定义Widget即可：

from django import forms
from .widgets import CustomRadioSelect

class YourForm(forms.Form):
    your_radio_field = forms.ChoiceField(
        choices=[('1', '选项1'), ('2', '选项2')],
        widget=CustomRadioSelect
    )

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