back

インタラクティブな値のやり取り (3/4)

■フォームを送信する

続いて、フォームの送信についてです。やはりユーザーとのやり取りといえば、フォーム利用が基本でしょう。フォームの送信処理は、基本的にはビュー用関数側で行うのですが、テンプレート側で要するフォームにも少しだけ注意が必要になります。

まずは、テンプレート皮から作りましょう。「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>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.