使用Form生成html標簽的時候，雖然提供了widget的方法可以自定義標簽的要是，但是只能給生成的input標簽添加樣式，對于生成的label標簽無法添加樣式。

而很多場景下需要為label和input都添加class以實現(xiàn)自定義樣式。

測試環(huán)境

創(chuàng)建一個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參數(shù)的

return render(request, 'demo/email.html', {'obj': obj})

在html中，直接使用Form幫我生成的表單：

{{ obj.as_p }}

{{ obj.email.label_tag }}

{{ obj.email }}

這里可以看到，input標簽里都是有class屬性的，但是lable標簽里沒有，并且Form組件里貌似也沒有提供為label標簽增加自定義屬性的方式。

通過模板語言的自定義函數(shù)實現(xiàn)

上面的views里的 print(obj['email'].label_tag(attrs={'class': 'c1'})) ，從輸出看，django提供的生成label標簽的方法是支持attrs參數(shù)實現(xiàn)自定義屬性的，問題是在前端使用模板語言的時候只能這樣 {{ obj.email.label_tag }} 無法傳入?yún)?shù)。這里就自定義個模板語言的函數(shù)來解決這個問題。

自定義函數(shù)

要自定義函數(shù)，按照下面的步驟操作：

在APP下，創(chuàng)建templatetags目錄，目錄名字很重要不能錯。

創(chuàng)建任意 .py 文件，這里文件名隨意，比如：myfun.py。

文件里創(chuàng)建一個template.Library()對象，名字是register。這里的對象名字必須是register。

然后寫自己的函數(shù)，但是都用@register.simple_tag這個裝飾器裝飾好：

自定義的函數(shù)如下：

# 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})

然后在頁面中使用自定義的函數(shù)：

{{ obj.as_p }}

{{ obj.email.label_tag }}

{{ obj.email }}

{% load myfun %}

{{ obj.email|label_with_classes:'c1 c2' }}

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

這里還有一個好處，把添加前端樣式的代碼放到了前端的html里實現(xiàn)了。

為input標簽也寫一個自定義函數(shù)

django默認的方法是在Form里，通過widgets小部件添加attrs參數(shù)來實現(xiàn)標簽的自定義樣式。這是在放在后端實現(xiàn)的。上面已經(jīng)實現(xiàn)了前端的自定義樣式，這里找了到生成input標簽的方法，就是as_widget()。

照著樣子再寫一個子定義函數(shù)：

# 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循環(huán)，就能把表單按自定義的樣式顯示出來：

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

{% load myfun %}

{% for item in obj %}

{{ item|label_with_classes:'col-sm-2 control-label' }}

{{ item|widget_with_classes:'form-control' }}

{% endfor %}

補充知識：Django Forms組件 的參數(shù)配置案例 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參數(shù) 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 %}

以上這篇django為Form生成的label標簽添加class方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持我們。

本文標題: django為Form生成的label標簽添加class方式

本文地址: http://www.cppcns.com/jiaoben/python/313830.html

總結

以上是生活随笔為你收集整理的python编译成class_django为Form生成的label标签添加class方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。