我正在渲染一个 "InlineCheckboxes",它将允许用户选择多个复选框。我可以给整个元素一个类,但不知道如何给每个复选框的选项设置类。我想给每个复选框设置一个col-3,这样它们就能整齐地排列。
我已经在这个问题上纠结了好几天,我读了所有能找到的资料,但还是想不通。
form.py
preferred_topics = forms.MultipleChoiceField(choices=TOPICS, required=False, widget=forms.CheckboxSelectMultiple())
def __init__(self, *args, **kwargs):
super(NeedsAnalysisForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = 'post'
self.helper.add_input(Submit('submit', 'Submit'))
self.helper.layout = Layout(
'[..text form..]', '[..text form..]', InlineCheckboxes('preferred_topics'), '[..text
form..]')
呈现的是什么。
<div id="div_id_preferred_topics" class="form-group">
<label for="" class="">
Preferred topics
</label>
<div class="">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="preferred_topics"
id="id_preferred_topics_1" value="ANI">
<label class="custom-control-label" for="id_preferred_topics_1">
Animals
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="preferred_topics"
id="id_preferred_topics_2" value="ART">
<label class="custom-control-label" for="id_preferred_topics_2">
Art
</label>
</div>
[..cont..]
但我想要的是:
<div id="div_id_preferred_topics" class="form-group">
<label for="" class="">
Preferred topics
</label>
<div class="">
<div class="col-3 custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="preferred_topics"
id="id_preferred_topics_1" value="ANI">
<label class="custom-control-label" for="id_preferred_topics_1">
Animals
</label>
</div>
<div class="col-3 custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="preferred_topics"
id="id_preferred_topics_2" value="ART">
<label class="custom-control-label" for="id_preferred_topics_2">
Art
</label>
</div>
[..cont..]
谢谢你
而不是使用 {{form | crispy}}
您可以使用以下方法
{% load crispy_forms_tags %}
<form action="" method="post">
{% csrf_token %}
{% for field in form %}
<div class="col-3 custom-control custom-checkbox custom-control-inline">
{{field|as_crispy_field}}
<label class="custom-control-label" for="{{field.id_for_label}}">{{field.label}}</label>
</div>
{% endfor %}
<button type="submit">Submit</button>
<form>
或者使用crispy forms API,我们可以在 "templates "文件夹中为这个自定义字段创建一个新模板。
custom_checkbox.html
{% load crispy_forms_field %}
<div class="form-group">
<div class="custom-control custom-checkbox">
{% crispy_field field 'class' 'custom-control-input' %}
<label class="custom-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
</div>
</div>
现在我们可以创建一个新的脆皮字段,可以在我们的forms.py模块中创建,也可以在一个新的Python模块中创建,命名为fiels.py或其他模块。
表单.py
from crispy_forms.layout import Field
class CustomCheckbox(Field):
template = 'custom_checkbox.html'
现在我们可以在表单定义中使用它。
表单.py
class CustomFieldForm(AddressForm):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.layout = Layout(
Row(
Column('email', css_class='form-group col-md-6 mb-0'),
Column('password', css_class='form-group col-md-6 mb-0'),
css_class='form-row'
),
'address_1',
'address_2',
Row(
Column('city', css_class='form-group col-md-6 mb-0'),
Column('state', css_class='form-group col-md-4 mb-0'),
Column('zip_code', css_class='form-group col-md-2 mb-0'),
css_class='form-row'
),
CustomCheckbox('check_me_out'), # <-- Here
Submit('submit', 'Sign in')
)
更多细节请参考 Django Crispy Forms布局文档