python - Django 单选按钮在 mark_safe() 中显示为项目符号列表

Question

背景

我在表单中使用了“mark_safe()”来传递 HTML 指令并在我的表单标签中显示要点:

class FormFood(forms.Form):
    CHOICES = [ (1,'Yes'), (2, 'No')]
    response = forms.ChoiceField(widget=forms.RadioSelect,
              label=mark_safe("Do you like any of these foods? <ul><li>Pasta</li><li>Rice</li><li>Cheese</li></ul>"), choices=CHOICES)

这输出为:

问题

正如您在上面看到的，要点现在也出现在"is"和“否”旁边，尽管我不希望这样。检查该元素表明这是因为它们也在无序列表标签内构建(尽管我的 ul 标签在上面的标签中以“奶酪”结尾):

<form method="POST">
    <label for="id_response_0">Do you like any of these foods?
        <ul>
            <li>Pasta</li>
            <li>Rice</li>
            <li>Cheese</li>
        </ul>
    </label>
    <ul id="id_response">
        <li>
            <label for="id_response_0">
                <input type="radio" name="response" value="1" required="" id="id_response_0"> Yes
            </label>

        </li>
        <li>
            <label for="id_response_1">
                <input type="radio" name="response" value="2" required="" id="id_response_1"> No
            </label>

        </li>
    </ul>
    <input type="hidden" name="csrfmiddlewaretoken" value="FaOTY4WlVLFMl3gNtut8BJihJKub1Is0wRJRxxLck1e2eJocJVXRiGoOLDr9jdvx">
    <input type="submit">
</form>

有没有什么办法可以阻止这种情况，只保留“意大利面”、“米饭”和“奶酪”上的要点，同时从"is"和“否”中删除要点/列表？

Answer 1

RadioSelect小部件使用 <ul>元素列出选项。默认情况下，浏览器显示 <ul>带有项目符号的元素，每个元素的左侧通常有 40 像素的填充。

可以通过三种方式解决这个问题。您可以添加一些基本的 CSS。这三种方法按推荐顺序给出。目前最好的选择是使用 CSS。

1。使用 CSS

这是最好的选择。选择这个。

首先:添加一个class属性给你的 RadioSelect小部件。

# forms.py

class FormFood(forms.Form):
    CHOICES = [ (1,'Yes'), (2, 'No')]
    response = forms.ChoiceField(
        widget=forms.RadioSelect(attrs={'class': "custom-radio-list"}),
        label=mark_safe("Do you like any of these foods? <ul><li>Pasta</li><li>Rice</li><li>Cheese</li></ul>"), choices=CHOICES)

第二步:添加一些 CSS。

.custom-radio-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

提供了以下方法以使此答案更加完整和全面。有时您需要修改 HTML 或创建自定义小部件。但是，在您的情况下，CSS 是最佳选择。演示文稿应主要使用 CSS 处理。

2。创建自定义小部件

对于简单的小部件，创建自定义小部件非常简单。

首先:创建一个继承自 RadioSelect 的自定义小部件类，然后将其用作您的领域的小部件。

# forms.py

from django import forms


class MyRadioWidget(RadioSelect):
    template_name = 'myradiowidget.html'


class FormFood(forms.Form):
    CHOICES = [ (1,'Yes'), (2, 'No')]
    response = forms.ChoiceField(
        widget=MyRadioWidget,
        label=mark_safe("Do you like any of these foods? <ul><li>Pasta</li><li>Rice</li><li>Cheese</li></ul>"), choices=CHOICES)

第二:添加一个使用 <div> 的 HTML 模板元素不<ul>和 <li>元素。

<!-- /templates/myradiowidget.html -->

{% with id=widget.attrs.id %}<div{% if id %} id="{{ id }}"{% endif %}{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
  <div>{{ group }}<div{% if id %} id="{{ id }}_{{ index }}"{% endif %}>{% endif %}{% for option in options %}
    <div>{% include option.template_name with widget=option %}</div>{% endfor %}{% if group %}
  </div></div>{% endif %}{% endfor %}
</div>{% endwith %}

3。覆盖默认的表单 HTML

您可以覆盖表单小部件 HTML 模板。

注意:这将覆盖整个项目的模板，包括 Django 管理员!

首先:更改表单模板渲染器以使用 Django 模板后端。

# settings.py

FORM_RENDERER = "django.forms.renderers.TemplatesSetting"

第二: 添加您的新 radio.html文件到您的template覆盖默认小部件的目录。

<!-- /templates/django/forms/widgets/radio.html -->

{% with id=widget.attrs.id %}<div{% if id %} id="{{ id }}"{% endif %}{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
  <div>{{ group }}<div{% if id %} id="{{ id }}_{{ index }}"{% endif %}>{% endif %}{% for option in options %}
    <div>{% include option.template_name with widget=option %}</div>{% endfor %}{% if group %}
  </div></div>{% endif %}{% endfor %}
</div>{% endwith %}