如何将Django RegisterForm表单字段正确绑定到现有HTML注册模板

1. 修复forms.py代码 #

原有代码中密码字段定义错误，PasswordInput是表单控件而非字段类型，修正后代码如下：

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class RegisterForm(UserCreationForm):
    name = forms.CharField(max_length=255)
    email = forms.EmailField(max_length=255)
    # 修正密码字段定义，指定控件类型为PasswordInput
    password1 = forms.CharField(widget=forms.PasswordInput)
    password2 = forms.CharField(widget=forms.PasswordInput)

    class Meta:
        model = User
        fields = ('name', 'email', 'password1', 'password2')

2. 修复views.py代码 #

原有代码中form_class指向了默认的UserCreationForm，没有使用你自定义的注册表单类，修正后代码如下：

from django.views.generic.edit import FormView
from .forms import RegisterForm # 确保导入自定义的RegisterForm
from .models import Category

class RegisterFormView(FormView):
    form_class = RegisterForm # 替换为自定义表单类
    success_url = '/login/'
    template_name = 'blog/signup.html'

    def form_valid(self, form):
        form.save()
        return super().form_valid(form)

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['categories'] = Category.objects.all()
        return context

3. 修正HTML模板代码 #

有两种适配方案可选择：

方案一：保留现有HTML结构，仅绑定表单属性 #

不需要改动现有样式结构，只需修正input的name属性与表单字段对应，同时增加表单错误提示即可：

<section class="signup">
    <div class="container">
        <div class="signup-content">
            <div class="signup-form">
                <h2 class="form-title">Sign up</h2>
                <form method="POST" class="register-form" id="register-form" action="">
                    {% csrf_token %}
                    <!-- 表单错误提示 -->
                    {% if form.errors %}
                    <div class="form-error">
                        {% for field, errors in form.errors.items %}
                            {% for error in errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        {% endfor %}
                    </div>
                    {% endif %}
                    <div class="form-group">
                        <label for="name"><i class="zmdi zmdi-account material-icons-name"></i></label>
                        <input type="text" name="name" id="name" placeholder="Your Name" value="{{ form.name.value|default:'' }}"/>
                    </div>
                    <div class="form-group">
                        <label for="email"><i class="zmdi zmdi-email"></i></label>
                        <input type="email" name="email" id="email" placeholder="Your Email" value="{{ form.email.value|default:'' }}"/>
                    </div>
                    <div class="form-group">
                        <label for="pass"><i class="zmdi zmdi-lock"></i></label>
                        <input type="password" name="password1" id="pass" placeholder="Password"/>
                    </div>
                    <div class="form-group">
                        <label for="re-pass"><i class="zmdi zmdi-lock-outline"></i></label>
                        <input type="password" name="password2" id="re_pass" placeholder="Repeat your password"/>
                    </div>
                   
                    <div class="form-group form-button">
                        <input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
                    </div>
                </form>

方案二：直接使用Django表单渲染字段 #

如果不需要完全自定义input的属性，可以直接替换原有input标签为Django表单变量：

<div class="form-group">
    <label for="name"><i class="zmdi zmdi-account material-icons-name"></i></label>
    {{ form.name }}
</div>

如果需要给渲染出的input添加自定义class、placeholder等属性，可以在forms.py的字段定义中指定widget的attrs参数，示例如下：

name = forms.CharField(max_length=255, widget=forms.TextInput(attrs={'placeholder': 'Your Name', 'id': 'name'}))

内容的提问来源于stack exchange，提问作者boldRichard