CSS在django密码表单字段上不起作用 [英] CSS not working on django password form field

问题描述

我从网上下载了一个CSS模板.我能够将所有内容链接到我的Django代码execpt，以获取密码字段和按钮样式.我错过了哪一步?我已经阅读了Django documentatin，并且正在使用attr metthod将css属性添加到django表单字段中.在我的python代码中，实现CSS时，它们似乎缺少密码字段的form属性.

I downloaded a css template from the web. I was able to link everything to my Django code execpt for the password fields and button styling. What step am I missing missing? I have read the Django documentatin and I am using the attr metthod to add css attributes to my django form fields. In my python code their seems to be a missing form attribute for password fields when implementing css.

#My Forms.py代码

#My Forms.py code

    class CreateUserForm(UserCreationForm):
    
    class Meta:
        model = User

        fields = [ 'username', 'email', 'password1', 'password2']

        #applying form css rules where the item is a call to the css name or form attribute
        widgets={
            'username': forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'UserName'}),
            'email':forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'Email'}),
            'password1':forms.PasswordInput(attrs={'class':'pass', 'type':'text', 'align':'center', 'placeholder':'password'}),
            'password2': forms.PasswordInput(attrs={'class':'pass', 'type':'password', 'align':'center', 'placeholder':'password'}),
        }




#My View function

    def signup(request):
    form = CreateUserForm() 

    if request.method == 'POST':
        form = CreateUserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login') 


    context = {'form': form}
    return render(request, "testingapp/signup.html", context)

#My css code
        body {
        background-color: #F3EBF6;
        font-family: 'Ubuntu', sans-serif;
    }
    
    .main {
        background-color: #FFFFFF;
        width: 400px;
        height: 400px;
        margin: 7em auto;
        border-radius: 1.5em;
        box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
    }
    
    .sign {
        padding-top: 40px;
        color: #8C55AA;
        font-family: 'Ubuntu', sans-serif;
        font-weight: bold;
        font-size: 23px;
    }
    
    .un {
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
    form.form1 {
        padding-top: 40px;
    }
    
    .pass {
            width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
   
    .un:focus, .pass:focus {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;
        
    }
    
    .submit {
      cursor: pointer;
        border-radius: 5em;
        color: #fff;
        background: linear-gradient(to right, #9C27B0, #E040FB);
        border: 0;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
        font-family: 'Ubuntu', sans-serif;
        margin-left: 35%;
        font-size: 13px;
        box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
    }
    
    .forgot {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        padding-top: 15px;
    }
    
    
    input {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        text-decoration: none
    }
    
    @media (max-width: 600px) {
        .main {
            border-radius: 0px;
        }
    
    } 

#我的HTML

    {% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup</title>
    <link rel="stylesheet" type="text/css" href="{% static 'testingapp/style.css' %}"></style>
</head>
<body>
<form method="POST" action="">
{% csrf_token %}


<body>
    <div class="main">
        
      <p class="sign" align="center">SIGN UP</p>
      <form class="form1" action="" method="post">
        {{ form.username }}

        {{ form.email }}
        
        {{ form.password1 }}

        {{ form.password2 }}
        

         
        <input  type="submit" align="center" value="Create User">
      
              
        </div>         
      </div>
    </form>
  </body>
  
  </html>


</body>
</html>

推荐答案

password1 和 password2 是自定义"的， UserCreationForm 上的字段，因为它们在 User 模型上不作为模型字段存在. Meta.widgets 不适用于这些自定义字段，您需要在表单中重新定义这些字段及其小部件

password1 and password2 are "custom" fields on the UserCreationForm since they do not exist as model fields on the User model. Meta.widgets will not work for these custom fields, you will need to redefine these fields and their widgets in your form

class CreateUserForm(UserCreationForm):

    password1 = forms.CharField(
        label="Password",
        widget=forms.PasswordInput(attrs={'class':'pass', 'type':'password', 'align':'center', 'placeholder':'password'}),
    )
    password2 = forms.CharField(
        label="Confirm password",
        widget=forms.PasswordInput(attrs={'class':'pass', 'type':'password', 'align':'center', 'placeholder':'password'}),
    )

    class Meta:
        model = User
        fields = ['username', 'email']
        widgets={
            'username': forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'UserName'}),
            'email':forms.TextInput(attrs={'class':'un', 'type':'text', 'align':'center', 'placeholder':'Email'}),
        }

这篇关于CSS在django密码表单字段上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！