Django Form生成的label标签添加class样式的两种方法

竹里

发布时间：2026-10-13 | 2人浏览过

原创

本文介绍在Django中为Form生成的label标签添加class属性的两种方案。首先指出默认Widget仅支持input样式，随后通过自定义模板标签（simple_tag/filter）在前端实现label样式注入，并结合as_widget()方法统一处理input样式。最后补充了Form渲染类型、错误提示及Bootstrap集成的配置案例，帮助开发者实现前后端一致的表单样式控制。

Django Form label添加class样式的两种方法

在使用Django的Form生成HTML标签时，虽然可以通过Widget方法自定义标签属性，但这通常只能给生成的input标签添加样式，而无法直接为生成的label标签添加样式。

然而，在许多实际开发场景中，需要同时为label和input标签添加class属性，以便实现自定义的页面样式。

测试环境

创建一个Form，并通过Form自动生成HTML代码：


# urls.py 文件，对应关系
 path('email/', views.email),
 
# forms.py 文件
from django.forms import Form
from django.forms import fields
from django.forms import widgets
 
class UserEmail(Form):
 username = fields.CharField()
 password = fields.CharField(
  widget=widgets.PasswordInput(attrs={'class': 'c1'})
 )
 email = fields.EmailField(
  widget=widgets.EmailInput(attrs={'class': 'c1'})
 )
 
# views.py 文件
def email(request):
 obj = forms.UserEmail()
 print(obj['email'].label_tag(attrs={'class': 'c1'})) # 其实生成标签的方法是提供attrs参数的
 return render(request, 'demo/email.html', {'obj': obj})

在HTML页面中，直接使用Form生成的表单代码：


<body>
{{ obj.as_p }}
{{ obj.email.label_tag }}
{{ obj.email }}
</body>

从输出结果可以看出，input标签中包含class属性，但label标签中却没有。此外，Django的Form组件似乎没有提供直接为label标签增加自定义属性的方式。

通过模板语言的自定义函数实现

在上面的views代码中，print(obj['email'].label_tag(attrs={'class': 'c1'}))的输出显示，Django提供的生成label标签的方法确实支持通过attrs参数实现自定义属性。问题在于，在前端使用模板语言时，只能使用{{ obj.email.label_tag }}这种形式，无法直接传入参数。因此，我们需要自定义一个模板语言函数来解决这个问题。

自定义函数

要定义自定义函数，请按照以下步骤操作：

在APP目录下，创建templatetags目录。注意，目录名称必须准确无误。

创建任意.py文件，文件名可以随意指定，例如：myfun.py。

在文件中创建一个template.Library()对象，变量名必须为register。

接着编写自己的函数，并使用@register.simple_tag装饰器进行装饰：

自定义的函数代码如下：


# app名/templatetags/myfun.py 文件
from django import template
register = template.Library()
 
@register.filter(is_safe=True)
def label_with_classes(value, arg):
 return value.label_tag(attrs={'class': arg})

然后在页面中使用自定义的函数：


<body>
{{ obj.as_p }}
{{ obj.email.label_tag }}
{{ obj.email }}
{% load myfun %}
{{ obj.email|label_with_classes:'c1 c2' }}
</body>

注意，在调用上述自定义函数时，参数与参数之间不能有空格。

这里还有一个好处，即将添加前端样式的代码放到了前端的HTML文件中实现。

为input标签也写一个自定义函数

Django默认的方法是在Form中，通过widgets小部件添加attrs参数来实现标签的自定义样式。这是在后端实现的。上面已经实现了前端的自定义样式，这里找到了生成input标签的方法，即as_widget()。

照着示例再写一个自定义函数：


# app名/templatetags/myfun.py 文件
from django import template
register = template.Library()
 
@register.filter()
def label_with_classes(value, arg):
 return value.label_tag(attrs={'class': arg})
 
@register.filter()
def widget_with_classes(value, arg):
 return value.as_widget(attrs={'class': arg})

最后，前面之所以搞得这么复杂，主要是为了可以在前端通过一个for循环，将表单按自定义的样式显示出来：


<body>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
{% load myfun %}
<form class="form-horizontal">
{% for item in obj %}
 <div class="form-group">
 {{ item|label_with_classes:'col-sm-2 control-label' }}
 <div class="col-sm-10">
  {{ item|widget_with_classes:'form-control' }}
 </div>
 </div>
{% endfor %}
</form>
</body>

补充知识：Django Forms组件的参数配置案例 input样式，渲染的标签加class 错误信息提示

Forms渲染出标签类型

密码型、文本型、邮箱型框


from django.forms import widgets

# 自定义格式方法
class UserForm(forms.Form):
 '''最小4位 且 模式：普通文本'''
 name = forms.CharField(min_length=4, label='姓名：',widget=widgets.TextInput()) 
 
 '''最小4位 且 模式：密码模式'''
 pwd = forms.CharField(min_length=4, label='密码：', widget=widgets.PasswordInput())

渲染时添加属性 class=''(便于bootstrap)


from django.forms import widgets

'''在widgets.类型（加入字典形式的标签信息）'''

class UserForm(forms.Form):
 # 模式：普通文本 标签加上：class="form-control"
 name = forms.CharField(widget=widgets.TextInput(attrs={'class': 'form-control'})) 
 
 # 模式：密码模式 标签加上：class="form-control"
 pwd = forms.CharField(widget=widgets.PasswordInput(
 attrs={'class': 'form-control'}
 ))

渲染自定义错误提示

视图


from django.forms import widgets
'''追加error_messages参数 dict型式'''

class UserForm(forms.Form):

 # 模式：required=不能为空的提示
 name = forms.CharField(min_length=4, label='姓名：', 
    error_messages={
                     'title': {'required': '不能为空哦亲亲'},
          'price': {'invalid': '格式错误（提示方法）'},
          # '字段': {'错误类型': '提示信息'}
             }) 
 
 # 模式：invalid=格式错误
 pwd = forms.CharField(min_length=4, label='密码：'，
    error_messages={
                     'title': {'required': '不能为空哦亲亲'},
          'price': {'invalid': '格式错误（提示方法）'},
          # '字段': {'错误类型': '提示信息'}
             })

HTML展示错误信息


 <form action="" method="post" novalidate="novalidate"> 
 <!--要自定义提示必须 novalidate="novalidate"-->
 
   {% csrf_token %}
   {% for field in form %}
     <p>
       {{ field.label }}{{ field }} <span>{{ field.errors.0 }}</span>
       <!--错误信息固定：field.errors.0 -->
     </p>
   {% endfor %}
   <p><input type="submit" value="提交"></p>
 </form>

以上这篇django为Form生成的label标签添加class方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。