django如何為Form生成的label標(biāo)簽添加class

發(fā)布時(shí)間：2020-07-23 10:16:26 來源：億速云閱讀：257 作者：小豬欄目：開發(fā)技術(shù)

這篇文章主要講解了django如何為Form生成的label標(biāo)簽添加class，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

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

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

測(cè)試環(huán)境

創(chuàng)建一個(gè)Form，通過Form幫我們生成HTML：

# urls.py 文件，對(duì)應(yīng)關(guān)系
 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'})) # 其實(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)簽里沒有，并且Form組件里貌似也沒有提供為label標(biāo)簽增加自定義屬性的方式。

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

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

自定義函數(shù)

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

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

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

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

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

自定義的函數(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ù)：

<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)簽也寫一個(gè)自定義函數(shù)

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

照著樣子再寫一個(gè)子定義函數(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})

最后，上面搞得難么麻煩，主要是為了可以前端一個(gè)for循環(huán)，就能把表單按自定義的樣式顯示出來：

<body>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" 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)簽類型

密碼型、文本型、郵箱型框

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.類型（加入字典形式的標(biāo)簽信息）'''

class UserForm(forms.Form):
 # 模式：普通文本 標(biāo)簽加上：class="form-control"
 name = forms.CharField(widget=widgets.TextInput(attrs={'class': 'form-control'})) 
 
 # 模式：密碼模式 標(biāo)簽加上：class="form-control"
 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ò)誤類型': '提示信息'}
             }) 
 
 # 模式：invalid=格式錯(cuò)誤
 pwd = forms.CharField(min_length=4, label='密碼：'，
    error_messages={
                     'title': {'required': '不能為空哦親親'},
          'price': {'invalid': '格式錯(cuò)誤（提示方法）'},
          # '字段': {'錯(cuò)誤類型': '提示信息'}
             })

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>

看完上述內(nèi)容，是不是對(duì)django如何為Form生成的label標(biāo)簽添加class有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

django如何為Form生成的label標(biāo)簽添加class

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽