如何将自定义CSS添加到松脆的表单中? [英] How do I add custom CSS to crispy forms?
问题描述
我正试图在脆性表单的帮助下为我的网站创建一个响应表单.我不使用引导程序,而是要向脆性表单添加自定义CSS以匹配我的整个网站.
I'm trying to create a responsive form for my website with the help of crispy forms.I'm not using bootstrap and I want to add custom CSS to the crispy form to match my whole website.
HTML:
<form method='POST' action=''>{% csrf_token %}
{{ form|crispy }}
<input type='submit' value='Sign Up' />
</form>
使用检查元素显示:
<form method='POST' action=''><input type='hidden' name='csrfmiddlewaretoken' value='GLJMxnnDz1MGNFC46pjoofSlo6JMCD1IXu7X3n7LsRbQfdS38SYHJMs9IAXddcck' />
<div id="div_id_full_name" class="form-group"> <label for="id_full_name" class="control-label ">
Full name
</label> <div class="controls "> <input class="textinput textInput form-control" id="id_full_name" maxlength="120" name="full_name" type="text" /> </div> </div> <div id="div_id_email" class="form-group"> <label for="id_email" class="control-label requiredField">
Email<span class="asteriskField">*</span> </label> <div class="controls "> <input class="emailinput form-control" id="id_email" maxlength="254" name="email" type="email" required /> </div> </div>
<!-- <input class='btn btn-primary' type='submit' value='Sign Up' />-->
<input type='submit' value='Sign Up' />
</form>
forms.py:
from django import forms
from .models import SignUp
class ContactForm(forms.Form):
full_name = forms.CharField(required=False)
email = forms.EmailField()
message = forms.CharField()
class SignUpForm(forms.ModelForm):
class Meta:
model = SignUp
fields = ['full_name', 'email']
models.py:
models.py:
from __future__ import unicode_literals
# Create your models here.
from django.db import models
# Create your models here.
class SignUp(models.Model):
email = models.EmailField()
full_name = models.CharField(max_length=120, blank=True, null=True)
timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
updated = models.DateTimeField(auto_now_add=False, auto_now=True)
def __unicode__(self): #Python 3.3 is __str__
return self.email
推荐答案
作为文档说,默认情况下使用引导程序包含脆性表格,并且还为 bootstrap
, bootstrap3
, bootstrap4
和 uniform
.另请参见覆盖项目模板
As docs says, by default crispy forms using bootstrap, and also provides some template packs for bootstrap
, bootstrap3
, bootstrap4
and uni-form
. see also about Overriding project templates
如果您需要自定义这种松脆的表格,则需要为您的项目创建一个新的自定义模板,例如 crispy_forms/templates/< foobar>/
.您可以在以下存储库路径中检出: https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates
If you need to custom this crispy forms, you need to create a new custom template for your project, an example crispy_forms/templates/<foobar>/
. you can checkout at this path of repository: https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates
但是,以前的易碎表单具有用于处理特定字段的模板标签.其中之一是 {{form.field_name| as_crispy_field}}
,下面的示例是它的输出.
But, previously crispy forms has templatetags to handle specific field. one of it is {{ form.field_name|as_crispy_field }}
, this example below is output of it.
<div id="div_id_email" class="control-group">
<label for="id_email" class="control-label">Email address</label>
<div class="controls">
<input class="form-control" id="id_email" maxlength="254" name="email" required="required" type="email" />
</div>
</div>
其他选项,您可以使用表单窗口小部件内的特定html选择器/属性来处理它,例如html class
, id
, style
,否则.
Other options, you can handle it using specific html selectors/attributes inside your forms widget, such as html class
, id
, style
, or else.
例如您的情况;
class SignUpForm(forms.ModelForm):
class Meta:
model = SignUp
fields = ['full_name', 'email']
widgets = {
'email': forms.EmailInput(attrs={'class': 'form-control custom-class'}),
}
然后,如果您以 {{form.email | as_crispy_field}}
呈现,则应呈现html;
And then, if you render as {{ form.email|as_crispy_field }}
, this should render the html;
<div id="div_id_email" class="control-group">
<label for="id_email" class="control-label">Email address</label>
<div class="controls">
<input class="form-control custom-class" id="id_email" maxlength="254" name="email" required="required" type="email" />
</div>
</div>
Crispy表单还提供了在 settings.py
内部的简单配置,Django字段生成了默认类,crispy-forms处理了这些类,并添加了其他类以与CSS框架兼容.例如, CharField
生成< input class ="textinput"
,
Crispy forms also provides simply configuration inside settings.py
, Django fields generate default classes, crispy-forms handles these and adds other classes for compatibility with CSS frameworks. For example a CharField
generates an <input class="textinput"
, for more...
CRISPY_CLASS_CONVERTERS = {
'textinput': "form-control cst__radius",
'urlinput': "form-control cst__radius",
'numberinput': "form-control cst__radius",
'emailinput': "form-control cst__radius",
'dateinput': "form-control cst__radius",
'textarea': "form-control cst__radius",
'passwordinput': "form-control cst__radius",
'select': "form-control cst__radius",
}
这篇关于如何将自定义CSS添加到松脆的表单中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!