在 Django 中更改使用 ModelForm 创建的表单元素的宽度

发布于09月21日

如果我使用ModelForm创建文本区域表单元素，如何更改它的宽度？

以下是我的产品类:

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

模板代码...

{% for f in form %}
    {{ f.name }}:{{ f }}
{% endfor %}

f是实际的表单元素...

推荐答案

The easiest way for your use case is to use CSS美元.这是一种用于定义表示的语言.查看Form生成的代码，记下您感兴趣的字段的ID，并通过CSS更改这些字段的外观.

ProductForm中的long_desc字段示例(当表单没有自定义前缀时):

#id_long_desc {
    width: 300px;
    height: 200px;
}

Second approach是将关键字attrs传递给您的小部件构造函数.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea(attrs={'cols': 10, 'rows': 20}))
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

是described in Django documentation.

Third approach将暂时离开newforms良好的声明性接口，并在自定义构造函数中设置您的小部件属性.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

    # Edit by bryan
    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
        self.fields['long_desc'].widget.attrs['cols'] = 10
        self.fields['long_desc'].widget.attrs['rows'] = 20

此方法具有以下优点: