如何将表单控件添加到 Django 表单？

Posted 2023-02-24

【中文标题】如何将表单控件添加到 Django 表单？

【英文标题】：How to add form control to a Django Form?

【发布时间】：2014-01-27 08:57:42

【问题描述】：

我正在尝试将表单控件添加到我为 Django 制作的表单应用程序中。我已经创建了应用程序并想将表单添加到引导模板中，但是我不知道如何为我的电子邮件字段添加引导程序更时尚的文本框。

我希望得到类似于此引导模板角落中的登录字段的内容（尽管没有密码字段）： http://getbootstrap.com/examples/jumbotron/

我的 signup.html 文件中的代码如下所示：

% extends 'base.html' %

% block content %
    <div class="col-sm-12">
            <form method='POST' action=''> % csrf_token %
                 form.as_p                        
                <input type='submit' class='btn btn-success btn-lg'>
            </form>
    </div>
% endblock %

上面引导站点的代码如下所示（为了清楚起见，我去掉了密码部分）：我不知道如何将 django 应用程序集成到此代码中，以便该站点将注册信息发布到我的数据库中。

<form class="navbar-form navbar-right" role="form">
  <div class="form-group">
    <input type="text" placeholder="Email" class="form-control">
  </div>
  <button type="submit" class="btn btn-success">Sign in</button>
</form>

如何整合两者？提前致谢。

【问题讨论】：

***.com/a/3387483/1004312

可以像这样添加表单字段： form.email|add_class:"form-control"|attr:"placeholder:Email"|attr:"type:text" 代替 form.as_p

这能回答你的问题吗？ Add class to form field Django ModelForm

【参考方案1】：

def __init__(self, *args, **kwargs):
    super(YourModelForm, self).__init__(*args, **kwargs)
    for field_name, field in self.fields.items():
        if field.widget.attrs.get('class'):
            field.widget.attrs['class'] += ' form-control'
        else:
            field.widget.attrs['class']='form-control'

不会覆盖给定的类属性

【参考方案2】：

将类作为属性直接添加到表单字段中，对我来说似乎是最干燥的方式。

name = forms.CharField(widget=forms.TextInput(attrs="class":"form-control"))

message = forms.CharField(widget=forms.Textarea(attrs="class":"form-control"))

这样您就无需在其他任何地方编辑任何内容。您可以通过这种方式向特定字段添加任意数量的类。

【参考方案3】：

作为参考，例如，如果您使用 ModelForm，您可以像这样覆盖表单的 init 方法：

def __init__(self, *args, **kwargs):
        super(MemberForm, self).__init__(*args, **kwargs)
        for field_name, field in self.fields.items():
            field.widget.attrs['class'] = 'form-control'

【讨论】：

小心，因为这会覆盖任何给定的类属性！

【参考方案4】：

尝试使用django-bootstrap3 应用程序。

% load bootstrap3 %

<form method="post" action="" >
    % csrf_token %
      % bootstrap_form form layout="inline" %
    % buttons%
    <button type="submit" class="btn btn-sucess"> Signin </button>
    % endbuttons %
  </form>

希望这能给你正确的方向。您可以尝试应用提供的各种参数以适应您的布局。