我正在使用 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>
请您参考如下方法:
这就是我在我的项目中所做的。假设您有一个名为“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>
