带有标签的酥脆形式顺风

问题描述

我想要一个带有 3 个标签的表单，使用 cripsyformws 和 tailwind。 现在它不起作用： 我的 html：

{% extends "base.html" %}
{% load tailwind_filters %}

{% block content %}

<div class="max-w-lg mx-auto">
    <div class="py-5 border-t border-gray-200">
        <h1 class="text-4xl text-gray-800">Create a new company</h1>
    </div>
    <form method="post" class="mt-5">
        {% csrf_token %}
        {{ form|crispy }}
        <button type='submit' class="w-full text-white bg-blue-500 hover:bg-blue-600 px-3 py-2 rounded-md">
            Submit
        </button>
    </form>
</div>

{% endblock content %}

我的表格：

class CompanyModelForm(forms.ModelForm):
    class Meta:
        model = Company
        fields = '__all__'


    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False
        self.helper.layout = Layout(
            TabHolder(
                Tab('company_name','fiscal_end_of_year',),Tab('Addrfirm_address','Addrfirm_code','Addrfirm_country','Addrfirm_city','Addrfirm_state'
                    ),Tab('AddrShipping_address','AddrShipping_code','AddrShipping_country','AddrShipping_city','AddrShipping_state'
                    ),Tab('AddrInvoice_address','AddrInvoice_code','AddrInvoice_country','AddrInvoice_city','AddrInvoice_state'
                    )
            )
        )
        self.helper.layout.append(Submit('submit','Submit'))

我的目标是为同一个表格 tab1 常规信息、tab2 送货地址、tab3 发票地址提供 3 个标签。 顺风允许这个脆脆的，否则我应该怎么做

解决方法

在您的 html 中使用它，即加载脆皮表单标签，然后使用 {% 脆皮表单 %} 呈现选项卡式表单。 然后，您将根据 Django 在 HTML 上呈现该表单的方式添加 CSS 规则。

{% extends "base.html" %}
{% load tailwind_filters %}
{% load crispy_forms_tags %}

{% block content %}
<div class="max-w-lg mx-auto">
    <div class="py-5 border-t border-gray-200">
        <h1 class="text-4xl text-gray-800">Create a new company</h1>
    </div>
    <form method="post" class="mt-5">
        {% csrf_token %}
        {% crispy form %}
    </form>
</div>

{% endblock content %}

,

在您的页面顶部添加 {% loadcrippy_fotms_tags %} 并添加crispy_foms 到您的设置。 py