如何并排放置 django 表单字段

Posted 2023-02-24

【中文标题】如何并排放置 django 表单字段

【英文标题】：How to place django form fields side by side

【发布时间】：2021-04-22 13:37:15

【问题描述】：

我有一个 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')

【问题讨论】：

这能回答你的问题吗？ Display Django form fields on the "same line"

我在facebook注册页面上需要它，你能添加代码吗？

@GaëtanGR 我只需要两个字段并排而不是全部。

【参考方案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>

【讨论】：

UserCreationForm 中还有另外两个密码字段，我该如何添加它们？

它不会并排堆叠它们

该代码中还有一些 p 标签，现在试试。