モデルフォーム上の単一項目をオーバーライドする方法

Question

Djangoのモデルフォーム{{form}}呼び出しで、単一項目のスタイルを正しく上書きするにはどうすればいいですか？私は基本的な振る舞いをはるかに上回り、私の必要なスタイルを追加するように思えます。

具体的には、いくつかのテキストをビューに渡す単純なスライダーを追加したいと思います。

次のように私は自分のフォームに余分なフィールドを追加しました：

class CreateTestForm(forms.ModelForm): 

    difficulty = forms.CharField() 

    class Meta: 
     model = Test 

し、直接私のhtmlで以下：私はビューをレンダリングするとき

<form method="POST" action=""> {% csrf_token %} 
{{ form|crispy }} 

<strong>Difficulty</strong> 
<input id="difficulty" type="text" value="" class="slider form-control" data-slider-min="0" data-slider-max="10" 
         data-slider-step="1" data-slider-value="[0,10]" data-slider-orientation="horizontal" 
         data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue"> 
</br> 
<input type='submit' value='Create' class='btn'> 
</form> 

はしかし、私は2つの困難を取得入力（1つのスライダと1つのボックス）。私はDjangoが私のためのテキストボックスを作成していることを理解していますが、私はスライダーに同じIDを単に上書きすると仮定しました。

私の考えでは、スライダをこのフォームのforms.pyクラスで定義する必要があります。そうでなければ、ビュー内のcleaned_dataではアクセスできません。何か案は？

Answer 1

私はあなたがそれを想定する理由はわかりません。しかし、最初にフォーム内の関連する属性を定義して、自動的に出力を得るのはなぜですか？

difficulty = forms.CharField(widget=forms.TextInput(attrs={"class": "slider form-control", "data-slider-min": "0"...})) 

またはより良い、（私はクリスピー自分自身を使用していないが、私はそれはあなたに余分なコントロールの多くを提供します知っている。）あなたがそれらの属性を宣言できるようにカリカリのAPIを使用し

Answer 2

あなたがオーバーライドすることができますデフォルトのウィジェット、そのようなスタイリングのためにあなたのクラスを追加：

from django import forms 
class CreateTestform(forms.ModelForm): 
    class Meta: 
     model = Test 
     fields = ['difficulty'] # you don't need to define difficulty again, 
     # just get it from your model like in this example. 
     widget = { 
      'difficulty': forms.CharField(attrs={ 
       'class': 'name-of-your-class', 
       'other-attribute': 'other-value', 
      }), 
     } 

をあなたはhere以上かどうかを確認することができます。

あなたのフォームにあまりにも多くのスタイルを適用する場合、私はrender it manuallyを提案し、それを避けるために尻込みを使用することを知っていますが、それは簡単な方法で、制限なく、バックエンド、フロントエンド。

あなたも（あなたが困難をレンダリングする必要があると仮定）、次のようにレンダリングすることができます：あなたは慎重に見ると

<input class="whatever-your-class-is" name="{{ form.difficulty.html_name }}" id="{{ form.difficulty.id_for_label }}"> 

、あなたは.html_nameと.id_for_label、さえ.valuehereについての情報を見つけました。