Question

我正在渲染“ 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..]

谢谢。

Answer 1

除了使用{{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>

或者使用松脆的表单API，我们可以在“模板”文件夹中为此自定义字段创建一个新模板：

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模块中或在名为fields.py之类的新Python模块中创建一个新的crispy字段。

forms.py

from crispy_forms.layout import Field

class CustomCheckbox(Field):
    template = 'custom_checkbox.html'

我们现在可以在表单定义中使用它：

forms.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 layouts docs

将类别添加到脆皮复选框

1 个答案: