Djangoフィールドの繰り返し処理中にhtml入力タグを使用する

Question

1. Djangoのフィールドリストを繰り返し処理して、主要フォームの一般化されたテンプレートを作成します。
2. 私が直面している問題は、入力フィールドを使用しているときにフォームが有効と見なされないということです。
3. 私はmaterialize cssを使用しているので、入力フィールドに固執したいと思います。

以下は私のいくつかの助けに感謝本当に思い ​​

views.pyで

<div class="row "> 
    {% for field in form %} 
     <div class="form-group"> 
      {% ifequal field.name "password" %} 
     <div class="row"> 
      <div class="input-field col s3 xl12"> 
       <input id="{{ field.name }}" type="password" class="{{ 
       field.name }}"> 
        <label for="{{ field.name }}">{{ field.label }}</label> 
      </div> 
     </div> 
    {% endifequal %} 
    {% ifnotequal field.name "password" %} 
     {% ifequal field.name "email" %} 
      <div class="row"> 
       <div class="input-field col s3 xl12"> 
        <input id="{{ field.name }}" type="{{ field.name }}" class="validate">{{ form.field }} 
        <label for="{{ field.name }}" data-error="Not a valid email" 
          data-success="Valid Email">{{ field.label }}</label> 
       </div> 
      </div> 
     {% endifequal %} 
     <br> 
     {% ifnotequal field.name "email" %} 
      {% ifequal field.name "album_logo" %} 
       <div class="file-field input-field col s3 xl12"> 
       <div class="btn"> 
        <span>File</span> 
        <input type="file" multiple> 
       </div> 
       <div class="file-path-wrapper"> 
        <input class="file-path validate" type="text" placeholder="Upload an album cover"> 
       </div> 
      {% endifequal %} 
      {% ifnotequal field.name "album_logo" %} 
       {% ifequal field.name "date_joined" %} 
        <div class="row"> 
         <div class="input-field col s3 xl12"> 
          <input id="{{ field.name }}" type="date" class="datepicker">{{ form.field }} 
          <label for="{{ field.name }}">{{ field.label }}</label> 
         </div> 
        </div> 
       {% endifequal %} 
       {% ifnotequal field.name "date_joined" %} 
        <div class="row"> 
         <div class="input-field col s3 xl12"> 
          <input id="{{ field.name }}" type="text"> 
          <label for="{{ field.name }}">{{ field.label }} 
          </label> 
         </div> 
        </div> 
       {% endifnotequal %} 
      {% endifnotequal %} 
     {% endifnotequal %} 
    {% endifnotequal %} 
    </div> 
    {% endfor %} 
</div> 

とUserFormViewクラスform_template.html、感謝です。

Answer 1

フォームのスタイルを設定する場合は、 Widget Tweaksを使用することをお勧めします。あなたはそれを正しくインストールすると、あなたのようなあなたのテンプレートでそれを使用することができます。

のCss：

.inputStyle{ 
    width: 500px; 
    border: 1px solid black; 
    border-radius: 5px; 
} 
.slide{ 
... 
} 

HTML：

<form method='POST' action="/" enctype='multipart/form-data'> 
    {% load widget_tweaks %} 
    {% csrf_token %} 
    <span class="">Post the Image via Url: {{form.image_url|add_class:"inputStyle" }}</span> 
    <span class="" >Please select an option {{ form.Options|add_class:"slide" }}</span> 
</form> 

フォームのスタイルを設定する別の方法は、フォームにウィジェットをインストールすることです。 py Django Selectのようなものをインストールして、次のようなフォームに追加できます。

class PostForm(forms.ModelForm): 
    language = forms.MultipleChoiceField(widget=Select2MultipleWidget(attrs={'data-placeholder': 'Language'}),choices=settings.LANGUAGES) 
    class Meta: 
     model = Post 
     fields=[ 
     'title', 
     'content', 
     'image_url', 
     'language', 
     ..... 
    ] 

フォームに{{ form.media.js }}を使用することを忘れないでください。

私はあなたがそれを得ることを望みます。あなたが今のやり方は最良の方法ではありません;）

p.s. Django Crispy Formを忘れてしまった。それらはインストールが簡単で扱いが簡単ですが、CSSですべてをスタイルすることができるので、ウィジェット調整をお勧めします。ときどきトリッキーなことがあり、ドキュメントを読む必要があります。