Djangoのフォームにclassを付ける方法

djangoのフォームをいざ作ってみましたが、初期状態だと何か味気ないですよね。そんな時は、classを命名して自分なりに見えやすいものにアレンジしてみましょう。

しかしながらformにはどうやってclassを命名したら良いんだ？って疑問を解決するのが今回の記事になります。

動作環境

初期状態のフォームのコード

とりあえず書いてみないことには始まりません。

早速コードを書いてみます。

ログインフォームという設定で書いてみます。

views.py

index.html

そしてシンプルにformを書いてみます。

そしてこの状態でブラウザに表示されるのはこのような状態になります。

実に素っ気無いですが、形としては一応できています。

この状態を実際にブラウザのdevツールで確認して見たのが下の画像です。

{{ form.username }}はブラウザではこのような中身で表示されていることがわかります。

そして今回行いたいこととしては、このinputタグにclassをつけてより、UI的に優れた見た目にすることでしたね。

それでは次で説明します。

フォームにクラスを付ける方法

djangoのフォームを使用するからにはformで設置したいもの。

コードがこれになります。

注視すべき点として、widget.attrsの引数を用いてclassを命名しcssクラスを適用することができます。

attrsのキーの’class’がまさに、classを意味し、バリューでの’input-field’がクラス名ということになります。

ちなみに同様に’placeholder’: ‘Password’に関してもinputタグのplaeholder属性を表し、タグの背景にうっすらとUsernameとPasswordが確認でき入力項目がわかり易く表示されます。

CSSをアレンジしてみる

これでモダンな感じに仕上がりました。

まとめ

formのwidgetに、

attrs={‘class’:’input-field’}

と記入するだけでした。

スクールを利用して本格的に学ぶ

いかがでしたでしょうか？

今回10人中9人が挫折すると言われるプログラミングを、半年間もの間頑張れ、結果、今はPythonエンジニアとして働く事ができているのも、プログラミングスクールを利用して自ら目標を設定して講師の言う通りにひたすら打ち込んだまでです。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

結局一人だとどうしてもだらけてしまいます。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考えました。

無料カウンセリングで、あなたの悩みを相談してみてはいかがでしょうか？

テックキャンプで無料相談を受ける

上記リンク先から無料相談ができます。