英文:
Can I override Django rendering checkbox inputs inside a label?
问题
我正在尝试渲染一个表单，该表单允许通过复选框进行多个选择。
我尝试过使用django-multiselectfield（我已经在使用的库）和原生的CheckboxSelectMultiple小部件。
如果我有一个简单的表单如下：
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>
这会对我渲染表单的方式造成问题。是否有办法强制Django输出输入然后标签，使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>
我没有找到一个简单的答案，大多数我找到的讨论都是来自大约10年前左右。
英文:
I'm trying to render a form which allows for multiple selections via checkboxes.
I've tried with django-multiselectfield (which I was already using) and the native CheckboxSelectMultiple widget.
If I have a simple form like so:
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,
)
And if I render with widget tweaks like so:
{% render_field form.favorite_colors %}
I get the following HTML output
<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>
This is causing problems for the way I want to render my form. Is there any way I can force Django to output the input and then the label, so the html would be like so:
<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>
I haven't found an easy answer to this and most of the discussions I've found are from 10 years ago or so.
答案1
得分: 1
你可以尝试这个，看看它是否适合你。
你的模板会看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="id_favorite_colors">
{% for choice in form.favorite_colors %}
<div>
<label for="id_favorite_colours_{{ forloop.counter0 }}">{{ choice.choice_label }}</label>
{{ choice.tag }}
</div>
{% endfor %}
</div>
</body>
</html>
而你的views.py将会如下所示：
def simple(request):
form = SimpleForm()
# 你可以添加任何你想要用于表单的自定义逻辑
return render(request, "test.html", {"form": form})
英文:
You can try this out to find if it will work for you.
Your template will look some thing like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="id_favorite_colors">
{% for choice in form.favorite_colors %}
<div>
<label for="id_favorite_colours_{{ forloop.counter0 }}">{{choice.choice_label}}</label>
{{ choice.tag }}
</div>
{% endfor %}
</div>
</body>
</html>
And your views.py will look like this
def simple(request):
form = SimpleForm()
# Any custom logic you want to use for the form
return render(request, "test.html", {"form":form})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论