投稿日：2017年9月21日｜最終更新日: 2017年10月28日

フォームの基本

Python

Anaconda・Django1.11.3環境に、フォームを作成します。

Djangoでフォームを作る
環境
アプリケーション作成
フォーム作成
フォームとデータ
POST
ウィジェット

Djangoでフォームを作る

Djangoには、HTMLのフォーム操作用のライブラリが用意されています。フォームクラスとテンプレートを組み合わせば、動的な Webフォームを作成できます。簡単な入力フォームを作ることを通して、基本的なDjangoフォームの動作を確認します。

環境

OS	CentOS 7.1.1503
pyenv	1.1.3-5-g7dae197
Anaconda	3-4.3.0
MariaDB	5.5.52-1.el7
Apache	2.4.6
mod_wsgi	4.5.14
Django	1.11.3

アプリケーション作成

テスト用の「App」を作ります。以下のコマンドでapp1という名前のアプリケーションを作りました。（プロジェクト名を「pj1」とします。）

python manage.py startapp app1

フォーム作成

①forms.pyを編集します。

vi pj/app1/forms.py

以下のように記述します。

from django import forms

class KakikomiForm(forms.Form):
     name = forms.CharField(max_length=100)
     email = forms.EmailField(max_length=100)
     body = forms.CharField(max_length=100)

サンプルとして「KakikomiForm」という名前のフォームを定義します。フィールドは name, email, body の三つを定義しました。

②アプリケーションディレクトリのviews.pyを編集します。

vi pj1/app1/views.py

以下の内容を追加します。

from django.http import HttpResponse
from mysite.keijiban.forms import KakikomiForm

def kakikomi(request):
    form = KakikomiForm()
    context = {
        "form": form,
    }
    return render(request, 'kakikomi.html',context)

フォームクラス KakikomiForm を表示する View を作ります。

③urls.pyを編集します。

vi pj/app1/urls.py

以下のように記述します。

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^kakikomi/$', views.kakikomi, name="kakikomi" ),
]

④アプリケーションディレクトリ配下のtemplatesディレクトリへhtmlテンプレート（kakikomi.html）を作成します。

vi pj1/app1/templates/kakikomi.html

以下のように記述します。

<html>
<body>
    <form>
      {{ form }}
    </form>
  </body>
</html>

⑤ブラウザから、djangoサイトを起動します。

http://localhost/kakikomi/

以下のような表示になります。

フォームとデータ

フォームに「ディクショナリ」としてデータを渡すことで、それぞれのフィールドに対応する箇所に値を埋めることが可能です。

①アプリケーションディレクトリのviews.pyを編集します。

vi pj1/app1/views.py

以下の内容を追加します。

from django.http import HttpResponse
from .forms import KakikomiForm

def kakikomi(request):
    form = KakikomiForm( {'name':'TaroYamada', 'email':'test@gmail.com',
    'body': 'Hello, Django Form!'})
    context = {
        "form": form,
    }
    return render(request, 'kakikomi.html',context)

フォーム「KakikomiForm」に渡した値が表示されています。

以下のような表示になります。

POST

①ポストされたデータを受け取ります。まず、データをポストできるようにkakikomi.htmlテンプレートを変更してサブミットボタンを追加します。

vi pj1/app1/templates/kakikomi.html

以下のように記述します。

<html>
<body>
  <form action="" method="post">
    <table>
          {{form.as_table}}
          <tr><td colspan='2'><input type="submit" value="Submit"></td></tr>
     </table>
  </form>
</body>
</html>

②データがポストされたとき (HTTP リクエストのメソッドが POST のとき)、POST データをそのままフォームに渡すようにviews.pyを編集します。

vi pj1/app1/views.py

以下の内容を追加します。

from django.shortcuts import render_to_response 
from .forms import KakikomiForm

def kakikomi(request):
   if request.method == 'POST':
        form = KakikomiForm(request.POST)
    else:
        form = KakikomiForm()
    return render_to_response('kakikomiform.html', {'form': form})

※kakikomiform.htmlページにポストします。

③この状態でブラウザからみると、以下のようにフォームが表示されます。

フォームの定義では実は全ての項目が必須項目になります。どれか入力せずにデータをサブミットすると自動的にエラーメッセージが表示されます。

ウィジェット

①ウィジェットを指定することで、入力フィールドを変更することもできます。

vi pj/app1/forms.py

以下のように記述します。

from django import forms

class KakikomiForm(forms.Form):
     name = forms.CharField(max_length=100)
     email = forms.EmailField(max_length=100)
     body = forms.CharField(max_length=100)

この状態でブラウザからみると、以下のようにフォームが変化します。