インタラクティブな値のやり取り (3/4)
作成:2017-12-23 09:02
更新:2017-12-23 09:02
更新:2017-12-23 09:02
■フォームを送信する
続いて、フォームの送信についてです。やはりユーザーとのやり取りといえば、フォーム利用が基本でしょう。フォームの送信処理は、基本的にはビュー用関数側で行うのですが、テンプレート側で要するフォームにも少しだけ注意が必要になります。
まずは、テンプレート皮から作りましょう。「templates」内の「hello」内にあるindex.htmlを開き、下のリスト欄のように内容を書き換えて下さい。ここでは、入力フィールドが１つだけのごく簡単なフォームを用意してあります。
フォームは、このように定義されています。そのまま、/helloにアクセスしています。ということは、そのままindexで送信時の処理も行うことになります。
その後にある、この文が重要です。これは、CSRF対策と呼ばれるものを追加するものです。CSRFというのは「クロスサイト・リクエストフォージェリー」というもので、わかりやすくいえば、外部からプログラムなどでフォームを擬して行われる攻撃のことです。
こうした攻撃への対応策として、この {% csrf_token %} という文を記述しておきます。これは「トークン」と呼ばれるランダムな文字列を生成するもので、これにより、「送られてきたフォームが、ちゃんとフォームから送信されたものか、プログラムが自動的に実行したものか」が判断できるようになっているんですね。
その後にある<input>文では、valueに値を設定してあります。この文ですね。
これで、current_nameという値をvalueに設定して表示します。ということは、ビュー用関数側で、current_nameに送信された入力フィールドの値を用意しておけば、記入した値が入力フィールドに再表示されるようになる、というわけです。
まずは、テンプレート皮から作りましょう。「templates」内の「hello」内にあるindex.htmlを開き、下のリスト欄のように内容を書き換えて下さい。ここでは、入力フィールドが１つだけのごく簡単なフォームを用意してあります。
<form action="/hello/" method="post">
フォームは、このように定義されています。そのまま、/helloにアクセスしています。ということは、そのままindexで送信時の処理も行うことになります。
{% csrf_token %}その後にある、この文が重要です。これは、CSRF対策と呼ばれるものを追加するものです。CSRFというのは「クロスサイト・リクエストフォージェリー」というもので、わかりやすくいえば、外部からプログラムなどでフォームを擬して行われる攻撃のことです。
こうした攻撃への対応策として、この {% csrf_token %} という文を記述しておきます。これは「トークン」と呼ばれるランダムな文字列を生成するもので、これにより、「送られてきたフォームが、ちゃんとフォームから送信されたものか、プログラムが自動的に実行したものか」が判断できるようになっているんですね。
その後にある<input>文では、valueに値を設定してあります。この文ですね。
<input id="name" type="text" name="name" value="{{current_name}}">これで、current_nameという値をvalueに設定して表示します。ということは、ビュー用関数側で、current_nameに送信された入力フィールドの値を用意しておけば、記入した値が入力フィールドに再表示されるようになる、というわけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hello/index</title>
<link rel="stylesheet" type="text/css"
href="{% static 'hello/style.css' %}" />
</head>
<body>
<h1>hello/index</h1>
<p>{{msg}}</p>
<form action="/hello/" method="post">
{% csrf_token %}
<label for="name">name: </label>
<input id="name" type="text" name="name"
value="{{current_name}}">
<input type="submit" value="OK">
</form>
</body>
</html>
※関連コンテンツ