python - 如何在选项旁边渲染表单 ChoiceField 图像而不破坏表单？

Question

我正在尝试在各自的选择旁边渲染选项的图像。尝试这样做不会将表格保存为有效，因此我不知道该怎么做。我已经尝试了下面的两种方法，但我不知道为什么一种有效而另一种无效，我可以获得一些提示吗？

#Form:

    class ServerGroupForm(forms.Form):
        OPTIONS = (
            ("pic1", "https://i.imgur.com/tMahp6U.png"),
            ("pic2", "https://i.imgur.com/b76nwsj.gif"),
            ("pic3", "https://i.imgur.com/qzEcfyX.png Lover"),
            ("pic4", "https://i.imgur.com/kdc7UF7.png"),
            ("pic5", "https://i.imgur.com/ynWJ13W.gif"),
            ("pic6!", "https://i.imgur.com/goHFWsp.png"),
            ("pic7", "https://i.imgur.com/b76nwsj.gif"),
            ("pic8", "https://i.imgur.com/KPgKm79.png"),
            ("pic9", "https://i.imgur.com/7KtEV1i.png"),
            ("pic10", "https://i.imgur.com/7KtEV1i.png"),
            ("pic11", "https://i.imgur.com/FXfo773.png")
        )
        servergroups = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=OPTIONS)    
#View:
    def sendmessage(msg):
        #Other code sends msg to user, not includes so this isn't long
    def select_server_group(request):
        form = ServerGroupForm(request.POST)
        if form.is_valid():
            servergroups = form.cleaned_data['servergroups']
            sendmessage(msg=servergroups)
            return redirect('/')
        return render_to_response('webts3/selcectsgroup.html', {'form':form },
            context_instance=RequestContext(request))    

#HTML: Works but no icons
    <section class="login">
        <div class="titulo">Create a channel</div>
        <form method="post" action="." enctype="multipart/form-data">{% csrf_token %}
            <table border="0">
                {{ form.as_table }}
            </table>
            <input type="submit" class="btn btn-block btn-danger" value="Submit" style="margin-top: 10px;">
         </form>
    </section>    
#HTML: Icons but not working
    <form method='post' action="." enctype="multipart/form-data">{% csrf_token %}>
        <table>
            {% for x,y in form.fields.servergroups.choices %}
            <tr>
                <td><input type="checkbox" name="{{ x }}" value="{{ x }}"><img src={{ y }}</img></td>
            </tr>
        {% endfor %}
    </table>
    <input type='submit' value='submit'>
</form>    

Answer 1

字段的 name 属性不应为 {{ x }}。它应该是“servergroups”。

请注意，您还需要一些逻辑来确定该字段是否已被选择，例如在验证错误后重新显示表单时。