带有切换开关元件的Django脆皮形式

Question

我正在使用脆皮形式和布局助手来生成我的输入形式。我想在表单中添加一个切换开关。

所需结果：

我得到的：

forms.py：models.py：form.html

class RequestForm(forms.ModelForm):
on_prem = forms.CharField(widget=forms.CheckboxInput(attrs={"class": "slider form-control"}))

class Meta:
    model = Request
    fields = ['on_prem']

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout(
        Div(
            Div(Field('on_prem'), css_class='col-md-3', ),
            css_class='row',
        ),
    )

我在

class Request(models.Model):        
on_prem = models.BooleanField(default=False)

i.sstatic.net/dom1j.png

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% crispy form %}
    <button type="submit" class="d-block btn mt-4 w-50 mx-auto">
        Save Request 
    </button>
</form>

中看到的。 com/doc/5.1/forms/checks radios/＃switches“ rel =“ nofollow noreferrer”> bootstrap文档 nested css class Ins the Twoggle Switch效果我希望通过嵌套的CSS类实现，我不确定如何实现这一目标通过形式助手。任何帮助将不胜感激。

Answer 1

仅使用“字段”的代码行较少：

self.helper.layout = Layout(
    Field('notify_faculty_field', css_class="form-check-input", wrapper_class="form-check form-switch"),
)

Answer 2

如果使用django-crispy-forms crispy-bootstrap5使用bootstrap5模板包，则可以使用switch> switch> switch输入类型：

from crispy_bootstrap5.bootstrap5 import Switch

... Layout(Switch("is_company"))

https://github.com/django-crispy-forms/crispy-bootstrap5?tab5？tab = readme-ov-file＃whats-new

Answer 3

我通过在助手中使用HTML块来实现这一目标。

form.py

class RequestForm(forms.ModelForm):
    on_prem = forms.CharField(widget=forms.CheckboxInput(attrs={"class": "slider form-control"}))

class Meta:
    model = Request
    fields = ['on_prem']

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout(
    Div(
        Div(
            HTML('<label class="form-check-label" for="on_prem">On Prem</label>'),
            HTML('<div class="form-switch">'),
            Field('on_prem'),
            HTML('</div>'),css_class='col-md-3',),
            css_class='row',
        ),
    )