在 Django 中向 html 添加 UserCreationForm

Question

我正在为我的网站创建一个注册页面。我有一个带有表单的 bootstrap/html 模板（下方），我想用我已经在 forms.py 文件中制作的

UserCreationForm

替换 html 表单。本教程说用我的用户创建字段替换 html 输入字段，但是 bootstrap 无法设置它们的样式。 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>

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

所以，现在您可以挂接到指定的类

.form-control

。在您的 CSS 文件和问题中的 HTML 文件中，此类应该引入了样式。

然后（修改

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 的框架设施。

Answer 2

我知道这已经很旧了，但也许其他人会从答案中受益。 您只需使用 bootstrap 放置一个完整的 html 页面，您唯一应该设置的就是 html 元素中的 name 属性，例如这是用于获取用户名

<!-- Username input -->
<div class="form-outline mb-4">
    <input type="text" id="form1Example13" class="form-control   form-control-lg" name="username"/>
   
<label class="form-label" for="form1Example13">Username</label>
</div>

经过长时间的搜索，我现在正在使用它，我认为它有效。 如果有人遇到任何问题或有我不知道的错误，请告诉我