Django 使用 css 为 UserCreationForm 设置样式答案

【问题标题】：Django Styling a UserCreationForm with cssDjango 使用 css 为 UserCreationForm 设置样式
【发布时间】：2021-02-15 01:33:16
【问题描述】：

我试图为 UserCreationForm 添加一些样式，我无法为该项目使用 Bootstrap，因此需要直接修改其 html 和 css。我无法在其文档中找到任何允许我这样做的内容。

我通过将这段代码的 sn-p 添加到 models.py 中，在我的 UserCreationForm 字段中添加了一个电子邮件字段

class CreateUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

然后我将表单作为上下文传递给 views.py 中的模板

def register(request):
    if request.method == 'GET':
        if request.user.is_authenticated:
            return redirect('news')
        else:
            form = CreateUserForm()
            context = {'form': form}
            return render(request, 'base1.html', context)

    if request.method =='POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            user = form.cleaned_data.get('username')
            messages.success(request, 'Account was created for ' + user)
            return redirect('login')

    return render(request, 'registration.html', context)

这就是我设法在我的 HTML5 模板中显示它的方式

       <form action="" method="post">
            {% csrf_token %}
            <h1 class="t34"> Register </h1>
            <div class="t34">{{form.username.label}}</div>
            {{form.username}}

            {{form.email.label}}{{form.email}}
            {{form.password1.label}}{{form.password1}}
            {{form.password2.label}}{{form.password2}}
            <input type="submit" name="Create User">
        </form>

更多的是，我查看了几个教程，但没有找到我正在寻找的内容以及 Stackoverflow，这些答案似乎有帮助，但由于它们已有多年历史，链接不再有效，我无法查看在文档中。

Django - Styling a UserCreationForm with css 5 年前

How do I style my user registration form using Bootstrap in DJango? 5 年前，请不要引导。

那么如何修改 UserCreationForm 中字段的样式并添加我自己的 css 和/或 html？

我在哪里可以找到这方面的文档？（我已经多次查看文档站点，但它很大，我似乎找不到任何关于此的内容。）

【问题讨论】：

标签： python-3.x django django-models django-forms

【解决方案1】：

您可以使用layouts at Django crispy form。

class SendFeedbackForm(forms.Form):
title = forms.CharField(label="Title",widget=forms.TextInput(attrs={'class': 'custom-feedback-class', 'onkeyup':'feedback_form_control()'}))
message = forms.CharField(label="Your Message", widget=forms.Textarea(attrs={'class': 'custom-feedback-class', 'onkeyup':'feedback_form_control()'}) ) 

def __init__(self, *args, **kwargs):
    super(SendFeedbackForm, self).__init__(*args, **kwargs)

    self.helper = FormHelper()
    self.helper.form_method = 'POST'
    self.helper.layout = Layout(
    'title',
    'message',
    Submit('submit','Send', css_id="id_feedback_submit", css_class='feedback-disabled-button '),
    )

我可以举一个我使用的例子。创建此表单时，我的主要目标是获得 2 个输入字段。当这些字段为空时，不要激活“发送”按钮。当这两个字段都填满时，让“发送”按钮起作用。所以我需要同时添加css和js规则。

index.html

<head>
<style>
    .custom-feedback-class {
        border-radius: 25px !important;
    }

</style>
</head>
<body>

 <div>
    <form method = "post">
       {% csrf_token %}
       {% crispy form_sendfeedback %}
    </form>
 </div>
  .
  .
  .
<script>
   function feedback_form_control(){
    .
    .
    .
    }

 <script>

 </body>

【讨论】：