第3章 データの入力

1　フォームの作成

ユーザがwebページから入力を行う際には、フォームを利用します。 フォームとはユーザが入力する一連の部品をまとめたものです。

フォームの部品は、テキストを入力するテキストボックスや送信ボタンなどがあります。

index.htmlに以下のようにフォームを作ります。

<form action="/form" method="post" >
氏名：<input type="text" name="shimei"><br>
<input type="submit" value="送信">
</form>

formタグで入力部品全体を囲みます。action属性にボタンを押したときの送信先URLを指定します。ここでは/formを指定しています。つまり、送信ボタンを押したら、/formにページが移り、ここで入力された内容が送られます。

formタグのもう１つの属性 method は get か post を指定します。これは入力した内容の送信方法の指定です。getの場合、送信内容がURLに含まれます。postの場合、ユーザには見えない形で送信されます。

formタグ内にはテキストボックスを作ります。inputタグの属性でtypeをtextにするとテキストボックスになります。inputタグのname属性でこのテキストボックスの名前を指定します。ここでは「shimei」と付けています。この名前をプログラム内で使用するのでname属性は必ず付けます。

次に送信ボタンを作ります。これもinputタグでtypeをsubmitにすると送信ボタンになります。value属性でボタンに表示される文字を指定します。

2　データの受け取り方

では、送られたデータを受け取るページを作ります。

formタグで　action="/form"　と指定したので、/formのページを作ります。 これまでは、@app.get(URL)でURLを指定し関数を作っていましたが、今回はフォームからpostで送信されるので、@app.post でURLを指定します。関数名は何でもいいですが、form_postとしています。

@app.post('/form')
def form_post():
    shimei = request.form['shimei']
    return render_template("form.html", shimei=shimei)

form_post関数内で request.form[名前] でフォームから送られたデータ shimei を受け取っています。名前はinputタグでname属性に指定したものです。

※注：formからgetで送信された場合にはrequest.args[名前] で受け取ります。

テンプレート form.htmlには shimei という名前でshimeiを渡しています。 form.htmlではこれまでと同じく以下のようにしてshimeiを表示します。

<p>氏名：{{shimei}}</p>

これを試すにはまず、http://127.0.0.1:5000/ にアクセスします。氏名に 「鈴木」 と入れて送信ボタンを押すと、ページが/formに遷移し、画面に送信結果が表示されます。

問題：年齢の入力

index.htmlのフォームで氏名以外に年齢も入力できるようにしよう。年齢はage という名前で送信し、これもform.htmlで表示できるようにしよう。

問題：計算フォーム

index.htmlにもう１つ別のフォームを作成し、数を２つ入力するようにします(num1とnum2)。ボタンを押したら /keisan_post にpostで送信します（関数名は keisan_post）。送られてきた数を足し算し、keisan.html で表示しよう。