ウィジェットの概要と、使い方を解説【順番に説明していきます】

djangoでの入力フォームをカスタマイズできるウィジェット。

その使い方について学んでいきましょう。

まずはウィジェットの概要から

一言で言うと、HTMLファイル上での「見た目」をコントロールするのがウィジェットです。

といってもこれだけではよく分かりませんよね。

実際の例をみながら、ウィジェットの理解を深めていきましょう。

ウィジェットを理解するうえでまず押さえておきたいのが、フィールドとの違いです。

例えば、CharFieldをhtmlで表示させるとこのようになります。

CharFieldの表示

テキストボックスが表示されているので、フィールドも見た目をコントロールしていると思ってしまいますよね。

ただ、見た目をコントロールしているのはやはりウィジェットなのです。

どういうことかというと、それぞれのフィールドはデフォルトでウィジェットが設定されているのです。

CharFieldの場合、デフォルトでTextInputウィジェットが設定されています。

ですので、TextInputウィジェットによってテキストボックスが表示されたのです。

ここで、ウィジェットを使ってCharFieldの見た目を変えていきましょう。

見た目をチェックボックスにしてみます。

sample = forms.CharField(widget = forms.CheckboxInput)

チェックボックスのフィールド

CharFieldであるにも関わらず、チェックボックスが表示されました。

このように、ウィジェットを使うことで見た目をコントロールできるというとをおさえておきましょう。

補足

すると、フィールドは何の役割を持っているのか？と思いますよね。

フィールドは、入力された情報のバリデーションが設定されています。

例えば、Eメールフィールドであれば、アドレスに@が入っているかといったバリデーションが実装されているのです。

ウィジェットは見た目、フィールドはバリデーションと覚えましょう。

ここからはウィジェットの使い方についてみていきましょう。

ウィジェットを使うには、フィールドの後にwidgetを指定します。

先ほど使った例をまた見てみましょう。

sample = forms.CharField(widget = forms.CheckboxInput)

フィールドを指定したあとに、widget=..と書いています。

このように書くことで、ウィジェットを指定することができます。

主なウィジェットの種類とHTMLファイル上でのレンダリングのされ方を表にまとめました。

ウィジェットのまとめ
(1) htmlの見た目をコントロールしているのがウィジェット。
(2) 各フィールド(CharFieldなど)は、デフォルトでウィジェットが設定されている
(3) フィールドの定義で実装されるのはバリデーション。