Djangoのフォームや材料設計Liteの

Question

私はGoogleのMDLフレームワークと私のフロントエンドを構築していると私が使用してMDLのスタイリングでDjangoのフォームをレンダリングするトラブルを抱えている：

<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> 

：

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

もこの方法を試してみました

私のDjangoのフォームクラス：私はMDLのコンポーネントからコードブロックを使用しようとしている

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"}), 
     } 

：

<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> 

Answer 1

これは私のプロジェクトで行った方法です。次のような 'foo'属性を持つ 'form'というモデルフォームがあると仮定します。 -

<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>