Question

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

我想最终得到类似于此引导程序模板一角的登录字段（尽管没有密码字段）： 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 %}

上面的bootstrap站点的代码看起来像这样（为了清楚起见，我删除了密码部分）：我不知道如何将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>

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

Answer 1

作为参考，如果您使用的是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'

Answer 2

尝试使用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>

希望这会给你正确的方向。您可以尝试应用程序提供的各种参数来配置您的布局。

Answer 3

将类直接添加到Form Field作为Attribute，对我来说似乎是最干净的方式。

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

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

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

Answer 4

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'

不会覆盖给定的类属性

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

4 个答案: