如何并排放置 django 表单字段

Question

我有一个 UserCreationForm 我希望 first_name 和 last_name 并排，当我尝试整个字段并排时，我希望其他字段有自己的行。 form.html：

{% csrf_token %}
{% for field in form %}
<p>
    {% if field.help_text %}
    <small style="color: grey">{{ field.help_text }}</small>
    {% endif %}
    {{ field.label_tag }}
    {{ field }}
    {% for error in field.errors %}
    <p style="color: red">{{ error }}</p>
    {% endfor %}
</p>
{% endfor %} 

forms.py：

class AccountCreationForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ('first_name','last_name', 'email')

Answer 1

由于您使用<p> 标记围绕每个字段，因此它们都进入单独的行。您可以单独渲染字段以根据需要设置它们的样式。另请查看 this article 以获取一些示例。

我为您的具体情况写了一个快速的 sn-p。请注意，我单独呈现字段并将两个名称字段都放在同一个<p>（段落）标记中。

    <p>
        {% if form.first_name.help_text %}
        <small style="color: grey">{{ form.first_name.help_text }}</small>
        {% endif %}
        {{ form.first_name.label_tag }}
        {{ form.first_name }}
        {% for error in form.first_name.errors %}
        <span style="color: red">{{ error }}</span>
        {% endfor %}
        {% if form.last_name.help_text %}
        <small style="color: grey">{{ form.last_name.help_text }}</small>
        {% endif %}
        {{ form.last_name.label_tag }}
        {{ form.last_name }}
        {% for error in form.last_name.errors %}
        <span style="color: red">{{ error }}</span>
        {% endfor %}
    </p>
    <p>
        {% if form.email.help_text %}
            <small style="color: grey">{{ form.email.help_text }}</small>
            {% endif %}
            {{ form.email.label_tag }}
            {{ form.email }}
            {% for error in form.email.errors %}
            <span style="color: red">{{ error }}</span>
            {% endfor %}
    </p>