フォームの送信方法 Part 2 - Django

Django のフォーム機能を使う

Django には、フォームの作成機能が標準で用意されているため、その機能を使いフォームの送信を行います。

forms.py の作成

「 pythonApp/env/djnago_app/hello 」の中に、forms.py を作成します。

pythonApp/env/djnago_app/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">
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>{{ message|safe }}</p>
  <form action="{% url 'index' %}" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="click">
  </form>
</body>
</html>

pythonApp/env/djnago_app/hello/forms.py

from django import forms

class HelloForm(forms.Form):
  name = forms.CharField(label='name')
  mail = forms.CharField(label='mail')
  age = forms.IntegerField(label='age')

pythonApp/env/djnago_app/hello/urls.py

from django.urls import path
from . import views

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

pythonApp/env/djnago_app/hello/views.py

from django.shortcuts import render
from django.http import HttpResponse
from .forms import HelloForm

# Create your views here.
def index(request):
  params = {
    'message': 'your data:',
    'form': HelloForm()
  }

  if (request.method == "POST"):
    params['message'] = 'name:' + request.POST['name'] + '
mail:' + request.POST['mail'] + '
age:' + request.POST['age']
    params['form'] = HelloForm(request.POST)
  return render(request, 'hello/index.html', params)

フィールドをタグで整える

Form クラスには、フィールドのタグを他のタグでくくって出力する機能があります。

as_table	ラベルとフィールドのタグを<tr>と<td>でくくります。
as_p	ラベルとフィールド全体を<p>でくくります
as_ul	ラベルとフィールド全体を<li>タグでくくります

pythonApp/env/djnago_app/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">
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>{{ message|safe }}</p>
  <table>
    <form action="{% url 'index' %}" method="post">
      {% csrf_token %}
      {{ form.as_table }}
      <tr>
        <td></td>
        <td><input type="submit" value="click"></td>
      </tr>
    </form>
  </table>
  
</body>
</html>

出力されたソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/hello/css/style.css">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>your data:</p>
  <table>
    <form action="/hello/" method="post">
      <input type="hidden" name="csrfmiddlewaretoken" value="DeZT8s87dDLdDQR9JLEiLj31fcjmKAKA83L7QziYh4fIpgvW3TlOaEiQN0sESy9o">
      <tr>
    <th><label for="id_name">name:</label></th>
      <td>
        <input type="text" name="name" required id="id_name">
      </td>
    </tr>

    <tr>
      <th><label for="id_mail">mail:</label></th>
      <td>
        <input type="text" name="mail" required id="id_mail">
      </td>
    </tr>

    <tr>
      <th><label for="id_age">age:</label></th>
      <td>
        <input type="number" name="age" required id="id_age">
      </td>
    </tr>

    <tr>
      <td></td>
      <td><input type="submit" value="click"></td>
    </tr>
    </form>
  </table>
  
</body>
</html>

as_p を使う場合は、次のようにします。

pythonApp/env/djnago_app/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">
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>{{ message|safe }}</p>
  <form action="{% url 'index' %}" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="click">
  </form>
</body>
</html>

出力されたソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/hello/css/style.css">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>your data:</p>
  <form action="/hello/" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="n4RCAWsUyqmurNsrxpqLNJ2bv4eq4zxSSTDQi3CLCRQZdd6eRx7hc4h03SnIcxWG">
    <p>
    <label for="id_name">name:</label>
    <input type="text" name="name" required id="id_name">
  </p>
  
  <p>
    <label for="id_mail">mail:</label>
    <input type="text" name="mail" required id="id_mail">
  </p>

  <p>
    <label for="id_age">age:</label>
    <input type="number" name="age" required id="id_age">
  </p>
    <input type="submit" value="click">
  </form>
</body>
</html>

as_ul を使うには次のようにします。

pythonApp/env/djnago_app/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">
  <link rel="stylesheet" href="{% static 'hello/css/style.css' %}">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>{{ message|safe }}</p>
  <form action="{% url 'index' %}" method="post">
    {% csrf_token %}
    {{ form.as_ul }}
    <li><input type="submit" value="click"></li>
  </form>
  
</body>
</html>

出力されたソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/static/hello/css/style.css">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p>your data:</p>
  <form action="/hello/" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="3QghUnO0CFPWBi1ETEXCixaI4zNrSAt5yF2vCuYRG6jrnIFrdME8HSpxCnWJ0yST">
    <li>
      <label for="id_name">name:</label>
      <input type="text" name="name" required id="id_name">
    </li>

    <li>
      <label for="id_mail">mail:</label>
      <input type="text" name="mail" required id="id_mail">
    </li>

    <li>
      <label for="id_age">age:</label>
      <input type="number" name="age" required id="id_age">
    </li>
    
    <li><input type="submit" value="click"></li>
  </form>
  
</body>
</html>