并排显示两个表单 Django-Crispy

Question

我正在尝试创建一个模式，您可以在其中的右侧有一个登录表单，在左侧有一个注册表单。到目前为止，我已经在模态中显示了注册表单，但我正在努力寻找一种方法让登录表单显示在它旁边（相反，我得到了两个注册表单并排显示.) Crispy 表格甚至允许这样的事情吗？（同一模态中的两种表格）

这是我的代码：

forms.py

from django import forms
from apps.accounts.models import CustomUser
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, ButtonHolder, Submit, Field, Div


class AuthenticationForm(forms.Form):
    username = forms.CharField(widget=forms.TextInput, label='username')
    password = forms.CharField(widget=forms.PasswordInput, label='password')

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_method = 'POST'
        self.helper.add_input(Submit('register', 'Register', css_class='btn btn-primary'))
        self.helper.form_id = 'Crispy_LoginForm'
        super(AuthenticationForm, self).__init__(*args, **kwargs)

    class Meta:
        fields = ['username', 'password'] 


class RegistrationForm(forms.ModelForm):
    first_name = forms.CharField(widget=forms.TextInput, label='First Name')
    last_name = forms.CharField(widget=forms.TextInput, label='Last Name')
    email = forms.EmailField(widget=forms.TextInput, label='email')
    username = forms.CharField(widget=forms.TextInput, label='username')
    password1 = forms.CharField(widget=forms.PasswordInput, label='Enter your password')
    password2 = forms.CharField(widget=forms.PasswordInput, label='Re-type your password')

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_method = 'POST'
        self.helper.add_input(Submit('register', 'Register', css_class='btn btn-primary'))
        self.helper.form_id = 'Crispy_RegistrationForm'
        super(RegistrationForm, self).__init__(*args, **kwargs)

    class Meta:
        model = CustomUser
        fields = ['first_name', 'last_name', 'email', 'username', 'password1', 'password2']

views.py

def login(request):
    """
    User Log in View
    """
    if request.method == 'POST':
        form = AuthenticationForm(data=request.POST)
        if form.is_valid():
            user = authenticate(username=request.POST['username'], password=request.POST['password'])
            if user is not None:
                if user.is_active:
                    django_login(request, user)
                    return redirect('all_posts.html')
    else:
        form = AuthenticationForm()
    return render_to_response('register.html', {
        'form': form,
    }, context_instance=RequestContext(request))


def logout(request):
    """
    Log out view
    """
    django_logout(request)
    return redirect('/')


def register(request):
    form = RegistrationForm(request.POST or None)
    if request.method == 'POST':
        if form.is_valid():
            CustomUser = form.save()
            CustomUser.save()
            return redirect('all_posts.html')
    else:
        return render(request, 'register.html', {'form': form})

def all_posts(request):
   post_list = TextPost.objects.all().order_by('-popularity')
   paginator = Paginator(post_list, 100) # Show 100 contacts per page
   form = RegistrationForm(request.POST or None)

   page = request.GET.get('page')

   try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        posts = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        posts = paginator.page(paginator.num_pages)

    return render(request, 'all_posts.html', {'form': form})

register.html

{% load staticfiles %}
{% load crispy_forms_tags %}


{% block body %}

<HEAD>
<style>

.modal-dialog {
    width: 808px;
}
.left-div {
    float: left;
    width: 392px;
    padding-left: 8px;
}
.right-div {
    width: 400px;
    padding-left: 8px;
    margin-left: 400px;
    border-left-style: inset;
}
</style>
</HEAD>

<div class="modal" id="modal-1">
            <div class="modal-dialog" id="box1">
                <div class="modal-content">
                    <div class="left-div">
                    <form enctype="multipart/form-data" method="post" action="{{ register }}" id='Crispy_RegistrationForm'>
                        <div class="modal-header">
                            <h3 class="modal-title">Sign Up</h3>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            {{ form|crispy }}
                        </div>
                        <div class="modal-footer">
                            <input type='submit' class="btn btn-primary" value="Sign up" />
                        </div>
                    </form>
                    </div>
                    <div class="right-div">
                    <form enctype="multipart/form-data" method="post" action="{{ login }}" id='Crispy_LoginForm'>
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h3 class="modal-title">Log In</h3>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            {{ form|crispy }}
                        </div>
                        <div class="modal-footer">
                            <input type='submit' class="btn btn-default" value="Log in" />
                        </div>
                    </form>
                    </div>
                </div>
            </div>
</div>

{% endblock %}

Answer 1

您在上下文中只声明了一种形式，并在 html 中使用了相同的形式两次。

查看此 link 以了解有关多种形式的更多信息 Proper way to handle multiple forms on one page in Django

并排显示两个表单 Django-Crispy

Displaying two forms side-by-side Django-Crispy

forms

django

django-crispy-forms