在 Django 中将 UserCreationForm 添加到 html

Question

I am creating a registration page for my website.我正在为我的网站创建一个注册页面。 I am following this tutorial.我正在关注本教程。 I have a bootstrap/html template with a form (Down Bellow), and I want to replace the html form with a UserCreationForm that I have already made in my forms.py file.我有一个带有表单（Down Bellow）的引导程序/html 模板，我想用我已经在 forms.py 文件中创建的UserCreationForm替换 html 表单。 The tutorial says to replace the html input fields with my user creation fields, but then bootstrap cannot style them.该教程说用我的用户创建字段替换 html 输入字段，但是引导程序无法设置它们的样式。 Can someone please help me so the default form fields have my python usercreationform ?有人可以帮我，所以默认表单字段有我的 python usercreationform吗？ My code is down bellow.我的代码在下面。

Register.html:寄存器.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static "registerstyles.css" %}">
<title>GoodDeed - Register</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 
</head>
<body>
<div class="signup-form">
    <form action="" method="post">
        {% csrf_token %} 
        <h2>Sign Up</h2>
        <p>Please fill in this form to create an account!</p>
        <hr>
        <div class="form-group">
            <div class="row">
                <div class="col">
                    <input type="text" class="form-control" name="first_name" placeholder="First Name" required="required" ></div>
                <div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
            </div>          
        </div>
        <div class="form-group">
            <input type="email" class="form-control" name="email" placeholder="Email" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="Password" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
        </div>        
        <div class="form-group">
            <label class="form-check-label"><input type="checkbox" required="required"> I accept the <a href="#">Terms of Use</a> &amp; <a href="#">Privacy Policy</a></label>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
        </div>
    </form>
    <div class="hint-text">Already have an account? <a href="#">Login here</a></div>
</div>
</body>
</html>

Forms.py: Forms.py：

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

Form parameters: (These are the fields from the UserCreationForm that I want to replace the HTML form fields with).表单参数：（这些是 UserCreationForm 中的字段，我想用这些字段替换 HTML 表单字段）。

<form method = "POST" action="">
    {% csrf_token %} 

    {{form.username.label}}
    {{form.username}}

    {{form.email.label}}
    {{form.email}}

    {{form.first_name.label}}
    {{form.first_name}}

    {{form.last_name.label}}
    {{form.last_name}}

    {{form.password1.label}}
    {{form.password1}}

    {{form.password2.label}}
    {{form.password2}}
    <input type="submit" name="Register">
</form>

CSS FILE: CSS 文件：

body {
    color: #fff;
    background: #3598dc;
    font-family: 'Roboto', sans-serif;
}
.form-control {
    height: 41px;
    background: #f2f2f2;
    box-shadow: none !important;
    border: none;
}
.form-control:focus {
    background: #e2e2e2;
}
.form-control, .btn {        
    border-radius: 3px;
}
.signup-form {
    width: 400px;
    margin: 30px auto;
}
.signup-form form {
    color: #999;
    border-radius: 3px;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    padding: 30px;
}
.signup-form h2  {
    color: #333;
    font-weight: bold;
    margin-top: 0;
}
.signup-form hr  {
    margin: 0 -30px 20px;
}    
.signup-form .form-group {
    margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
    margin-top: 3px;
}
.signup-form .row div:first-child {
    padding-right: 10px;
}
.signup-form .row div:last-child {
    padding-left: 10px;
}
.signup-form .btn {        
    font-size: 16px;
    font-weight: bold;
    background: #3598dc;
    border: none;
    min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus {
    background: #2389cd !important;
    outline: none;
}
.signup-form a {
    color: #fff;
    text-decoration: underline;
}
.signup-form a:hover {
    text-decoration: none;
}
.signup-form form a {
    color: #3598dc;
    text-decoration: none;
}   
.signup-form form a:hover {
    text-decoration: underline;
}
.signup-form .hint-text  {
    padding-bottom: 15px;
    text-align: center;
}

How I want it to look: (It looks like this before I add your code to my HTML)我希望它看起来如何：（在我将您的代码添加到我的 HTML 之前，它看起来像这样）

How it really looks (After I add your code)它的真实外观（添加您的代码后）

Views.py视图.py

from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.forms import inlineformset_factory
from django.contrib.auth.forms import UserCreationForm
from .forms import CreateUserForm
from .forms import RegisterForm

# Create your views here.

def index(request,*args, **kwargs):
  return render(request, "index.html", {} )

def register(request,):
  form = CreateUserForm()
  if request.method == "POST":
    form = CreateUserForm(request.POST)
    if form.is_valid():
      form.save()
  context = {'form': form}
  return render(request, "register.html",  context )

Answer 1

I would advise you to look toward the following approach, if you can and willing to modify your UserCreationForm a bit:如果您可以并且愿意稍微修改一下您的UserCreationForm ，我建议您考虑以下方法：

class UserCreationForm(forms.Form):
    # other fields as needed...
    username = forms.CharField(
                    max_legth=100,
                    widget=forms.TextInput(attrs={'class': 'FOO_CLASS'}))
# Added a class to our input fields

So, now you can hook onto the specified class .form-control .因此，现在您可以连接到指定的 class .form-control 。 In your CSS file and in HTML file in the question, this class supposedly introduces the styles.在您的 CSS 文件和问题中的 HTML 文件中，这个 class 据说引入了 ZBC4150D023D62551236DB671。

Then (after your forms.py is modified) the template should look like this:然后（修改您的forms.py之后）模板应如下所示：

<div class="signup-form">
    <form action="" method="post">
        {% csrf_token %} 
        <h2>Sign Up</h2>
        <p>Please fill in this form to create an account!</p>
        <hr>
        <form method = "POST" action="">
            {% csrf_token %} 
            <div class="form-group">    
            {{form.username.label}}
            {{form.username}}
            </div>
            <div class="form-group">
            {{form.email.label}}
            {{form.email}}
            </div>
            <div class="form-group">
            {{form.first_name.label}}
            {{form.first_name}}
            </div>
            <div class="form-group">
            {{form.last_name.label}}
            {{form.last_name}}
            </div>
            <div class="form-group">
            {{form.password1.label}}
            {{form.password1}}
            </div>
            <div class="form-group">
            {{form.password2.label}}
            {{form.password2}}
            </div>
            <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
            </div>
        </div>
    </form>
    <div class="hint-text">Already have an account? <a href="#">Login here</a></div>
</div>

There are some other ideas based on using the ~ CSS selector and targeting the labels or input s themselves.还有一些基于使用~ CSS 选择器并针对labels或input本身的想法。 But this one is based on the Django's framework facilities.但是这个是基于 Django 的框架设施的。

在 Django 中将 UserCreationForm 添加到 html

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-01 14:28:08

在 Django 中将 UserCreationForm 添加到 html

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-01 14:28:08

解决方案1
1 已采纳 2021-06-01 14:28:08