Skip to main content
 首页 » 编程设计

python之Django 表单和 Material Design Lite

2025年02月15日26xiaohuochai

我正在使用 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>