django为Form生成的label标签添加class方式


Posted in Python onMay 20, 2020

使用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属性的,但是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})

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

<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方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python读取文本中数据并转化为DataFrame的实例
Apr 10 Python
Python 实现选择排序的算法步骤
Apr 22 Python
Python绘制的二项分布概率图示例
Aug 22 Python
python消除序列的重复值并保持顺序不变的实例
Nov 08 Python
对python插入数据库和生成插入sql的示例讲解
Nov 14 Python
详解Python学习之安装pandas
Apr 16 Python
python是否适合网页编程详解
Oct 04 Python
在python中利用try..except来代替if..else的用法
Dec 19 Python
浅谈python 类方法/静态方法
Sep 18 Python
PyCharm 光标变成黑块的解决方式
Feb 06 Python
python实现Thrift服务端的方法
Apr 20 Python
pandas:get_dummies()与pd.factorize()的用法及区别说明
May 21 Python
django orm模块中的 is_delete用法
May 20 #Python
Python3批量创建Crowd用户并分配组
May 20 #Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
May 20 #Python
django中related_name的用法说明
May 20 #Python
在django中form的label和verbose name的区别说明
May 20 #Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
May 20 #Python
django model 条件过滤 queryset.filter(**condtions)用法详解
May 20 #Python
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python中可以声明变量类型吗
2020/06/18 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
教师求职信
2014/06/17 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2014年统战工作总结
2014/12/09 职场文书
小学中队活动总结
2015/05/11 职场文书
工作感想范文
2015/08/07 职场文书
迎国庆主题班会
2015/08/17 职场文书