第4章 フォーム部品

フォームの部品にはテキストボックスと送信ボタン以外にさまざまなものがあります。 どれも使い方は似ています。ポイントとなるのは属性の意味です。

name属性は部品の名前を意味し、データを取得するときにpythonコード内で指定します。

value属性は送られてくるデータです。テキストボックスの場合、入力した内容が送られますが、ラジオボタンなどでは、送られるデータをvalue属性で指定します。

index.htmlの以下のフォームを書き換えて部品を試してみます。

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

1　テキストボックス

テキストボックスは１行のテキストを入力するときに使います。既にnameがshimeiのテキストボックスがあります。

<input type="text" name="shimei">

最初は空欄で表示されています。 もし、これに初期文字列を設定する場合、value属性 に指定します。

<input type="text" name="shimei" value="田中">

2　ラジオボタン

ラジオボタンは、複数の選択肢から１つを選択したいときに使います。type属性に radio を指定します。ポイントはname属性が同じものを複数作ることです。同じnameが指定されているものから１つを選ぶことになります。

送信ボタンを押したときに送られるデータは value属性 に指定します。

以下をフォーム内（submitボタンの上）に追加します。

性別：<input type="radio" name="sei" value="1" checked>男
      <input type="radio" name="sei" value="2">女<br>

初期状態で選択をしておきたい場合、checked 属性を付けます。

これを受け取って表示する方法はテキストボックスと同じです。部品にかかわらず同じように受け取って表示できます。 web.pyの以下を見てください。

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

ここに追加します。radioボタンはnameがseiですので、seiという名前で受け取ります。以下をreturnの前に追加します。

    sei = request.form['sei']

returnの行もseiを最後に付加するようにします。

    return render_template("form.html", shimei=shimei, sei=sei)

受け取ったデータはform.htmlで表示されます。form.htmlにも以下を追加します。

<p>性別：{{sei}}</p>

問題

index.htmlの計算フォームで、計算方法として「足し算」または「引き算」をラジオボタンで選べるようにしよう。nameはenzanとし、「足し算」を選択したときは「plus」、「引き算」を選択したときには、minusを送信する。

3　セレクトボックス

セレクトボックスは複数の選択肢から１つを選択します。ラジオボタンと機能は似ていますが、多数の選択肢がある場合、ラジオボタンは表示面積が大きくなってしまうのに対し、セレクトボックスは狭いままで可能です。

セレクトボックスは、２つのタグで実現されます。まず、selectタグで、これにname属性を指定します。このselectタグの中にoptionタグで選択肢を指定し、それを選択したときに送られるデータをvalue属性で指定します。

以下をフォーム内（submitボタンの上）に追加します。

<select name="ken">
    <option value="1">熊本県</option>
    <option value="2">福岡県</option>
    <option value="3">長崎県</option>
</select>
<br>

問題

セレクトボックスのデータをweb.pyで受け取って、form.htmlで表示しよう。

また、初期状態では最初のoptionタグが選択されます。それ以外を選択しておきたい場合、selected を付けます。

<select name="ken">
    <option value="1">熊本県</option>
    <option value="2" selected>福岡県</option>
    <option value="3">長崎県</option>
</select>

問題

index.htmlの計算フォームで、何倍にするかを選ぶセレクトボックスを付加します。１倍、２倍、３倍から選べるようにします。nameはbaiとします。計算結果を指定した数だけ倍にします。

4　テキストエリア

１行を入力するだけならテキストボックスでできますが、複数行を入力するとなるとテキストエリアを使う必要があります。

テキストエリアは textarea タグです。inputタグと違い、閉じタグがあります。これはタグで囲んだ文字列を初期値とするからです。

以下をフォーム内（submitボタンの上）に追加します。

<textarea  name="body" cols="40" rows="5"></textarea><br>

row属性、col属性はサイズを指定していてます。row属性が行数は、col属性、横幅の文字数です。

問題

テキストエリアのデータをweb.pyで受け取って、form.htmlで表示しよう。

5　隠れインプット

ユーザには見せずに、特定のデータを送りたいことがあります。そのようなときに使うのが、隠れインプットです。隠れインプットはinputタグでtype属性をhiddenにします。

以下をフォーム内（submitボタンの上）に追加します。

<input type="hidden" name="id" value="1">

問題

隠れインプットのデータをweb.pyで受け取って、form.htmlで表示しよう。

6　その他の部品

inputタグにはそのほかにtype属性が多数あります。これらの部品はHTML5から増えたものが多く、基本的にはテキストボックスと同様の使い方ですが、入力する内容を限定することが出来ます。

例えば、typeがnumberであれば、数字のみを入力するテキストボックスになります。

このようなtype属性には以下のようなものがあります。

type属性	入力内容
number	数字
tel	電話番号
url	URL
email	メールアドレス
date	日付
time	時間
datetime	日時
search	検索語
password	パスワード

また、HTML5からはinputタグに付け加えることが出来る新たな属性も増えています。

属性	機能
required	入力必須
placeholder="文字列"	文字列を薄く初期表示