Clever Geek Handbook

フォームを作ります

Djangoのフォームには、フォームを一連の段落、表、またはリストとして表示する定義済みのメソッドas_p（）、as_table（）、as_ul（）がいくつかあります。 実際には、これらの方法は、形状を希望どおりに見えるようにするのに必ずしも十分ではありません。



レイアウトデザイナがすべてのフォームをdivでレイアウトするとします。 この場合、 ドキュメントでは、テンプレートに必要なタグを手動で書き込むことを推奨しています。 フォームが1つしかない場合は、そうすることができます。 いくつかの形式がある場合、このアプローチはすぐにその魅力をすべて失います。 解決策は非常に簡単です。forms.Formまたはforms.ModelFormから独自のフォームクラスを継承し、必要に応じてフォームを描画する方法を教えます。



まず第一に、Djangoのソースを調べることをお勧めします。as_pメソッドなどは非常に簡単です。 これらは、フォームの描画方法を指示するBaseFormクラスの_html_outputメソッドを呼び出します。 そのため、as_divメソッドを追加します。

Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  1. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  2. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  3. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  4. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  5. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  6. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  7. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)



  8. Copy Source | Copy HTML class SexyModelForm (forms.ModelForm): def as_div (self): return self ._html_output( normal_row = u '<div%(html_class_attr)s>%(label)s %(field)s %(help_text)s %(errors)s</div>' , error_row = u '<div class="error">%s</div>' , row_ender = '</div>' , help_text_html = u '<div class="hefp-text">%s</div>' , errors_on_separate_row = False)





コードは自明であり、質問を投げかけることができるのはerrors_on_separate_rowだけです。 このパラメーターがTrueに設定されている場合、エラーは別のブロックに表示されます。 <p>内で<ul>をプッシュしないように、たとえばas_pで使用されます。



これで、SexyModelFormからフォームを継承し、{{form.as_div}}を使用してテンプレートで呼び出すことができます。



B 1.2。 必須フィールドとエラーフィールドにcssクラスを割り当てる良い機会がありました。 人生をもう少し単純化しましょう-クラスに2、3行を追加すると、フォームにもう少し均一性が追加されます。

Copy Source | Copy HTML



  1. error_css_class = 'class-error'
  2. required_css_class = 'class-required'


しかし、それだけではありません。 すべてのフィールドにいくつかのcssクラスを追加する必要があることがあります。 これは次のように実行できます。

Copy Source | Copy HTML



  1. def __init__（self、* args、** kwargs）：
  2. super （ModelForm、self）。 __init__（*引数、** kwargs）
  3. ＃フィールドを定義せずにcssクラスをウィジェットに追加：
  4. self .fieldsのフィールド：
  5. self .fields [field] .widget.attrs [ 'class' ] = 'some-class other-class'


ここで、たとえば、input_typeを確認し、それに応じて異なるタイプのフィールドにクラスを割り当てることができます。



結果は次のとおりです。

Copy Source | Copy HTML



  1. クラス SexyModelForm （forms.ModelForm）：
  2. error_css_class = 'class-error'
  3. required_css_class = 'class-required'
  4. def __init__（self、* args、** kwargs）：
  5. super （ModelForm、self）。 __init__（*引数、** kwargs）
  6. ＃フィールドを定義せずにcssクラスをウィジェットに追加：
  7. self .fieldsのフィールド：
  8. self .fields [field] .widget.attrs [ 'class' ] = 'some-class other-class'
  9. def as_div （自己）：
  10. self ._html_output（
  11. normal_row = u '<div％（html_class_attr）s>％（ラベル）s％（フィールド）s％（help_text）s％（エラー）s </ div>' 、
  12. error_row = u '<div class = "error">％s </ div>' 、
  13. row_ender = '</ div>' 、
  14. help_text_html = u '<div class = "hefp-text">％s </ div>' 、
  15. errors_on_separate_row = False）


解決策はシンプルで整理され、実行可能であることが判明しました。


More articles:


All Articles