スポンサードリンク



こんにちは。sinyです。

この記事では下図のようにDjangoの入力フォームの幅を揃える簡単な方法をご紹介します。

 

前提

今回はユーザ登録画面のフォームを整形する例で説明します。

forms.pyやviews.py等の設定は本記事の趣旨ではないため割愛します。

ユーザ登録画面のフォームを表示する部分のhtmlは以下のようなコードを記載している前提で進めます。

この状態では、冒頭の画像の左側のようにフォームラベルの長さによってフォームの位置がずれて見栄えが悪くなってしまいます。

django-widget-tweaksを使ってデザインを整える

そこで、django-widget-tweaksを利用すると簡単にデザインを整えることができます。

まずはpipコマンドでインストールします。

 

settings.pyに 'widget_tweaks'を追加します。

 

テンプレートファイルの冒頭に{% load widget_tweaks %}を追加します。
こうすることでwidget_tweaksの機能をテンプレート内で利用できるようになります。

ではテンプレートのフォームを表示している部分を以下の通り修正します。

 

フォームを表示している{{field}}の部分に|add_class:"form-control"をつけることでフォームにclassの定義を設定することができます。

これで画面を更新すると以下のようにデザインが変わります。

render_fieldテンプレートタグを利用してHTMLのような構文を使用してDjangoフィールドを柔軟にレンダリングすることもできます。

フォームのクラスにform-classを指定し、placeholderにフォーム名を設定しています。
これで以下のような画面デザインに変更されます。

widget_tweaksを使うとこのように簡単にフォームを整形することができるので便利ですね。
以上、「Djagnoのフォーム幅を整える方法」でした。

 

おすすめの記事