目次
簡単な入力画面作成
Formの利用&CSRF対策の確認のため、簡単な入力画面を作ります。
軽量で機能は限られますが、クラス指定が必要ないのでサンプルには最高です。
HTMLファイル
以下のようなHTMLファイルを作ります。
hello.html
{% load static %} <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" /> </head> <body> <table> <tr> <td> <h1>Hello World!!</h1> </td> </tr> <tr> <td><img src="{% static "images/k.png" %}" /></td> </tr> <form action="" method="post"> {% csrf_token %} {% if name %} <tr> <td><h1>{{ name }}</h1></td> </tr> {% else %} </tr> <tr> <td>{{form.as_p}}</td> </tr> <tr> <td><input type="submit" value="送信" /></td> </tr> {% endif %} </form> </table> </body> </html>
Python::テキストボックスのフォーム作成
入力画面にはdjangoのビルトインの Field クラスを使います。
今回はテキストボックスを一つだけ作るので、「CharField」を使います。
helloforms.pyです。
rom django import forms class HelloForm(forms.Form): name = forms.CharField(label='何か入力')
Djangoでは、このようにフォームだけを定義したソースを作成し、それをインポートして使う感じにするのがよさげです。
CharField(label='何か入力')
で、「何か入力」というラベルとシンプルなテキストボックスを生成します。
Python:フォームを表示するソース
今回は、hello.pyというファイルにしました。
from django.template.context_processors import csrf from django.shortcuts import render from . import helloforms as forms def hello(request): if request.method == 'POST': c = { 'name': request.POST["name"] } else: f = forms.HelloForm(label_suffix=':') c = {'form': f} c.update(csrf(request)) return render(request, 'hello.html', c)
ポイントを補足します。
さきほど定義したフォームソースをformという名前でインポートして呼び出します。
forms.HelloForm(label_suffix=':')
あとは送信ボタンを定義しているだけです。
CSRF送信時エラー回避対策
そのまま何もしないでおくと、送信ボタンを押したときにエラー画面がでます。
これを回避するために以下の対策をしています。
csrfをインポートします。
requestを以下のようにラップします。
c.update(csrf(request))
これがCSRF対策です。
こうすることでエラーはなくなります。
送信ボタンを押す前かか後かの判断は、「request.method == 'POST'」(つまり、送信ボタンが押されてPOSTで遷移してきた状態)か否(初期表示状態)かで判断できます。
それをテンプレート言語の@ifを使って、表示を切り替えます。
URLの形成
urls.pyは、こんな感じです。
これで「http://localhost:8000/hello」のURLでアクセスできます。
from django.contrib import admin from django.urls import path from . import views, hello urlpatterns = [ path('hello/', hello.hello, name='hello'), ]
実行確認イメージ
サーバーを動かして。
python hello/manage.py runserver
やってみます。
ためしに「BOKUのITな日常」と入力して、送信ボタンを押します。
OKですね。