在 Django 中将 UserCreationForm 添加到 html

Question

我正在为我的网站创建一个注册页面。 我正在关注本教程。 我有一个带有表单（Down Bellow）的引导程序/html 模板，我想用我已经在 forms.py 文件中创建的UserCreationForm替换 html 表单。 该教程说用我的用户创建字段替换 html 输入字段，但是引导程序无法设置它们的样式。 有人可以帮我，所以默认表单字段有我的 python usercreationform吗？ 我的代码在下面。

寄存器.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：

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

表单参数：（这些是 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 文件：

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;
}

我希望它看起来如何：（在我将您的代码添加到我的 HTML 之前，它看起来像这样）

它的真实外观（添加您的代码后）

视图.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

如果您可以并且愿意稍微修改一下您的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

因此，现在您可以连接到指定的 class .form-control 。 在您的 CSS 文件和问题中的 HTML 文件中，这个 class 据说引入了 ZBC4150D023D62551236DB671。

然后（修改您的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>

还有一些基于使用~ CSS 选择器并针对labels或input本身的想法。 但是这个是基于 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