LoginSignup
8
8

More than 3 years have passed since last update.

Djangoの入力フォームにCSSを適用する方法

Last updated at Posted at 2019-08-29

はじめに

Djangoのtemplateで入力フォームを

{{ form.username }}

のように作る時、入力フォームにCSSを適用する方法が分からず、調べてみたのでまとめておきます。

入力フォームにCSSを適用したい

例えば、ユーザー登録をするフォームを作るために、views.pyでUserCreationFormをformという名前でtemplateに渡してフォームの画面を作るとします。
usernameを記入する欄を

{{ form.username }}

のように作ると、class名をつけることができず、CSSを適用することができません。

CSSを適用させる方法

CSSを適用するための方法を解説します。
まず、仮想環境で

$ pip install django-widgets-improved

というコマンドを実行します。

次に、プロジェクトのsettings.pyで

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

のように追加します。

そして、templateの最初の方に以下を追加します。

{% load widget_tweaks %}

そしたら、

{{ form.username|add_class:'class-name' }}

のように書くことでclass名を設定できます。
あとはCSSで自由に装飾してください。

8
8
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
8
8