Django表单和Material Design Lite

Question

我正在使用Google的MDL框架构建我的前端，并在使用MDL样式渲染Django表单时遇到了麻烦。

{{ form.as_table }}
{{ form.as_p}}
{{ form.as_ul}}

我也尝试了这种方法：

    <form>
        <div class="mdl-textfield mdl-js-textfield">
            {% for field in form %}
            <label class="mdl-textfield__label" for="{{ field.name }}">{{ field.label_tag }}</label>
            {{ field }}
            {% endfor %}
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

我的Django表单类：

class MyClassUpdateForm(forms.ModelForm):
    class Meta:
        model = MyClass
        fields = '__all__'
        widgets = {
            'foo': TextInput(attrs={'class': "mdl-textfield__input"}),
            'bar': TextInput(attrs={'class': "mdl-textfield__input"}),
            'baz': TextInput(attrs={'class': "mdl-textfield__input"}),
        }

我正在尝试使用MDL组件中的这段代码：

<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

- Ray Tango

---

尝试使用 {{form}} ？ - Bobby

Bobby，这也不起作用...我需要手动渲染它们，并以某种方式对每个字段应用样式.. - Ray Tango

尝试覆盖MyClassUpdateForm的__init__方法，并在其中指定属性，如下所示：self.fields['foo'].widget.attrs['class'] = 'textfield__input'。 - neverwalkaloner

Answer 1

这是我在项目中的做法。假设您有一个名为“form”的模型表单，其中包含一个“foo”属性，则可以按照以下方式进行操作：-

<form method="POST">
    <input class="mdl-textfield__input" type="text" id="id_{{ form.foo.name }}" name="{{ form.foo.name }}" value="{% if form.foo.value != None %}{{ form.foo.value }}{% endif %}" required>
    <label class="mdl-textfield__label" for="id_{{ form.foo.name }}">Text...</label>
</form>

- Rishabh Nehra