Python django在自定义布局和css中显示表单的一个字段

我有如下表格：

class IdentifyForm(BaseModelForm):
    sms_code = forms.CharField(label=u'sms verification code')
    class Meta:
        model = Member
        fields = ('realname', 'mobile', 'openid',)
        widgets = {
            'openid': HiddenInput(),
        }
    def clean(self):
        cleaned_data = super(IdentifyForm, self).clean()
        openid = cleaned_data.get('openid')
        mobile = cleaned_data.get('mobile')
        realname = cleaned_data.get('realname')
        sms_code = cleaned_data.get('sms_code')

        if openid and sms_code:
            if str(sms_code) != cache.get('smscode:'+openid):
                raise forms.ValidationError(u'sms verification code error')

        return cleaned_data

{% if form.realname.errors %}
    <div class="error-msg">
        {{ form.realname.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.realname }}
</div>

{% if form.mobile.errors %}
    <div class="error-msg">
        {{ form.mobile.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.mobile }}
</div>

{% if form.sms_code.errors %}
    <div class="error-msg">
        {{ form.sms_code.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.sms_code }}
    <a class="sms_btn">
        <span class="disable">&nbsp;resend after <i></i> second</span>
        &nbsp;
        <span class="normal">send sms code</span>
    </a>
</div>

我想使sms_code

input

具有其他字段的一半宽度，并在其右侧放置一个发送按钮。在页面中使用一些javascript代码来操作此按钮和sms_code字段

目前，我必须做如下工作：

class IdentifyForm(BaseModelForm):
    sms_code = forms.CharField(label=u'sms verification code')
    class Meta:
        model = Member
        fields = ('realname', 'mobile', 'openid',)
        widgets = {
            'openid': HiddenInput(),
        }
    def clean(self):
        cleaned_data = super(IdentifyForm, self).clean()
        openid = cleaned_data.get('openid')
        mobile = cleaned_data.get('mobile')
        realname = cleaned_data.get('realname')
        sms_code = cleaned_data.get('sms_code')

        if openid and sms_code:
            if str(sms_code) != cache.get('smscode:'+openid):
                raise forms.ValidationError(u'sms verification code error')

        return cleaned_data

{% if form.realname.errors %}
    <div class="error-msg">
        {{ form.realname.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.realname }}
</div>

{% if form.mobile.errors %}
    <div class="error-msg">
        {{ form.mobile.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.mobile }}
</div>

{% if form.sms_code.errors %}
    <div class="error-msg">
        {{ form.sms_code.errors|striptags }}
    </div>
{% endif %}
<div class="form-line">
    {{ form.sms_code }}
    <a class="sms_btn">
        <span class="disable">&nbsp;resend after <i></i> second</span>
        &nbsp;
        <span class="normal">send sms code</span>
    </a>
</div>

{%if form.realname.errors%}
{{form.realname.errors | striptags}}
{%endif%}
{{form.realname}
{%if form.mobile.errors%}
{{form.mobile.errors | striptags}}
{%endif%}
{{form.mobile}}
{%if form.sms_code.errors%}
{{form.sms_code.errors | striptags}}
{%endif%}
{{form.sms_code}
秒后重新发送
发送短信代码

但我想以更常见的方式呈现这种形式，例如：

{% for field in form.visible_fields %}

    <div class="form-line">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>&nbsp;
        {% if field.errors %}
            <span class="error-msg">
                {{ field.errors|striptags }}
            </span>
        {% endif %}
        {{ field }}
    </div>
{% endfor %}

{%for form.visible\u fields%}
{{field.label}
{%if field.errors%}
{{field.errors | striptags}}
{%endif%}
{{field}}
{%endfor%}

---

因为不能保证将来

IdentifyForm

不需要更多字段。最好将前端和后端分开。前端不需要知道应该显示哪个字段。但我不知道如何实现这一点。

这可能是一个很好的机会。它允许您直接在

表单

类中定义帮助程序和布局，并附带一些用于引导之类的默认模板插件。参见文档中的示例：

class ExampleForm(forms.Form):
    [...]
    def __init__(self, *args, **kwargs):
        super(ExampleForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Fieldset(
                'first arg is the legend of the fieldset',
                'like_website',
                'favorite_number',
                'favorite_color',
                'favorite_food',
                'notes'
            ),
            ButtonHolder(
                Submit('submit', 'Submit', css_class='button white')
            )
        )

然后是您的模板：

{% crispy myform %}

---

在形式定义中：

class IdentifyForm(BaseModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['sms_code'].widget.attrs.update({'class' : 'prepend_to_widget'})

<script>
    $(".prepend_to_widget").prepend('<a class="sms_btn">
        <span class="disable">&nbsp;resend after <i></i> second</span>
        &nbsp;
        <span class="normal">send sms code</span>
    </a>');
</script>

在模板或全局js文件中：

class IdentifyForm(BaseModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['sms_code'].widget.attrs.update({'class' : 'prepend_to_widget'})

<script>
    $(".prepend_to_widget").prepend('<a class="sms_btn">
        <span class="disable">&nbsp;resend after <i></i> second</span>
        &nbsp;
        <span class="normal">send sms code</span>
    </a>');
</script>

$（“.prepend_to_widget”）.prepend（'
秒后重新发送
发送短信代码
');

注意：您需要jquery来实现这一点。如果您不使用jquery，您可以使用纯javascript或其他javascript库来实现这一点