我正在制作一个有登录页面的应用程序。我正在使用默认的django用户名和密码字段。我想为它添加一些CSS。如何修改默认样式并使其看起来不错
我的HTML是这种形式
<!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>
变量{{ form.username }}和{{ form.password }}正在为它们设置默认样式。我只想为它们添加一个css类。如何在此模板中自行添加
答案 0 :(得分：1)
假设您要添加类或占位符，例如：
<input type="text" class="SomeClass" placeholder="TypeSomething..."><input>
在您的forms.py中导入您的模型，然后：
class YourModelForm(forms.ModelForm):
class Meta:
model = YourModel
#if you want to use all models then set field = to '__all__' (whithout the [] )
fields = ['Username']
username = forms.TextImput(
widget=forms.TextInput(attrs={
'class': 'SomeClass',
'autofocus': True,
'placeholder': 'TypeSomething'
}
)
)
最后在views.py中，导入表单并将其添加到form_class：
Class YourLoginView(FormView):
form_class = YourModelForm
如果您想要登录/注销视图（我需要导入您自己的表单并将其放在form_class中），我会将其剪切掉：
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'
对于AuthenticationForm：
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
答案 1 :(得分：0)
您可以在每个字段的表单窗口小部件中设置class属性（请参阅django docs）。
我最终使用了django-bootstrap4，还有其他类似的软件包，你可以通过谷歌找到。
例如，在this post中讨论了其他选项。