formタグの使い方

July 16, 2020

概要

今回は、サーバーサイドとの架け橋となるフォームについて扱います。

フォームとは

フォームは、ユーザー側からサーバー側にデータを送信するために使います。基本的には、サーバー→ユーザーという方向で情報が伝播して行くのですが、フォームを用いることで逆方向の伝播を可能にします。皆さんは、あと何回かでPythonの基礎を終えて、Flaskに取り掛かると思うのですが、その際に特に重要となります。

フォームを作る方法

formタグ

フォームを作る方法は簡単です。なぜならば、formタグで括るだけだからです。

<form> 内容 </form>

formタグに指定できる主要な属性は2つあります。

  1. action="送信先のURL"
    データの送信先のURLを指定します。送信先？となるかもしれませんが、今はあまり気にしなくて大丈夫です。Pythonのプログラムと連携して動作させるので、その繋ぎをしていると思ってください。Flaskでフォームを暑かった時に詳しく説明します。
  2. method="送信方法"
    データの送信方法を指定します。値としてはgetまたはpostが指定できます。そういうものがあるのだなというぐらいに思っておいてください。とりあえずは、postにしておいてください。

さて、これでフォームができました、という風には簡単には行きません。formタグで大枠を作ったのみで、その中身を記述していないからです。では、その中身を扱っていきましょう。

inputタグ

inputタグは、テキスト入力欄や各種ボタンを作成します。属性で指定することによって、その役割を変えることができます。

主な属性

  1. type="部品の役割"（必須）　　 部品の役割を指定します。これによって、様々な役割を持つinputタグを使用することができるようになります。役割としては、主に以下ものが設定できます。（ダブルクォーテーションの間にこれらを指定します）

    値 役割
    text テキスト入力欄
    password パスワード入力欄
    checkbox チェックボックス
    radio ラジオボタン
    file ファイル送信用
    hidden 隠し入力欄
    submit 送信ボタン
    reset リセットボタン
    button 汎用ボタン
    image 画像の送信ボタン
  2. name="部品の名前"（必須）
    inputタグの名前を指定します。サーバに送信されるデータはこの名前とペアで送信されます。
  3. value="初期値orラベルor送信値"
    type属性で指定した役割が、テキスト入力欄の場合、value属性に指定した値は、その入力欄の初期値になります。ボタンの場合は、そのボタンに表示される文字になります。チェックボックスまたはラジオボタンの場合は、その項目を選択したときには、サーバーに送信される値になります。
  4. maxlength="最大の文字数
    テキスト入力欄の場合、これを指定すると、入力できる最大の文字数を指定できます。
  5. disabled
    inputタグを変更不可・選択不可にします。
  6. readonly
    inputタグを変、変更不可にします。

inputタグの使用例

textareaタグ

formタグに内包できる要素はinputタグだけではありません。textareaタグは、複数行のテキスト入力欄を作れます。inputタグでも、テキスト入力欄は作れましたが、それらは全て一行の入力欄でした。

主な属性

  1. "cols="文字数"
    1行の文字列を指定します。デフォルトは20です。
  2. "rows="行数" 行数を指定します。デフォルトは2です。
  3. "name="部品の名前"
  4. "maxlength="最大の文字数"
  5. "readonly"
  6. "disabled"

また、textareaタグはその中に記述したテキストが初期テキストとなります。inputタグとは違って、value属性で指定するわけではないので気をつけてください。

textareaタグの使用例

buttonタグ

buttonタグはボタンを生成します。inputタグでも（value="button"を指定すると）ボタンは作成できましたが、buttonタグはそれよりもさらにボタンに特化しています。基本的にはinputタグではなくbuttonタグでボタンを生成するのが良いでしょう。

主な属性

  1. type="ボタンの種類"
    ボタンの種類を指定できます。ボタンの種類は以下の三種類があります。

    値 ボタンの種類
    submit 送信ボタン
    reset リセットボタン
    button 汎用ボタン
  2. name="部品の名前"
  3. disabled
  4. value="送信値"

buttonタグの使用例

selectタグ

selectタグは少し特殊で、それ単体で使用するのではなく、optionタグと共に使用します。例えば、次のような方法です。

<select>
    <option>項目1</option>
    <option>項目2</option>
    <option>項目3</option>
</select>

このようにすることで、3つの項目の中から1つを選ぶと言ったメニューバーを作成できます。

selectタグに指定できる主な属性

  1. name="部品の名前"
  2. size="行数" 一度に見られる項目の数を指定します。
  3. multiple 複数の項目を選択できるようになります。
  4. disabled

optionタグに指定できる主な属性

  1. value="送信値"
  2. selected これが設定された項目はデフォルトで選択された状態になります。
  3. disabled

課題

以下の設問に答えよ。

  1. チェックボックスとラジオボタンを作成し、その違いを確認せよ。
  2. buttonタグを使用したボタン作成と、inputタグを使用したボタン作成にはどのような違いがあるか、それぞれ作成してみて確かめよ。
  3. inputタグにtype="hiddenすると、そのinputタグは画面上に表示されなくなる。これは、どのような用途に使われるか調べよ。
  4. inputタグでテキスト入力欄を作成し、初期値が入力されている状態にせよ。
  5. textareaタグのcols属性の値を変更すると、どうなるか確かめよ。
  6. あなたはサークル運営をしており、メンバーの基本情報を集めたい。そのための、自作のフォームを作成しなさい（極力たくさんの種類のフォームを使用しなさい、個人情報になりうる情報は要求しないこと）。