Django cssを用いてフォームののレイアウトを変える方法

問題の発生

forms.pyで設定したフォームをテンプレートに表示しようとしたところ、デフォルトのスタイルが適用されたため、フォームの見た目が整っていない状態になってしまった。（下参照）

これはwidgetの設定がされていないことが問題である。

widgetとは？

widget＝ウィジェット。直訳すると小型の装置や部品と言う。

Djangoのwidgetとは、フォームフィールドがどのようにHTMLとして表示されるかを制御するもの。
widgetを設定せず、フィールドを設定したら、デフォルトで設定されているChar_Fieldはinput_type= text、Choice_Fieldはselectとして表示されている。

なので、widgetを設定すれば、フォームのレイアウトを変えることができる。

解決策　widgetの設定

forms

match_result = forms.ChoiceField(
        widget=forms.Select(attrs={'class': 'form-control'}),
        choices=[
            ('完全勝利','完全勝利'),
            ('点差勝利','点差勝利'),
            ("引き分け",'引き分け'),
            ("点差敗北",'点差敗北'),
            ("完全敗北",'完全敗北')
            ],required=False,)
change_point = forms.IntegerField(
        widget=forms.NumberInput(attrs={'class': 'form-control'}),
        required=False)
match_leader = forms.CharField(
        max_length =100,
        widget=forms.TextInput(attrs={'class': 'form-control'}),
        required=False)

widget=forms.〇〇(attrs={'class': 'form-control'}),...
とすることでcssファイルで設定したform-controlのcssが適用される。

-----form-controlのCSS---------

css

.form-control {
    width: 200px;
}

これでform-controlというクラスがついている要素が横幅200pxの大きさに統一されることとなる。

ポイント
match_resultやchange_point、match_leaderにform-controlというクラスをつけるイメージ

結果

以下のように大きさを揃えることができた。

感想

フォームフィールドのレイアウトを変更するためにはwidgetにより設定することが重要だとわかった。このほかにも様々な表現方法があるので学んでいきたい