（最終更新月：2022年3月）
✔当記事はこんな疑問をお持ちの方へ向けて書かれています
「Djangoを使ってフォームを表示させたい！どうするの？」
「フォームからデータを送信・保存するには？」
「既存のデータを編集するにはどうするの？フォームへ初期値を設定したい！」
✔当記事を通じてお伝えすること
- フォームをブラウザに表示する方法
- フォームからデータを送信・保存する方法
- 編集フォームの作成｜初期値の設定方法
Djangoでフォームを扱う方法は3つあります。
- HTMLに直接記述する
- Formクラスを作成しビューと紐付ける方法
- ModelFormクラスを作成しビュート紐付ける方法
当記事では、「Formクラス」による方法でご紹介します。
ModelFormクラスで記述する方法は、当記事の内容を応用すればスムーズで簡単です。
一度当記事をお読みになってから、下記よりModelFormでの方法へお進みください↓
当記事ではこんなフォームを作っていきます。
【著者プロフィール】
当ブログを通じて、下記アプリの作り方、コード等を公開、解説しています
☆日報アプリ「D-Repo」（デモ版）→こちら
☆便利ツールアプリ「Tool Station」→こちら
✔初期費用ゼロ／月9,800円でWebデザインが学べる
デザインを習得するためには、客観的なフィードバックと改善が不可欠です。
以下の記事ではこんなWebデザインスクールをご紹介しています。
- 初期費用ゼロで、月々9,800円のみ
- オンラインで、教材が使い放題
- コンテストや実務案件にチャレンジして報酬もGETできる
デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。
詳細をまとめた記事もございますので、ぜひご覧ください。
フォームをブラウザに表示する方法
フォームクラスを使ったフォームの表示方法は下記の流れとなります。
- forms.Formを継承したFormクラスを作成する
- ビュー関数で、作成したフォームクラスをHTMLテンプレートへ渡す
- HTMLでフォームを受け取り表示する
- ビュー関数とURLを紐付ける
一つずつ見ていきましょう。
Formクラスを作成する
フォームクラスはviews.py内等、どこに作っても構いません。
ただプロジェクトが複雑になっていくことも想定し、「forms.py」という新たなファイルを作り、その中に記述することをオススメします。
✔︎プロジェクトフォルダ「src」 > appフォルダ「nippo」 > forms.py
src #プロジェクトフォルダ
├── nippo #appフォルダ
.
.
│ ├── forms.py #こちらを作成しました。
.
.
│ ├── urls.py
│ └── views.py
├── #その他フォルダ✔︎forms.Formの作成
from django import forms
class NippoFormClass(forms.Form):
title = forms.CharField()
content = forms.CharField()コードを解説していきます。
djangoライブラリからformsをインポートします。
from django import formsforms.Formを継承したクラスを作成します。
class フォームクラス名(forms.Form):フィールドを作成します。
フィールド名 = forms.フィールド種類()フォームクラスをHTMLテンプレート渡す
ビュー関数により、フォームクラスはテンプレートへ渡されます。
【views.py】
from .forms import NippoFormClass
def nippoCreateView(request):
template_name="nippo/nippo-form.html"
form = NippoFormClass()
ctx = {}
ctx["form"] = form
return render(request, template_name, ctx)コードを解説していきます。
作成したフォームクラスをインポートします。
from .forms import NippoFormClass関数内でフォームのインスタンスを作成します。
form = NippoFormClass()フォームをテンプレートへ渡します。
ctx = {}
ctx["form"] = form
return render(request, template_name, ctx)受け取り側のテンプレート「nippo-form.html」を作成していきます。
HTMLでフォームを受け取り表示する
【nippo-form.html】
{% extends "base.html" %}
{% block title %}日報を作成しよう{% endblock %}
{% block content %}
<form method="POST">{% csrf_token %}
{{ form.as_p }}
<button type="submit">送信</button>
</form>
{% endblock %}コードを解説します。
formタグで囲い、POSTメソッドを指定します。
<form method="POST"></form>formタグ内で{% csrf_token %}タグを記述します。
<form method="POST">{% csrf_token %}</form>ビュー関数から渡された変数「form」をas_pメソッドで展開します。
<form method="POST">{% csrf_token %}
{{ form.as_p }}
</form>submit用のボタンを設置します。
<form method="POST"
{{ form.as_p }}
<button type="submit">送信</button>
</form>最後にURLとビュー関数を紐付けて完了です。
view関数とURLを紐付ける
nippo > urls.py
from django.urls import path
from .views import nippoCreateView
urlpatterns = [
#....,
path("create/", nippoCreateView),
]アクセスしてみます。
無事表示されました。
ただこのままではデータの保存ができません。
次章で保存方法を見ていきます。
フォームからデータを送信・保存する方法
submitボタンより送信された値は、request.POSTにより受け取ることができます。
詳しくご覧になりたい方はこちらの記事をどうぞ↓
受け取った値を保存するまでのコードは下記の通りになります。
def nippoCreateView(request):
template_name = "nippo/nippo-form.html"
form = NippoFormClass(request.POST or None)
ctx = {"form": form}
if form.is_valid():
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]
obj = NippoModel(title=title, content=content)
obj.save()
return render(request, template_name, ctx)コードの解説をしていきます。
フォームクラスには、空、もしくは送信データのどちらかが入るため、「or」を使い一行で入力を済ませます。
form = NippoFormClass(request.POST or None)「if request.POST == ‘POST’」などの表記も使えますがこちらの方が短く簡単です。
フォームの送信時にエラーが無いかをチェックします。
if form.is_valid():フォームにエラーがある場合は、if文以下は実行されません。
cleaned_data[フィールド名]で値をそれぞれ変数へ入れていきます。
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]モデルクラスのインスタンスを作り、保存します。
obj = NippoModel(title=title, content=content)
obj.save()フォームへの保存は完了です。
編集したい時はどうするのでしょうか？
フォームへ初期値を設定する方法を解説していきます。
編集フォームの作成｜初期値の設定方法
フォームへ初期値を渡すには、{フィールド名: 値}の辞書型を引数で渡すことで設定可能です。
アップデートビュー関数は下記の通りとなります。
def nippoUpdateFormView(request, pk):
template_name = "nippo/nippo-formclass.html"
obj = NippoModel.objects.get(pk=pk)
initial_values = {"title": obj.title, "content":obj.content}
form = NippoFormClass(request.POST or initial_values)
ctx = {"form": form}
if form.is_valid():
title = form.cleaned_data["title"]
content = form.cleaned_data["content"]
obj.title = title
obj.content = content
obj.save()
return render(request, template_name, ctx)ポイントはデータベースからの値を渡している箇所です。
obj = NippoModel.objects.get(pk=pk)
initial_values = {"title": obj.title, "content":obj.content}
form = NippoFormClass(request.POST or initial_values)「これだけ見てもわからない」という方は詳しい解説を別記事にてご覧ください。
まとめ
当記事の内容をまとめます。
フォームを表示する方法として、Formクラスを使った方法を解説しました。
表示するまでのステップは下記の通りです。
- forms.Formを継承したFormクラスを作成する
- ビュー関数で、作成したフォームクラスをHTMLテンプレートへ渡す
- HTMLでフォームを受け取り表示する
- ビュー関数とURLを紐付ける
フォームからデータを受け取る際には、下記のように記述すると便利です。
form = フォームクラス(request.POST or None)フォーム変数から値を受け取るために、①is_validメソッドでエラーチェック②cleaned_data属性で値を取得する方法を解説しました。
自身でも色々と試しながら当記事の内容をしっかりと身につけましょう。
次回は、今回作成したフォームフィールドをテキストエリアに変更する方法や、placeholder、ラベルについて操作する方法を解説していきます
当記事をご覧の方の中にも「そろそろウェブでアプリを公開してみたいなぁ」「どうやって公開するの？」という方もいらっしゃるのではないでしょうか？
下記の通り、別記事ではDjangoアプリの公開方法や公開までの準備についての解説をしていますのでご覧ください！
「Webアプリを公開したい！」という方へ
当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています
「Djangoでのアプリ開発を学びたい！」
「Djangoで開発したアプリをWebで公開するにはどうするの？」
という方は必見です！
