如何在同一页面创建的两列表单?

85 阅读1分钟

用户希望在同一页面中创建两个垂直排列的两列表单。但是,他们目前只有两个表单的代码,并且不知道该如何将它们放在同一页面中。他们希望能够在 form.py 中编写这两个表单,并在 login.html 模板中对其进行修改,以实现两列表单的显示。

huake_00257_.jpg 2. 解决方案:

为了实现上述目标,需要采取以下步骤:

  1. form.py 中创建两个单独的表单类,分别为 LoginFederatedLogin

  2. login.html 模板中,使用 {% extends "horizon/common/_modal_form.html" %} 继承通用模态表单模板。

  3. login.html 模板中,添加两个表单的代码。可以使用 {% include "horizon/common/_form_fields.html" %} 来包含通用表单字段模板。

  4. login.html 模板中,添加两个表单的提交按钮。

  5. urls.py 文件中,添加相应的路由,以便在浏览器中访问时能够正确加载表单页面。

以下是一个示例代码,演示了如何实现两列表单:

# form.py
class Login(AuthenticationForm):
    region = forms.ChoiceField(label=_("Region"), required=False)

    username = forms.CharField(label=_("User Name"))
    password = forms.CharField(label=_("Password"),
                             widget=forms.PasswordInput(render_value=False))
    t = [('http://google.com', 'Google'), ('http://kent.com', 'University of Kent')]
    FederatedLogin = forms.ChoiceField(label=_("Select one of the third party "),
                                        choices=t)
    tenant = forms.CharField(required=False, widget=forms.HiddenInput())

class FederatedLogin(AuthenticationForm):
    federated_username = forms.CharField(label=_("Federated User Name"))
    federated_password = forms.CharField(label=_("Federated Password"),
                                        widget=forms.PasswordInput(render_value=False))

# login.html
{% extends "horizon/common/_modal_form.html" %}
{% load i18n %}
{% load url from future %}

{% block modal-header %}
{% trans "Log In" %}
{% endblock %}
{% block modal_class %}
login
{% if hide %}
modal hide
{% endif %}
{% endblock %}

{% block form_action %}{% url 'login' %}{% endblock %}
{% block autocomplete %}{{ HORIZON_CONFIG.password_autocomplete }}{% endblock %}

{% block modal-body %}
<fieldset>
    {% if request.user.is_authenticated and 'next' in request.GET %}
    <div class="control-group clearfix error">
        <span class="help-inline"><p>{% trans "You don't have permissions to access:" %}</p>
            <p><b>{{ request.GET.next }}</b></p>
            <p>{% trans "Login as different user or go back to" %}
            <a href="{% url 'horizon:user_home' %}">{% trans "home page" %}</a></p>
        </span>
    </div>
    {% endif %}
    {% if next %}<input type="hidden" name="{{ redirect_field_name }}" value="{{ next }}" />{% endif %}
    {% include "horizon/common/_form_fields.html" with form=Login %}
    {% include "horizon/common/_form_fields.html" with form=FederatedLogin %}
</fieldset>
{% endblock %}

{% block modal-footer %}
<button type="submit" class="btn btn-primary pull-right">{% trans "Sign In" %}</button>
{% endblock %}

urls.py 文件中,添加以下路由:

urlpatterns = [
    url(r'^login/$', views.LoginView.as_view(), name='login'),
]

通过以上步骤,即可实现两列表单功能。