如何在 Django 中将 UserCreationForm 添加到 HTML/Bootstrap 模板
[英]How to add UserCreationForm to HTML/Bootstrap template in Django
问题描述
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> & <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>
2 个解决方案
解决方案1
0 2021-06-19 10:38:05
class myUserCreationForm(UserCreationForm):
password1 = forms.CharField(
label='Password',
widget=forms.PasswordInput(attrs={'class': 'form-control'})
)
password2 = forms.CharField(
label='Password',
widget=forms.PasswordInput(attrs={'class': 'form-control'})
)
class Meta:
model = User
fields = ('username', 'password1', 'password2')
widgets = {
'username': TextInput(attrs={'class': 'form-control'}),
'first_name': TextInput(attrs={'class': 'form-control'}),
# add rest like this
}
解决方案2
0 已采纳 2021-06-24 17:15:40
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 inputs themselves.还有一些基于使用 ~ CSS 选择器并定位标签或输入本身的想法。 But this one is based on the Django's framework facilities.但是这个是基于 Django 的框架设施的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.