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

fcg9iug3 于 2023-06-07 发布在 Go

关注(0)|答案(2)|浏览(167)

我有一个纯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我已经创建的www.example.com类，如下所示：

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>

django

来源：https://stackoverflow.com/questions/51733926/how-to-convert-html-form-to-django-form-and-preserve-styling

2条答案

按热度按时间

tuwxkamq1#

根据我使用Django的经验，不可能在继承自forms.ModelForm或forms.Form的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文档-使用表单

赞(0）回复(0）举报 2023-06-07

kknvjkwl2#

如果你使用的是POST方法，你需要在渲染时使用{% csrf_token %} else，这势必会抛出错误。

赞(0）回复(0）举报 2023-06-07