如何覆盖Django UserCreationForm和AuthenticationForm的CSS而不丢失内置功能？

brtdzjyr 于 2023-07-01 发布在 Go

关注(0)|答案(1)|浏览(106)

我使用AuthenticationForm类登录用户，使用UserCreationForm类允许用户创建帐户。当我只是呈现默认表单时（在HTML文件中使用{{ form.as_p }}），一切都正常。然而，我想让表单看起来更好，所以我已经覆盖了表单如下：

class LoginForm(AuthenticationForm):
    username = forms.CharField(required=True, widget=TextInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "username", "placeholder": "Username"}))
    password = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password", "placeholder": "Password"}))

class RegistrationForm(UserCreationForm):
    email = forms.EmailField(required=True, widget=EmailInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "email", "placeholder": "Email"}))
    password1 = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password1", "placeholder": "Password"}))
    password2 = forms.CharField(widget=PasswordInput(attrs={
                                        'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                        "name": "password2", "placeholder": "Confirm password"}))

    class Meta:
        model = User
        fields = ['username', 'first_name', 'last_name', 'email', 'password1', 'password2']
        widgets = {
            'username': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                         "type": "text", "name": "username", "placeholder": "Username"}),
            'first_name': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                           "type": "text", "name": "first_name", "placeholder": "First Name"}),
            'last_name': TextInput(attrs={'class': "block border border-grey-light w-full p-3 rounded mb-4",
                                          "type": "text", "name": "last_name", "placeholder": "Last Name"}),
        }

然而，这样做似乎失去了这些表单提供的一些开箱即用的功能，例如UserCreationForm检查password1和password2是否相同，并向用户返回一条消息。
我做错什么了吗？最后，我想做的就是保留这些表单附带的所有功能，但只添加tailwind类"block border border-grey-light w-full p-3 rounded mb-4"。

django

来源：https://stackoverflow.com/questions/76588350/how-to-overide-the-css-of-django-usercreationform-and-authenticationform-without

1条答案

按热度按时间

ws51t4hk1#

您可以像这样覆盖内置的**UserCreationForm**。在这里，我应用了Bootstrap表单控件类来设置输入样式

form.py

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

# User Signup
class UserCreateForm(UserCreationForm):
    password1 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control'}))
    password2 = forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control'}))
    class Meta:
        model = User
        fields = ['username','email','password1','password2']

        widgets = {
            'username':forms.TextInput(attrs={'class':'form-control'}),
            'first_name':forms.TextInput(attrs={'class':'form-control'}),
            'last_name':forms.TextInput(attrs={'class':'form-control'}),
            'email':forms.EmailInput(attrs={'class':'form-control'}),

您可以在**views.py**中这样使用

form = UserCreateForm()

注意-对所有执行相同操作

赞(0）回复(0）举报 2023-07-01

我来回答

如何覆盖Django UserCreationForm和AuthenticationForm的CSS而不丢失内置功能？

1条答案

form.py

相关问题

热门标签

最新问答