如何将 html 表单转换为 Django 表单并保留样式？

Question

我有一个纯 html 表单，我希望使用 Django 后端收集登录信息。

这是我的纯非 Django html 表单：

<form id="contactForm" method="POST">
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label>Username or E-mail Address</label>
                <input type="text" value="" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <a class="pull-right" href="#">(Lost Password?)</a>
                <label>Password</label>
                <input type="password" value="" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <span class="remember-box checkbox">
                <label for="rememberme">
                    <input type="checkbox" id="rememberme" name="rememberme">Remember Me
                </label>
            </span>
        </div>
        <div class="col-md-6">
            <a href="#" class="btn btn-primary btn-orange uppercase pull-right">Login</a>
        </div>
    </div>
</form>

这是所有样式的样子：

为了处理这个表单，我创建了一个视图：

def login_page(request):
    form = LoginForm(request.POST or None)
    context = {'form': form}

    next_ = request.GET.get('next')
    next_post = request.POST.get('next')
    redirect_path = next_ or next_post or None

    if form.is_valid():
        username = form.cleaned_data.get('username')
        password = form.cleaned_data.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            try:
                del request.session['guest_email_id']
            except:
                pass
            if is_safe_url(redirect_path, request.get_host()):
                return redirect(redirect_path)
            return redirect('/')
        else:
            print('Error')

    return render(request, 'users/login.html', context)

我知道我需要一个我创建的 form.py 类，如下所示：

class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput())

如何使用这个表单类来呈现与保留样式的 html 相同的表单。此外，一旦呈现，我如何使用伪装成下面按钮的链接将表单数据提交给视图进行处理？

<a href="#" class="btn btn-primary btn-orange uppercase pull-right">Login</a>

Answer 1

根据我使用 Django 的经验，不可能在继承自 forms.ModelForm 或 forms.Form 的表单中按原样创建 HTML 表单。我们能做的最好的事情是，将类分配给以attrs 形式分配给特定表单字段的小部件，如下所示：

class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'form-control'}))

当您在模板中使用 {{ form.as_p }} 或类似的其他人时，这会将您的 CSS 类附加到呈现的表单。

然后，为了呈现divs，您自己解压表单，而不是让 Django 完成这项工作，如下所示：

<form id="contactForm" method="POST">
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                {{ form.username.errors }}
                <label for="{{form.username.id_for_label}}">Username or E-mail Address</label>
                {{ form.username }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                {{form.password.errors}}
                <a class="pull-right" href="#">(Lost Password?)</a>
                <label for="{{form.password.id_for_label}}">Password</label>
                {{form.password}}
            </div>
        </div>
    </div>
.........

等等。

但是，将您的设计和逻辑结合起来通常被认为是一种不好的做法，我们在这里显然正在这样做。

参考：Django Documentation - Working With Forms