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

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

1 个答案: