6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Djangoのforms.pyでhtmlのclass属性を設定する方法

Last updated at Posted at 2020-09-05

やりたいこと

forms.pyでテンプレートへ表示させるフォームを書いたときに、合わせてhtmlタグに設定されるclass属性を指定したい。

forms.py
class Form(forms.Form):
    sample = forms.IntegerField(label="hoge")

このままだと以下のように出力され、inputタグへclass属性を設定出来ない。

<input type="number" name="sample" required="" id="id_sample">

解決策

forms.pyで**__init__**メソッドをオーバーライドする。

forms.py
class Form(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['sample'].widget.attrs['class'] = 'クラス名'

    sample = forms.IntegerField(label="hoge")

注意点として以下の2つが上げられる。

  • self.fields['sample']で指定する名前を、フィールドインスタンス(forms.IntegerField)を格納した変数名(sample)とする
  • __init__メソッドをオーバーライドしているので、必ず親クラスの__init__メソッドを呼ぶ(呼ばないと親クラスforms.Formの__init__メソッドが呼び出されず、適切な初期化が行われない可能性がある)

使用するとき

forms.pyでフォームを定義したときに、見た目をcssで調整したいときに使う。

参考

stackoverflowの質問
https://stackoverflow.com/questions/401025/define-css-class-in-django-forms

参考にした回答
https://stackoverflow.com/a/401057

質問者
https://stackoverflow.com/users/22306/ashchristopher

回答者
https://stackoverflow.com/users/22306/ashchristopher

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?