フォームで送信

Django

index.htmlにフォームを用意

hello/templates/hello/index.htmlを修正し、簡単なフォームを用意する。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}" />
</head>
<body>
  <h1>{{title}}</h1>
  <p>{{msg}}</p>
  <form action="{% url 'form' %}" method="post">
    {% csrf_token %}
    <label for="msg">message: </label>
    <input id="msg" type="text" name="msg">
    <input type="submit" value="click">
  </form>
</body>
</html>

フォームの送信先

formタグの属性で

action="{% url 'form' %}"

とし、フォームの送信先を指定している。hello/urls.pyのurlpatternsには、これに対応するname="form"となるアドレスを追加する必要がある。

CSRF対策

{% csrf_token %}でCSRF(Cross-Site Request Forgeries)対策用のトークンを自動的に表示するテンプレートタグ。

ビュー関数の作成

hello/views.pyを変更する。

def index(request):
  params = {
    'title': 'Hello/Index',
    'msg': 'お名前は？',
  }
  return render(request, 'hello/index.html', params)

def form(request):
  msg = request.POST['msg']
  params = {
    'title': 'Hello/Form',
    'msg': 'こんにちは、' + msg + 'さん。',
  }
  return render(request, 'hello/index.html', params)

index関数が入口のアクセス、form関数がフォーム送信を受け取った時の処理。

form関数で、request.POST['msg']とあるのがフォーム送信されたデータからキー'msg'の値を取り出す操作。HTML側の inputタグname="msg"に対応したもの。

urlpatternsの修正

hello/urls.pyのurlpatternsを修正する。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('form', views.form, name='form'),
]

表示結果

http://localhost:8000/hello/にアクセスするとフォームが表示される

Hello/Index

お名前は？

フォームに名前、例えば'Foo'と入力してボタンクリックするとhttp://localhost:8000/hello/formに飛び、次のように名前が入ったメッセージが表示される。

Hello/Form

こんにちは、Fooさん。

ただこのやり方の場合は、indexとformという違うアドレスにアクセスしているので、フォームの入力内容を受けて表示された時には、フォームフィールドのユーザ入力値は消えてしまう。