如何修改Django中复选框输入框嵌套在标签内的渲染逻辑？

我需要渲染一个带多选复选框的表单，使用过django-multiselectfield和原生CheckboxSelectMultiple部件，但默认渲染的HTML结构是<label>包裹<input>和文本，不符合需求——我需要<input>在前、<label>在后的结构。

现有代码 #

表单定义 #

FAVORITE_COLORS_CHOICES = [
    ('blue', 'Blue'),
    ('green', 'Green'),
    ('black', 'Black'),
]

class SimpleForm(forms.Form):
    favorite_colors = forms.MultipleChoiceField(
        required=False,
        widget=forms.CheckboxSelectMultiple,
        choices=FAVORITE_COLORS_CHOICES,
    )

模板渲染代码 #

{% render_field form.favorite_colors %}

当前渲染的HTML输出 #

<div id="id_favorite_colors">
    <div>
        <label for="id_favorite_colors_0">
        <input class="form-control" id="id_favorite_colors_0" name="favorite_colors" placeholder="Your Name" type="checkbox" value="blue" />
        Blue</label>
    </div>
    <div>
        <label for="id_favorite_colors_1">
        <input class="form-control" id="id_favorite_colors_1" name="favorite_colors" placeholder="Your Name" type="checkbox" value="green" />
        Green</label>
    </div>
    <div>
        <label for="id_favorite_colors_2">
        <input class="form-control" id="id_favorite_colors_2" name="favorite_colors" placeholder="Your Name" type="checkbox" value="black" />
        Black</label>
    </div>
</div>

期望的HTML结构 #

<div id="id_favorite_colors">
    <div>
        <input class="form-control" id="id_favorite_colors_0" name="favorite_colors" placeholder="Your Name" type="checkbox" value="blue" />
        <label for="id_favorite_colors_0">Blue</label>            
    </div>
    <div>
        <input class="form-control" id="id_favorite_colors_1" name="favorite_colors" placeholder="Your Name" type="checkbox" value="green" />
        <label for="id_favorite_colors_1">Green</label>            
    </div>
    <div>
        <input class="form-control" id="id_favorite_colors_2" name="favorite_colors" placeholder="Your Name" type="checkbox" value="black" />
        <label for="id_favorite_colors_2">Black</label>            
    </div>
</div>

解决方案 #

方法1：自定义Widget #

重写CheckboxSelectMultiple的format_output方法，修改渲染后的结构：

from django.forms.widgets import CheckboxSelectMultiple

class CustomCheckboxSelectMultiple(CheckboxSelectMultiple):
    def format_output(self, rendered_widgets):
        output = []
        for widget in rendered_widgets:
            # 提取input标签、label的for属性和文本内容
            input_tag = widget.split('</label>')[0].split('<label')[1].strip().split('Blue')[0].replace('>', '>')
            label_for = widget.split('for="')[1].split('"')[0]
            label_text = widget.split('</label>')[0].split('>')[-1].strip()
            
            # 重新组装结构
            new_item = f'<div>{input_tag}<label for="{label_for}">{label_text}</label></div>'
            output.append(new_item)
        return '\n'.join(output)

在表单中使用这个自定义Widget：

class SimpleForm(forms.Form):
    favorite_colors = forms.MultipleChoiceField(
        required=False,
        widget=CustomCheckboxSelectMultiple,
        choices=FAVORITE_COLORS_CHOICES,
    )

方法2：手动渲染表单字段 #

放弃render_field，在模板中手动循环每个选项，自由控制结构：

<div id="{{ form.favorite_colors.id_for_label }}">
    {% for choice in form.favorite_colors %}
        <div>
            {{ choice.tag }}
            <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
        </div>
    {% endfor %}
</div>

两种方法都能实现你需要的<input>在前、<label>在后的HTML结构，其中手动渲染更灵活，适合需要自定义样式的场景。

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