django為Form生成的label標籤添加class方式

使用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幫我生成的表單：

  {{ obj.as_p }}  {{ obj.email.label_tag }}  {{ obj.email }}

這裡可以看到，input標籤裡都是有class屬性的，但是lable標籤裡沒有，並且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。

然後寫自己的函數，但是都用@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})

然後在頁面中使用自定義的函數：

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

注意，上面的自定義函數引用的時候參數和參數之間一定不能有空格。

這裡還有一個好處，把添加前端樣式的代碼放到了前端的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循環，就能把表單按自定義的樣式顯示出來：

  {% load myfun %}{% for item in obj %}{{ item|label_with_classes:'col-sm-2 control-label' }}{{ item|widget_with_classes:'form-control' }}{% endfor %}

補充知識：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展示錯誤信息

           {% csrf_token %}     {% for field in form %}{{ field.label }}{{ field }} {{ field.errors.0 }}         {% endfor %}