簡単な入力画面を作ります。
ポイントは「送信ボタンを押した時のCSRF検証エラーの回避 」です。
目次
new.cssのご紹介
軽量で機能は限られますが、クラス指定が必要ないのでサンプルには最高です。
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>
テキストボックスのフォームを作る
入力画面にはdjangoのビルトインの Field クラスを使います。
今回はテキストボックスを一つだけ作るので、「CharField」を使います。
helloforms.pyです。
rom django import forms class HelloForm(forms.Form): name = forms.CharField(label='何か入力')
Djangoでは、このようにフォームだけを定義したソースを作成し、それをインポートして使う感じにするのがよさげです。
CharField(label='何か入力')
で、「何か入力」というラベルとシンプルなテキストボックスを生成します。
フォーム表示するソースを作成する
今回は、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ですね。