【Django】フォームを作成しCSSやwidgetsで装飾してみる
今回、FormViewでフィールドを装飾してみたので投稿します。
フォームの作成
forms.pyをアプリフォルダ内に作成しフォームに表示する項目をフォームクラスに定義します。
#アプリ名/forms.py
from django import forms
class TestForm(forms.Form):
name = forms.CharField()
ビューの編集
views.pyを編集しテンプレートと使用するフォームクラスを指定します。
#アプリ名/views.py
from django.views import generic
from . import forms
class TestView(generic.edit.FormView):
template_name="アプリ名/test.html"
form_class = forms.TestForm
ルーティング
アプリフォルダ内のurls.pyにビューを指定します。
#アプリ名/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.TestView.as_view()),
]
テンプレートにフォームを読み込む
テンプレートに表示するフォームを読み込みます。csrf_tokenはセキュリティ上必要なもので無いとエラーになります。
#アプリ名/templates/アプリ名/test.html
<form>
{% csrf_token %}
{{ form.as_p}}
</form>
ブラウザでlocalhost:8000にアクセスするとフォームが表示されました。
フィールドの追加
forms.pyを編集し表示するフィールドを追加します。
#アプリ名/forms.py
from django import forms
class TestForm(forms.Form):
name = forms.CharField()
body = forms.CharField()
templatesは特に編集していませんが定義したフィールドが表示されました。
メニューへ
フィールドの分割
2つのフィールドにそれぞれCSSを適用できるように修正します。
templatesを修正します。
#アプリ名/templates/アプリ名/test.html
<form>
{% csrf_token %}
{{ form.name}}
{{ form.body}}
</form>
フィールドを分割することができました。
brタグで改行し文字を付け加えることでラベルっぽくしてみる。
#アプリ名/templates/アプリ名/test.html
<form>
{% csrf_token %}
名前{{ form.name}}<br>
本文{{ form.body}}
</form>
メニューへ
フィールドにCSSを適用する
アプリフォルダ内にstaticフォルダ、更にその中にアプリフォルダ、更にその中にstyle.cssを作成し以下の様に記載します。
#アプリ名/static/アプリ名/style.css
#id_name{
background-color: yellow;
border: dashed green;
}
#id_nameのnameは{{ form.name}}のnameです。
枠線と背景色の変更ができました。
メニューへテーブル要素に入れてみる
htmlでtable要素に入れて本文の要素の色も変えてみます。
#アプリ名/static/アプリ名/test.html
<form method="post">
{% csrf_token %}
<table>
<tbody>
<tr>
<td>
名前{{ form.name }}
</td>
<td style="background-color:blue;">
本文{{ form.body }}
</td>
</tr>
</tbody>
</table>
</form>
メニューへ
ウィジェットでフィールドの設置を変更する
widgetsを指定してフィールドの高さと変えてみる。
#アプリ名/forms.py
from django import forms
class TestForm(forms.Form):
name = forms.CharField()
body = forms.CharField(widget=forms.Textarea(
attrs={
"rows": "5"
}
))
メニューへ
CSSが適用されない時
たまたまではあるが、この記事を書いているときにCSSが適用されないエラーに遭遇しました。結果としては Shift + F5 でブラウザのスーパーリロードをすることで解決しました。
以上、フォームを作成しCSSやwidgetsで装飾してみました。
分かりにくい部分などありましたらお知らせ頂けると助かります。お知らせいただいた内容は公開されることはありません。どの記事から投稿されたかは分かるようにしています。