Python 入門

ホーム > Django のフォームライブラリ > Django フォームの基本

Django フォームの基本

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

ここでは簡単な入力フォームを作ることを通して、基本的な Django フォームの動作をざっとみていきます。

まず、テスト用の Django App を作ります。ここでは次のコマンドで keijiban という名前のアプリケーションを作りました。

> python manage.py startapp keijiban

サンプルとして "書込みフォーム" の意味で KakikomiForm という名前のフォームを定義します。 keijiban サブディレクトリ内に、forms.py という名前を作り次の内容を記述します。 この名前はサンプル用なので何でもかまいませんが、変更したら次からのコードも適当に読み替えてください。フィールドは name, email, body の三つを定義しました。

from django import forms

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

これでフォームクラスの定義は完了です。

次にフォームクラス KakikomiForm を表示する View を作ります。views.py に次を記述します。

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

def kakikomi(request):
     f = KakikomiForm()
     return HttpResponse(f)

単純にフォームを生成して、それを文字列として返すだけでどうなるかみてみましょう。

次に URL を構成します。プロジェクトルートの urls.py で URL のパターンとビューを設定します。

...
from mysite.keijiban.views import kakikomi
...
urlpatterns = patterns('',
     ('^kakikomi1/$', kakikomi),
     ...

以上でフォーム、ビュー、そして URL の定義が終わりました。これでどのように表示されるか確認します。 開発サーバーを起動して、ブラウザから次のように要求します。

Django フォーム

ソースを見ると次のような内容です。(本来は改行無しです。読みやすいように改行してあります)

<input type="text" name="name" id="id_name" />
<input type="text" name="email" id="id_email" />
<input type="text" name="body" id="id_body" />

フォームクラスのフィールド毎に、input タグが作られ、それぞれの name と id がフィールド名を元に生成されています。

フォームクラスの as_table() 関数を使うと出力は次のように変わります。コードはこちら・・・

def kakikomi(request):
     f = KakikomiForm()
     return HttpResponse( f.as_table() )

Chrome での表示は次のようになりました。

Django フォーム

ソースは次のようになります。

<tr>
   <th><label for="id_name">Name:</label></th>
   <td><input type="text" name="name" id="id_name" /></td>
</tr>
<tr>
   <th><label for="id_email">Email:</label></th>
   <td><input type="text" name="email" id="id_email" /></td>
</tr>
<tr>
   <th><label for="id_body">Body:</label></th>
   <td><input type="text" name="body" id="id_body" /></td>
</tr>

これも元は改行インデントなしです。

table タグの中に記述されるべき内容が、ラベルつきで出力されていることがわかります。 他のフィールドも自由に追加できるように、table タグ自体は出力されていません。下でわかるように、テンプレートで指定します。

その他 as_ul()as_p() などで、 li タグや p タグとして出力することも可能です。

テンプレートに組み込む

これだけではまだ使い勝手がよくありませんので、テンプレートに組み込んでどのように使うかみてみましょう。 テンプレートを kakikomiform.html として次を用意します。

<html>
<head>
     <title>書き込みフォーム</title>
</head>
<body>
<h1>掲示板 - 書き込みフォーム</h1>
<form action="" method="post">
     <table>
          {{form1.as_table}}
     </table>
</form>
</body>
</html>

View を次のように変更します。

from django.shortcuts import render_to_response 
from mysite.keijiban.forms import KakikomiForm

def kakikomi(request):
     f = KakikomiForm()
     return render_to_response('kakikomiform.html', {'form1': f})

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

Django フォーム

ソースは次のようになりました。

<html> 
<head> 
     <title>書き込みフォーム</title> 
</head> 
<body> 
<h1>掲示板 - 書き込みフォーム</h1> 
<form action="" method="post"> 
     <table> 
     <tr>
        <th><label for="id_name">Name:</label></th>
        <td><input type="text" name="name" id="id_name" /></td>
     </tr>
     <tr>
        <th><label for="id_email">Email:</label></th>
        <td><input type="text" name="email" id="id_email" /></td>
     </tr>
     <tr>
        <th><label for="id_body">Body:</label></th>
        <td><input type="text" name="body" id="id_body" /></td>
     </tr>
     </table> 
</form> 
</body> 
</html>

フォームの部分の改行とインデントは、読みやすいように修正してあります。

フォームとデータ

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

from django.shortcuts import render_to_response 
from mysite.keijiban.forms import KakikomiForm

def kakikomi(request):
     f = KakikomiForm({'name':'Keisuke', 'email':'dadosan@keicode.com', 
'body': 'Hello, Django Form!'})
     return render_to_response('kakikomiform.html', {'form1': f})

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

Django フォーム

そこで、ポストされたデータを受け取ることを考えます。その前に、データをポストできるように、テンプレートを変更してサブミットボタンを追加します。

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

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

from django.shortcuts import render_to_response 
from mysite.keijiban.forms import KakikomiForm

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

こうすることで、ポストされたデータをそのままフォームに取り込むことができます。 いわゆるスティッキーなフォームとなります。

Django フォーム

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

Django フォーム

フォームにはデータのバリデーションなどの機能があります。それらについてはまた別のページで説明します。 ここでは簡単なフォームを作り、それがどのように動作するか確認しました。

その他、次のようにウィジェットを指定することで、入力フィールドを変更することもできます。

from django import forms

class KakikomiForm(forms.Form):
     name = forms.CharField()
     email = forms.EmailField()
     body = forms.CharField(widget=forms.Textarea)

Django フォーム

その他の入力フィールドについては、Django フォームのフィールド型をみてください。

ホーム > Django のフォームライブラリ > Django フォームの基本