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帮我生成的表单：
<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的Django框架中forms表单类的使用方法详解
Form表单的功能 自动生成HTML表单元素 检查表单数据的合法性 如果验证错误,重新显示表单(数据不会重置) 数据类型转换(字符类型的数据转换成相应的Python类型) Form相关的对象包括 Widget:用来渲染成HTML元素的工具,如:forms.Textarea对应HTML中的<textarea>标签 Field:Form对象中的一个字段,如:EmailField表示email字段,如果这个字段不是有效的email格式,就会产生错误. Form:一系列Field对象的集合,负责验证和
-
Django框架获取form表单数据方式总结
Django中获取text,password 名字:<input type="text" name="name"><br><br> 密码:<input type="password" name="password"> Form表单提交数据时使用的是post方式,所以在后端接收参数的时候需要先判断请求方式为post时才能请求到数据 name = request.POST.get('
-
Django中的AutoField字段使用
[Django是一个机智的框架] 默认情况下Djang会为ORM中定义的每一张表加上一个自增ID列,并且用这个列来做主键:出于一个MySQL-DBA的工作经历我觉得 Djanog还真是机智:这样么说主要是因为我遇到过许多主从延时的问题,有些比较过分的会延时好几周,通常这些都是因为binlog格式 为"ROW"但是表上不存在主键引起的. 如果当前网站用的是Django开发的,我想就不会有这种事情发生了吧. [AutoField] Django默认的行为就像这样 class TestMod
-
django表单的Widgets使用详解
前言 不要将Widget与表单的fields字段混淆.表单字段负责验证输入并直接在模板中使用.而Widget负责渲染网页上HTML表单的输入元素和提取提交的原始数据.widget是字段的一个内在属性,用于定义字段在浏览器的页面里以何种HTML元素展现. 一.指定使用的widget 每个字段都有一个默认的widget类型.如果你想要使用一个不同的Widget,可以在定义字段时使用widget参数. 像这样: from django import forms class CommentForm(fo
-
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 dj
-
在django中form的label和verbose name的区别说明
如下所示: captcha = CaptchaField(label = u'验证码') captcha = CaptchaField(verbose_name = u'验证码') label是这个Field如果在form中的话会显示. verbose_name 在form中不会显示 只是一种说明而已 补充知识:django models verbose_name 的作用 一. verbose_name就是在后台显示对对应的名称,看图 对应后台字段如图 以上这篇在django中form的labe
-
vue用elementui写form表单时,在label里添加空格操作
要在密码两字中间添加空格,发现直接添加 是识别不了的,正确写法为: 代码: <el-form-item label="密 码:" :label-width="formLabelWidth" prop="password"> <label slot="label">密 码:</label> <el-input type="password" v-model=&
-
django做form表单的数据验证过程详解
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2.然后创建一个类,继承forms.form 3.然后在这个类中写变量,这个变量的就是input标签中的name,也就是前端往后端传递的k值,我们就可以对这个k值对应的v值做数据内容的校验,比如是邮箱模式,比如是否允许空,最大字段长度,最小字段长度 4.然后在视图函数中,实例化一个步骤3中的类,然后用这
-
Python Web框架之Django框架Form组件用法详解
本文实例讲述了Python Web框架之Django框架Form组件用法.分享给大家供大家参考,具体如下: Form简介 在HTTP中,表单(form标签),是用来提交数据的,其action属性说明了其传输数据的方法:如何传.如何接收. 访问网站时,表单可以实现客户端与服务器之间的通信.例如查询,就用到了表单(其属性中,action=get). 再比如说注册与登陆,也是要用到表单的.但这里由于涉及到隐私问题,需要保证数据传输的安全性,因此其传输方法就应当使用post而非get. 总之,对客户端来
-
django上传图片并生成缩略图方法示例
django 处理上传图片生成缩略图首先要注意form标签上必须有enctype="multipart/form-data"属性,另外要装好PIL库, 然后就很简单了,如下是实例代码: upload.html <div id="uploader"> <form id="upload" enctype="multipart/form-data" action="/ajax/upload/"
-
HTML的form表单和django的form表单
django的表单系统,分2种 基于django.forms.Form的所有表单类的父类 基于django.forms.ModelForm,可以和模型类绑定的Form 直接用原生的form表单,也可以直接用,较麻烦, django的form表单,也可用可不要, 在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框, #----- #django 的form表单 from django import forms class MyForm(forms.Form): #for
-
在django admin详情表单显示中添加自定义控件的实现
在开发中有需求在详情显示里外键字段内容,并且添加按钮弹窗内容,以及按钮跳转内容. 以前并没有做过相似的开发,我们的后台是xadmin,当时正在研究xadmin的插件,于是想着能不能用插件去做,后来发现太麻烦,而且实现起来我也没研究通,主要是添加按钮之类的没搞懂,于是就换了一种简单的方法. 首先先讲解下思路,admin中有几个界面,一个是展示的list界面,一个是详情的model界面,model中其实就是详情detail,里面记录了此条数据的全部内容,精简来说就是一个form表单的内容展示. 那么
-
html label标签的使用教程
在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释: Label 中有两个属性是非常有用的,一个是FOR.另外一个就是ACCESSKEY了. FOR属性 功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点. 用法:<Label FOR="InputBox">姓名</Label
-
在Django的form中使用CSS进行设计的方法
修改form的显示的最快捷的方式是使用CSS. 尤其是错误列表,可以增强视觉效果.自动生成的错误列表精确的使用`` <ul class="errorlist">``,这样,我们就可以针对它们使用CSS. 下面的CSS让错误更加醒目了: <style type="text/css"> ul.errorlist { margin: 0; padding: 0; } .errorlist li { background-color: red; co