Djangoを勉強してみる_フォームを学ぶ_その2(入門編)

django-339744_640.png Django

前回の続きで、Djangoについて学んでいきます。

今回は引き続きフォームについて勉強していきます。

Djangoの勉強内容は以下の本を参考にしています。

参考

Python Django3超入門 (日本語) 単行本 – 2020/6/13 掌田 津耶乃 (著)

フォームを使う

コードは以前の記事を参考にしてください。

Djangoを勉強してみる(入門編)

Djangoを勉強してみる(入門編その2)

Djangoを勉強してみる_urlを学ぶ(入門編)

Djangoを勉強してみる_テンプレートを学ぶ(入門編)

Djangoを勉強してみる_テンプレートを学ぶ_その2(入門編)

Djangoを勉強してみる_フォームを学ぶ_その1(入門編)

DjangoのFormクラスを使ってみる

前回HTMLのFormタグを使ってフォームを作成しましたが今回はDjangoのFormクラスを利用してみます。

DjangoのFormクラスを利用するために、まずはforms.pyを作成します。

1.forms.pyを新規作成

ファイル:sample_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')

ここでは、フォームとして、名前、メール、年齢のフォームを準備しています。

DjangoのFormを利用するときの方法は以下のようになります。

class クラス名(forms.Form):
変数 = フィールド
  変数 = フィールド
  ・・・

フィールドには色々種類があります。今回はCharFieldとIntegerFieldを使っています。

CharFieldはテキストを入力するフィールドです。
IntegerFieldは整数の値を入力するフィールドです。

2.views.pyを修正する

続いては先ほど作成したフォームを利用するために、views.pyを修正します。

ファイル:sample_app>hello>views.py

コード:

from django.shortcuts import render
from django.http import HttpResponse
from .forms import HelloForm #追加

def index(request):
    params = {
        'title': 'Hello World!!',
        'msg': 'これはサンプルページです。',
        'form': HelloForm(), #追加
    }
#以下を追加---- if (request.method == 'POST'): params['msg'] = '名前:' + request.POST['name'] + \ '<br>メール:' + request.POST['mail'] + \ '<br>年齢:' + request.POST['age'] params['form'] = HelloForm(request.POST)
#ここまで----- return render(request, 'hello/index.html', params)

HelloFormを利用する場合は、paramas変数に「’form’: フォーム名」を指定します。

また、if文以降はフォームの情報をPOSTで受けとった場合に処理をするようになります。

コードの内容としては、params変数のmsgとformの内容をPOSTで受け取った値に上書きしています。

3.index.htmlを修正する

最後にフォームをテンプレートに表示させます。

ファイル:sample_app>hello>templates>hello>index.html

コード:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ msg | safe }}</p> #修正
    <form action="{% url 'index' %}" method="post"> #修正
        {% csrf_token %}
        {{ form.as_p }} #追加
        <input type = "submit" value="click">
    </form>
    <a href ="{% url 'index' %}">INDEXへ</a>
</body>
</html>

{{ msg | safe }}のsafeとはmsg変数を出力するときに、HTMLタグが含まれている時にエスケープ処理を行わずに、HTMLタグと理解してくれるものです。

そのため、もしsafeを使っていないとPOSTされた結果のmsgが次のようになり、HTMLコードがメッセージとして処理されてしまいます。

「名前:nameの値<br>メール:mailの値<br>年齢:ageの値」

テンプレートでフォームを呼び出すときも同様に{{  }}でフォームを利用します。

ただし、通常Formを生成する場合は、pタグやtableタグなどでくくって表示させます。
Djangoにはそのタグを利用するための機能が用意されています。
.as_pがそれを使うための書き方になります。

{{ form.as_p }}:ラベルとフィールド全体をpタグでくくる
{{ form.as_table }}:ラベルとフィールとのタグをtrとtdでくくる
{{ form.ul }}:ラベルとフィールド全体をliタグでくくる

以上で設定が終わったので、動作確認してみます。

動作確認

python manage.py runserver

ブラウザで以下にアクセスします。

http://localhost:8000/hello

フォームが表示されました。

次はこのフォームに以下を入力してクリックを押してみます。

name:shin
mail:hoge@hoge.co.jp
age:36

 

入力した文字がページに表示されました。

これで今回の目的であるDjangoのフォームを使うことができました。

次回はその他のフォームの種類を使ってみたいと思います。

以上です。ありがとうございました。

P.S.

勉強を継続することが苦手ですか?

少し前からココナラというサービスで習慣化のテクニックについて教えるサービスを始めました。

もし、いつも3日坊主で終わってしまうという方や、ダイエットを続けたい、勉強したい、運動したいなど何か習慣化したいと思っている方がいましたら全力でサポートしますので、まずは覗いてみてください。

すでに何人かの方に実践してもらって効果が出ているという感想をいただいてます。

人生変わる?【習慣化の方法】を教えます 【残り1名】ダイエット、勉強、運動を続けることが苦手ですか?

コメント

タイトルとURLをコピーしました