在使用 ModelForm 的 Django 表单中更改元素的 css 类答案

【问题标题】：Change the css class of an element in a Django form that uses ModelForm在使用 ModelForm 的 Django 表单中更改元素的 css 类
【发布时间】：2017-10-04 11:15:01
【问题描述】：

我有以下型号：

class PledgeSettings(models.Model):

    message = models.CharField(max_length=200, blank=True, null=True)

    amount = MoneyField(
        max_digits=6,
        decimal_places=2,
        default_currency='CAD',
        blank=True,
        null=True,
    )

我有以下使用该模型的表单：

class PledgeSettingsForm(forms.ModelForm):

    class Meta:
        model = PledgeSettings

    def __init__(self, *args, **kwargs):
        super(PledgeSettingsForm, self).__init__(*args, **kwargs)

        self.fields['message'].widget.attrs = {
            'placeholder': _('Everytime I eat a doughnut'),
        }
        self.fields['message'].label = False

        self.fields['amount'].label = _('I pledge to donate $')

        self.helper = FormHelper()
        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-xs-9'
        self.helper.field_class = 'col-xs-3'

        self.helper.layout = Layout(
            'message',
            'amount'
        )

        self.helper.layout.append(
            Submit('save', 'Save', css_class='save_button')
        )

问题是self.helper.label_class = 'col-xs-9'和self.helper.field_class = 'col-xs-3'没有效果，我想设置特定元素的css类，例如message或amount，和

我得到的 HTML 是：

<form class="form-horizontal" method="post"> <input type="hidden" ...>
    <div id="div_id_message" class="control-group">
        <div class="controls">
            <input type="text" name="message" value="I smoke a cigarette" placeholder="Some text" class="textinput textInput" id="id_message">
        </div>
    </div>
    <div id="div_id_amount" class="control-group">
        <label for="id_amount_0" class="control-label ">
            Some text
        </label>
        <div class="controls">
            <input type="number" name="amount_0" value="1.00" step="0.01" class="col-xs-3" id="id_amount_0">

            <select name="amount_1" class="col-xs-3" id="id_amount_1"> 
            <option value="CAD" selected="">Canadian Dollar</option>
        </div>
    </div>
</form>

我要更改的是标签元素和输入元素的类，尤其是每个元素的类。我不知道该怎么做。谁能帮我解决这个问题？

【问题讨论】：

你考虑过Javascript吗？还是那是不可能的？
@almostabeginner，是的，我考虑过 JS，但我想知道您是否可以直接在 django 表单中或使用 self.helper 实例变量来完成。

标签： css django django-crispy-forms

【解决方案1】：

为什么不做这样的事情

self.helper.layout = Layout(
    Div(
        Field('message'), css_class="class-here"
    ),

    # Field('description'), # or this way if you don't want to wrap around div
)

【讨论】：

问题是我想改变元素的类我没有添加新元素。

【解决方案2】：

我对脆皮表格没有太多经验，所以这可能是错误的，但请尝试以下方法：

对于第一个问题，请尝试 self.helper = FormHelper(self) 而不是 self.helper = FormHelper()

要设置特定元素的 css 类，您需要创建一个Layout，例如：

self.helper.layout = Layout(
    Field('password', id="password-field", css_class="passwordfields",        
          title="Explanation")
)