Question

如何在Django的模型窗体{{form}}调用中正确覆盖单个项的样式。我似乎只是掩盖了defualt行为并添加了我必要的风格。

具体来说，我想添加一个简单的滑块，将一些文本传递给视图。

我在表单中添加了一个额外的字段，如下所示：

class CreateTestForm(forms.ModelForm):

    difficulty = forms.CharField()

    class Meta:
        model = Test

以下是我的html直接：

<form method="POST" action=""> {% csrf_token %}
{{ form|crispy }}

<strong>Difficulty</strong>
<input id="difficulty" type="text" value="" class="slider form-control" data-slider-min="0" data-slider-max="10"
                         data-slider-step="1" data-slider-value="[0,10]" data-slider-orientation="horizontal"
                         data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
</br>
<input type='submit' value='Create' class='btn'>
</form>

然而，当我渲染视图时，我得到两个困难输入（一个滑块和一个盒子）。我知道Django正在为我创建文本框，但我认为，给我的滑块相同的id只会覆盖它？

根据我的观点，我还必须在forms.py类中为此表单定义滑块，否则在视图中的cleaning_data中无法访问它。有什么想法吗？

Answer 1

我不确定你为什么会这么想。但是为什么不首先在表单中定义相关属性，以便它们自动输出？

difficulty = forms.CharField(widget=forms.TextInput(attrs={"class": "slider form-control", "data-slider-min": "0"...}))

甚至更好，使用Crispy API让你声明这些属性（我不会自己使用Crispy，但我知道它会给你很多额外的控制。）

Answer 2

您可以覆盖默认小部件，为样式添加类，如下所示：

from django import forms
class CreateTestform(forms.ModelForm):
    class Meta:
        model = Test
        fields = ['difficulty'] # you don't need to define difficulty again,
        # just get it from your model like in this example.
        widget = {
            'difficulty': forms.CharField(attrs={
                'class': 'name-of-your-class',
                'other-attribute': 'other-value',
            }),
        }

您可以查看更多here。

如果你有太多的样式要应用于你的表单，我建议render it manually我知道你使用cripsy来避免这种情况，但它是一种更容易的方式，没有限制，django应该是用于后端，而不是前端。

你甚至可以像这样渲染（假设你必须渲染困难）：

<input class="whatever-your-class-is" name="{{ form.difficulty.html_name }}" id="{{ form.difficulty.id_for_label }}">

如果仔细查看，您会找到有关.html_name和.id_for_label的信息，甚至是.value here。

如何覆盖模型表单django上的单个项目

2 个答案: