テンプレートの{{ form.item_name }}で項目ごとに配置した入力フォームの大きさを変えたいってなりました。
その方法を調べたので備忘も兼ねてシェアします。
やりたいこと
EmailとPasswordの入力フォームの幅と高さを変更したい。
スクリーンショット 2022-03-06 14.41.40
※ 前提として、以下のように入力フォームを表示させている場合のお話になります。
user_form.html
<form method="post" class="register-form">
{% csrf_token %}
{# 各入力項目 #}
<div class="email"> {{ form.email }} </div>
<div class="password"> {{ form.password }} </div>
{# 登録ボタン #}
<input type="submit" class="register-button" value="Register">
</form>
どうやってサイズを変更するか
各コンポーネントの大きさの調整はCSSで行っています。
今の状態だと、EmailとPasswordの入力フォーム自体にクラスがないので、CSSで対象のコンポーネントを指定できません。
なので、form.emailやform.passwordにクラスを追加します。
そこで何をするかというと、forms.pyでemailとpasswordにクラスを追加する処理を追記します。
具体的には、下のコードの'class': 'input-field'を、フィールドの設定に追加します。
forms.py
class UserForm(forms.ModelForm):
""" ユーザー登録／更新用のフォーム """
class Meta:
model = User
fields = ['email', 'password']
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['email'].widget.attrs = {'placeholder': 'Email', 'class': 'input-field'}
self.fields['password'].widget.attrs = {'placeholder': 'Password', 'class': 'input-field'}
これで、emailとpasswordに「input-field」というクラスが追加されました。
あとは通常通り、CSSで上記クラスに対して幅と高さを指定します。
users.css
.input-field {
width: 400px;
height: 40px;
}
画面を確認すると、Beforeの状態からAfterの状態になりました！
スクリーンショット 2022-03-06 14.41.40
forms.pyでできることってバリデーションの調整だけじゃないんだ、というのを学びました。今後も活用していきたいです。
↧