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

Posted 2023-02-24

【中文标题】如何将 html 表单转换为 Django 表单并保留样式？

【英文标题】：How to convert html form to Django form and preserve styling?

【发布时间】：2019-01-14 23:10:30

【问题描述】：

我有一个纯 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>

【问题讨论】：

CSS styling in Django forms的可能重复

【参考方案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

【讨论】：

感谢您的回答！就一个问题，label标签的for属性中使用的label如何设置id？

根据我的经验，我认为你不能。我仔细检查了文档以确保它没有被提及。如果这是优先事项，那么在视图中，我将访问 request.POST 字典并自行实例化一个新的 LoginForm，然后将其用于验证。

但是，除非绝对关键，否则我认为这没有必要 - 如果您在 JS 中需要它，那么不要将 JS 代码分成文件，而是在您的 base.html 中写一个 % block js %...% endblock % 和 while写这个块的内容，像往常一样使用 form.field.id_for_label 。