如何将css添加到django中的默认表单元素
我正在制作一个有登录页面的应用程序。我正在使用默认的django用户名和密码字段。我想在其中添加一些css。我们如何修改默认样式并使其看起来更好 我的HTML是这种形式的如何将css添加到django中的默认表单元素,css,django,django-forms,django-authentication,Css,Django,Django Forms,Django Authentication,我正在制作一个有登录页面的应用程序。我正在使用默认的django用户名和密码字段。我想在其中添加一些css。我们如何修改默认样式并使其看起来更好 我的HTML是这种形式的 <!DOCTYPE html> {% load staticfiles %} <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Purple Admin</title>
<link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}">
<!-- plugins:css -->
<link rel="stylesheet" href="{% static 'css/perfect-scrollbar.min.css' %}">
<!-- endinject -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- endinject -->
<link rel="shortcut icon" href="{% static 'images/favicon.png' %}">
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<div class="row">
<div class="content-wrapper full-page-wrapper d-flex align-items-center auth-pages">
<div class="card col-lg-4 mx-auto">
<div class="card-body px-5 py-5">
<h3 class="card-title text-left mb-3">Login</h3>
<form method="post" action="{% url 'login' %}">
<div class="form-group">
<label>Username: </label>
{{ form.username }}
</div>
<div class="form-group">
<label>Password: </label>
{{ form.password }}
</div>
<div>
{% if form.errors %}
<font color="red">Your username and/or password didn't match. Please try again.</font>
{% endif %}
</div>
<div class="form-group d-flex align-items-center justify-content-between">
<a href="#" class="forgot-pass">Forgot password</a>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-block enter-btn">Login</button>
</div>
<p class="sign-up">Don't have an Account?<a href="#"> Sign Up</a></p>
</form>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- row ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.css' %}"></script>
<script src="{% static 'js/perfect-scrollbar.jquery.min.js' %}"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/misc.js' %}"></script>
<!-- endinject -->
</body>
</html>
{%load staticfiles%}
紫色管理员
登录
用户名：
{{form.username}
密码：
{{form.password}}
{%if form.errors%}
您的用户名和/或密码不匹配。请再试一次。
{%endif%}
登录
你没有账户吗
变量
{{form.username}{{form.password}}例如，中讨论了其他选项。假设您要添加一个类或占位符，如：
<input type="text" class="SomeClass" placeholder="TypeSomething..."><input>
Class YourLoginView(FormView):
form_class = YourModelForm
import unicodedata
from django import forms
from django.contrib.auth import (
authenticate, get_user_model, password_validation,
)
from django.utils.translation import gettext, gettext_lazy as _
from django.utils.text import capfirst
UserModel = get_user_model()
class UsernameField(forms.CharField):
def to_python(self, value):
return unicodedata.normalize('NFKC', super().to_python(value))
class AuthenticationForm(forms.Form):
"""
(This is a modified version of the original:
django.contrib.auth.forms.AuthenticationForm)
Base class for authenticating users. Extend this to get a form that accepts
username/password logins.
"""
username = UsernameField(
label=_("Username"),
max_length=32,
widget=forms.TextInput(attrs={
'autofocus': True,
'placeholder': _('Type your username')
}
),
)
password = forms.CharField(
label=_("Password"),
strip=False,
widget=forms.PasswordInput(attrs={
'class': 'form-control',
'placeholder': _('Contraseña')
}
),
)
error_messages = {
'invalid_login': _(
"Please enter a correct %(username)s and password. Note that both "
"fields may be case-sensitive."
),
'inactive': _("This account is inactive."),
}
def __init__(self, request=None, *args, **kwargs):
"""
The 'request' parameter is set for custom auth use by subclasses.
The form data comes in via the standard 'data' kwarg.
"""
self.request = request
self.user_cache = None
super().__init__(*args, **kwargs)
# Set the label for the "username" field.
self.username_field = UserModel._meta.get_field(
UserModel.USERNAME_FIELD)
if self.fields['username'].label is None:
self.fields['username'].label = capfirst(
self.username_field.verbose_name)
def clean(self):
username = self.cleaned_data.get('username')
password = self.cleaned_data.get('password')
if username is not None and password:
self.user_cache = authenticate(
self.request, username=username, password=password)
if self.user_cache is None:
# An authentication backend may reject inactive users. Check
# if the user exists and is inactive, and raise the 'inactive'
# error if so.
try:
self.user_cache = UserModel._default_manager.get_by_natural_key(
username)
except UserModel.DoesNotExist:
pass
else:
self.confirm_login_allowed(self.user_cache)
raise forms.ValidationError(
self.error_messages['invalid_login'],
code='invalid_login',
params={'username': self.username_field.verbose_name},
)
else:
self.confirm_login_allowed(self.user_cache)
return self.cleaned_data
def confirm_login_allowed(self, user):
"""
Controls whether the given User may log in. This is a policy setting,
independent of end-user authentication. This default behavior is to
allow login by active users, and reject login by inactive users.
If the given user cannot log in, this method should raise a
``forms.ValidationError``.
If the given user may log in, this method should return None.
"""
if not user.is_active:
raise forms.ValidationError(
self.error_messages['inactive'],
code='inactive',
)
def get_user_id(self):
if self.user_cache:
return self.user_cache.id
return None
def get_user(self):
return self.user_cache
我的forms.py中没有设置属性的任何内容，因此我只需要在模板中设置属性。您从模板中使用的
表单实例中获得了什么？是您创建的还是您使用的是通用视图还是其他什么？我使用了一个非常简单/通用的登录页面，在Django中是默认的。据我所知，我从这里获得了它。我可以做的是，我将在form.py中编写表单。然后在urls.py中声明登录url并为其编写一个视图。该视图将调用一个模板，该表单将访问该模板will be passedforms.py用于自定义字段行为及其显示方式。在urls.py中，您将像这样声明您的登录视图：path（'accounts/login/'，a.LoginView.as\u view（），name='login'）
，并且不要忘记声明您的登录重定向login\u重定向\u URL=“accounts/login/”
（与您在URL.py中声明的相同）。最后，是的，视图将调用表单将传递到的模板。
from django.utils.http import is_safe_url
from django.contrib.auth import REDIRECT_FIELD_NAME, login as auth_login
from django.contrib.auth.views import LogoutView
from django.utils.decorators import method_decorator
from django.views.decorators.cache import never_cache
from django.views.decorators.csrf import csrf_protect
from django.views.decorators.debug import sensitive_post_parameters
from django.views.generic import FormView
class LoginView(FormView):
"""
Provides the ability to login as a user with a username and password
"""
template_name = 'login.html'
success_url = '/'
form_class = AuthenticationForm
redirect_field_name = '/'
@method_decorator(sensitive_post_parameters('password'))
@method_decorator(csrf_protect)
@method_decorator(never_cache)
def dispatch(self, request, *args, **kwargs):
# Sets a test cookie to make sure the user has cookies enabled
request.session.set_test_cookie()
return super(LoginView, self).dispatch(request, *args, **kwargs)
def form_valid(self, form):
auth_login(self.request, form.get_user())
# If the test cookie worked, go ahead and
# delete it since its no longer needed
if self.request.session.test_cookie_worked():
self.request.session.delete_test_cookie()
return super(LoginView, self).form_valid(form)
def get_success_url(self):
redirect_to = self.request.GET.get(self.redirect_field_name)
if not is_safe_url(url=redirect_to, host=self.request.get_host()):
redirect_to = self.success_url
return redirect_to
class Logout(LogoutView):
"""
Provides users the ability to logout
"""
template_name = 'logout.html'
import unicodedata
from django import forms
from django.contrib.auth import (
authenticate, get_user_model, password_validation,
)
from django.utils.translation import gettext, gettext_lazy as _
from django.utils.text import capfirst
UserModel = get_user_model()
class UsernameField(forms.CharField):
def to_python(self, value):
return unicodedata.normalize('NFKC', super().to_python(value))
class AuthenticationForm(forms.Form):
"""
(This is a modified version of the original:
django.contrib.auth.forms.AuthenticationForm)
Base class for authenticating users. Extend this to get a form that accepts
username/password logins.
"""
username = UsernameField(
label=_("Username"),
max_length=32,
widget=forms.TextInput(attrs={
'autofocus': True,
'placeholder': _('Type your username')
}
),
)
password = forms.CharField(
label=_("Password"),
strip=False,
widget=forms.PasswordInput(attrs={
'class': 'form-control',
'placeholder': _('Contraseña')
}
),
)
error_messages = {
'invalid_login': _(
"Please enter a correct %(username)s and password. Note that both "
"fields may be case-sensitive."
),
'inactive': _("This account is inactive."),
}
def __init__(self, request=None, *args, **kwargs):
"""
The 'request' parameter is set for custom auth use by subclasses.
The form data comes in via the standard 'data' kwarg.
"""
self.request = request
self.user_cache = None
super().__init__(*args, **kwargs)
# Set the label for the "username" field.
self.username_field = UserModel._meta.get_field(
UserModel.USERNAME_FIELD)
if self.fields['username'].label is None:
self.fields['username'].label = capfirst(
self.username_field.verbose_name)
def clean(self):
username = self.cleaned_data.get('username')
password = self.cleaned_data.get('password')
if username is not None and password:
self.user_cache = authenticate(
self.request, username=username, password=password)
if self.user_cache is None:
# An authentication backend may reject inactive users. Check
# if the user exists and is inactive, and raise the 'inactive'
# error if so.
try:
self.user_cache = UserModel._default_manager.get_by_natural_key(
username)
except UserModel.DoesNotExist:
pass
else:
self.confirm_login_allowed(self.user_cache)
raise forms.ValidationError(
self.error_messages['invalid_login'],
code='invalid_login',
params={'username': self.username_field.verbose_name},
)
else:
self.confirm_login_allowed(self.user_cache)
return self.cleaned_data
def confirm_login_allowed(self, user):
"""
Controls whether the given User may log in. This is a policy setting,
independent of end-user authentication. This default behavior is to
allow login by active users, and reject login by inactive users.
If the given user cannot log in, this method should raise a
``forms.ValidationError``.
If the given user may log in, this method should return None.
"""
if not user.is_active:
raise forms.ValidationError(
self.error_messages['inactive'],
code='inactive',
)
def get_user_id(self):
if self.user_cache:
return self.user_cache.id
return None
def get_user(self):
return self.user_cache