如何将css添加到django中的默认表单元素答案

【问题标题】：How to add css to the default form elements in django如何将css添加到django中的默认表单元素
【发布时间】：2018-08-23 06:03:24
【问题描述】：

我正在制作一个具有登录页面的应用程序。我正在使用默认的 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 类。我该如何在这个模板本身中做到这一点

【问题讨论】：

标签： css django django-forms django-authentication

【解决方案1】：

您可以在每个字段的表单小部件中设置类属性（参见django docs）。

我最终使用了django-bootstrap4，您可以通过 google 找到其他类似的包。

例如，this post 中讨论了其他选项。

【讨论】：

我的 forms.py 中没有任何东西可以设置属性
所以我只需要在模板中设置属性
您是否从模板中使用的form 实例获得？您是创建它还是使用通用视图或其他东西？
我使用了一个非常简单/通用的登录页面，这是 django 的默认登录页面
我从这里得到它Mozilla developer network

【解决方案2】：

假设您要添加一个类或占位符，例如：

<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

【讨论】：

据我了解，我能做的就是在 form.py 中编写表单。然后在 urls.py 中声明登录 url 并为其编写一个视图。然后该视图将调用表单将传递到的模板
forms.py 用于自定义字段行为及其显示方式。在 urls.py 中，您将像这样声明您的 LoginView：path('accounts/login/',a.LoginView.as_view(), name='Login') 并且不要忘记声明您的登录重定向 LOGIN_REDIRECT_URL = "accounts/login/"（与您在 urls.py 中声明的相同）。最后是的，视图将调用表单将传递到的模板。