django為Form生成的label標(biāo)簽添加class方式
使用Form生成html標(biāo)簽的時(shí)候，雖然提供了widget的方法可以自定義標(biāo)簽的要是，但是只能給生成的input標(biāo)簽添加樣式，對(duì)于生成的label標(biāo)簽無(wú)法添加樣式。
而很多場(chǎng)景下需要為label和input都添加class以實(shí)現(xiàn)自定義樣式。
測(cè)試環(huán)境
創(chuàng)建一個(gè)Form，通過(guò)Form幫我們生成HTML：
# urls.py 文件，對(duì)應(yīng)關(guān)系 path(’email/’, views.email), # forms.py 文件from django.forms import Formfrom django.forms import fieldsfrom 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’})) # 其實(shí)生成標(biāo)簽的方法是提供attrs參數(shù)的 return render(request, ’demo/email.html’, {’obj’: obj})
在html中，直接使用Form幫我生成的表單：
<body>{{ obj.as_p }}{{ obj.email.label_tag }}{{ obj.email }}</body>
這里可以看到，input標(biāo)簽里都是有class屬性的，但是lable標(biāo)簽里沒(méi)有，并且Form組件里貌似也沒(méi)有提供為label標(biāo)簽增加自定義屬性的方式。
通過(guò)模板語(yǔ)言的自定義函數(shù)實(shí)現(xiàn)
上面的views里的 print(obj[’email’].label_tag(attrs={’class’: ’c1’})) ，從輸出看，django提供的生成label標(biāo)簽的方法是支持attrs參數(shù)實(shí)現(xiàn)自定義屬性的，問(wèn)題是在前端使用模板語(yǔ)言的時(shí)候只能這樣 {{ obj.email.label_tag }} 無(wú)法傳入?yún)?shù)。這里就自定義個(gè)模板語(yǔ)言的函數(shù)來(lái)解決這個(gè)問(wèn)題。
自定義函數(shù)
要自定義函數(shù)，按照下面的步驟操作：
在APP下，創(chuàng)建templatetags目錄，目錄名字很重要不能錯(cuò)。
創(chuàng)建任意 .py 文件，這里文件名隨意，比如：myfun.py。
文件里創(chuàng)建一個(gè)template.Library()對(duì)象，名字是register。這里的對(duì)象名字必須是register。
然后寫(xiě)自己的函數(shù)，但是都用@register.simple_tag這個(gè)裝飾器裝飾好：
自定義的函數(shù)如下：
# app名/templatetags/myfun.py 文件from django import templateregister = template.Library() @register.filter(is_safe=True)def label_with_classes(value, arg): return value.label_tag(attrs={’class’: arg})
然后在頁(yè)面中使用自定義的函數(shù)：
<body>{{ obj.as_p }}{{ obj.email.label_tag }}{{ obj.email }}{% load myfun %}{{ obj.email|label_with_classes:’c1 c2’ }}</body>
注意，上面的自定義函數(shù)引用的時(shí)候參數(shù)和參數(shù)之間一定不能有空格。
這里還有一個(gè)好處，把添加前端樣式的代碼放到了前端的html里實(shí)現(xiàn)了。
為input標(biāo)簽也寫(xiě)一個(gè)自定義函數(shù)
django默認(rèn)的方法是在Form里，通過(guò)widgets小部件添加attrs參數(shù)來(lái)實(shí)現(xiàn)標(biāo)簽的自定義樣式。這是在放在后端實(shí)現(xiàn)的。上面已經(jīng)實(shí)現(xiàn)了前端的自定義樣式，這里找了到生成input標(biāo)簽的方法，就是as_widget()。
照著樣子再寫(xiě)一個(gè)子定義函數(shù)：
# app名/templatetags/myfun.py 文件from django import templateregister = 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})
最后，上面搞得難么麻煩，主要是為了可以前端一個(gè)for循環(huán)，就能把表單按自定義的樣式顯示出來(lái)：
<body><link rel='stylesheet' 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>
補(bǔ)充知識(shí)：Django Forms組件 的參數(shù)配置案例 input樣式， 渲染的標(biāo)簽加class 錯(cuò)誤信息提示
Forms渲染出標(biāo)簽類(lèi)型
密碼型、文本型、郵箱型框
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())
渲染時(shí)添加屬性 class=’’(便于bootstrap)
from django.forms import widgets’’’在widgets.類(lèi)型（加入字典形式的標(biāo)簽信息）’’’class UserForm(forms.Form): # 模式：普通文本 標(biāo)簽加上： name = forms.CharField(widget=widgets.TextInput(attrs={’class’: ’form-control’})) # 模式：密碼模式 標(biāo)簽加上： pwd = forms.CharField(widget=widgets.PasswordInput( attrs={’class’: ’form-control’} ))
渲染自定義錯(cuò)誤提示
視圖
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’: ’格式錯(cuò)誤（提示方法）’}, # ’字段’: {’錯(cuò)誤類(lèi)型’: ’提示信息’} }) # 模式：invalid=格式錯(cuò)誤 pwd = forms.CharField(min_length=4, label=’密碼：’， error_messages={ ’title’: {’required’: ’不能為空哦親親’}, ’price’: {’invalid’: ’格式錯(cuò)誤（提示方法）’}, # ’字段’: {’錯(cuò)誤類(lèi)型’: ’提示信息’} })
HTML展示錯(cuò)誤信息
<form action='' method='post' novalidate='novalidate'> <!--要自定義提示必須 novalidate='novalidate'--> {% csrf_token %} {% for field in form %} <p> {{ field.label }}{{ field }} <span>{{ field.errors.0 }}</span> <!--錯(cuò)誤信息固定：field.errors.0 --> </p> {% endfor %} <p><input type='submit' value='提交'></p> </form>
以上這篇django為Form生成的label標(biāo)簽添加class方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能2. 解析原生JS getComputedStyle3. ASP中實(shí)現(xiàn)字符部位類(lèi)似.NET里String對(duì)象的PadLeft和PadRight函數(shù)4. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享5. 利用CSS3新特性創(chuàng)建透明邊框三角6. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)7. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論8. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)9. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享10. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐
網(wǎng)公網(wǎng)安備