トップへ
田村研究室

インターネット利用技術演習

2009年度

メニュー

目次

2009
5/18

入力フォーム

入力フォーム

「入力フォーム」とは、HTMLで規定されている、ページ上にボタンや選択肢・入力用の窓などを表示させ、ユーザが指示したり記述した情報をwebサーバへ送信するための仕組みである。サーバ側では、受け取った情報を元に何か処理を行う。

    　　　
  • 例: アンケートを収集し、データベースへ登録する。
    • 　　　
  • 例: ユーザが指示した商品に関する情報をデータベースから取得して、表 示

通常CGIスクリプトと組み合わせて使用する。(CGIスクリプト:サーバ側で動作する自動処理を記述したもの次回以降に説明)

入力フォームの基本形

入力フォームは基本的に次のように記述する

<FORM ACTION= "データの送信先のURL" METHOD="GET(またはPOST)">
      <INPUT>タグ
      <SELECT>タグ
      <TEXTAREA>タグ
        のどれか，またはその組み合わせ
</FORM>

この<form>タグは，入力してもらいたい情報一組にひとつだけでよく，通常1ページには1つだけ記述する．例えばアンケートページやショッピングカートの画面で，それをまとめて1つだけ記述する．

1ページに複数の<form>タグを必要とするのは，例えば「新入生アンケート」と「購入希望アンケート」のように，まったく関係のない2つのアンケートを1ページに同時に用意するような場合だけであるが，そもそも複数のアンケートを1ページに書くとわかりにくくなるため推奨できない．

<form>タグのオプション指定には，ACTIONとMETHODが必要である．

    　　
  • ACTION　　どのページ(CGIスクリプト、メールソフトなどを含む)へ情報を受け渡すのか
    • URLの例: http://zzzzz.zzzzz.zzzz/hogehoge.cgi (通常CGIスクリプトファイルを指定)
    • ページ名の例: zzzzzzz.cgi (通常CGIスクリプトファイルを指定)
    • メールの例: mailto:zzzzzz@zzzzz.zzz.jp (普通のメールアドレス)
    　　
  • METHOD その方法
    • GET 一行分(短い情報)を受け渡す。例えば、
      • url?name1=.....&name2=.....
    • POST 制限無しの長い情報を受け渡す

<form>タグの内側には，次の3種類のタグの組合せを記述する．

INPUTタグ

INPUTタグは次の6つのタイプがある．関係する要素はNAMEに同じ項目名を書くこと．VALUEには初期値を書く．「CHECKED」キーワードが書かれた項目は，最初から選択された状態として扱われる．radioタイプの場合には，どれか一つだけをCHECKDにしておく．

送信されるデータは，「項目名=値」の形で送信される．textとpasswordタイプでは入力された文字データ，checkboxとradioでは「VALUE=」で設定されていた値が送信される．

  1. <INPUT TYPE="submit" VALUE="ボタンに表示する言葉(1)"> 最後に全情報を送信するためのボタン(どのフォームにも必ず1個必要)
    2. 　

  2. <INPUT TYPE ="reset"　VALUE="ボタンに表示する言葉(2)"> 入力情報のリセット(選択項目を初期状態に戻すためのボタン)

    3. 　　　
  3. <INPUT TYPE="text" NAME="項目名" VALUE="初期値(1)">文字入力のためのテキストボックスを表示

  4. <INPUT TYPE="password" NAME="項目名" VALUE="初期値(2)"> パスワード入力専用．タイプした文字が表示されない．
    ※textとpasswordでは必要ならば SIZE="数値" MAXLENGTH="数値"で文字数指定もできる
    5. sizeを指定した例: <input type="password" value="初期値(2)" name="項目4" size=20>

  5. <INPUT TYPE="checkbox" NAME="項目名1" VALUE="値A">　個別にチェックできる-ボックスを用意
    6.   
<OL>
  <LI><INPUT TYPE="checkbox" NAME="hogehoge" VALUE=1 >　項目の説明はここに書く</LI>
  <LI><INPUT TYPE="checkbox" NAME="hogehoge" VALUE=2 > 次の説明 </LI>                
</OL>
    • 項目の説明はここに書く
    • 次の説明
  6. <INPUT TYPE="radio" NAME="項目名1" VALUE="値A">　どれか1つを選択するボックスを用意
    ※checkboxとradioでは必要なら CHECKEDオプションも指定ができる
    7.   
<OL>
  <LI><INPUT TYPE="radio" NAME="hogehoge" VALUE=1 >　項目の説明はここに書く</LI>
  <LI><INPUT TYPE="radio" NAME="hogehoge" VALUE=2 checked > 最初から選択された例 </LI>                
</OL>
    • 項目の説明はここに書く
    • 最初から選択された例

SELECTタグ

セレクトタグは，複数の選択しの中から一つを選択するためのフォームを提供する．ただし「multiple」キーワードが指定されていると，複数選択を可能とする．optionタグで記述した選択肢の一覧のうち，一つにSELECTEDキーワードを書いておくと，それが最初に選択された状態で表示される．

送信されるデータは「選択肢全体の名前=値」の形で送信され，値には「VALUE=」で設定された値が格納される．

使用例

<SELECT NAME="選択肢全体の名前">
   <OPTION VALUE="値A">項目1</OPTION>
   <OPTION VALUE="値B">項目2</OPTION>
   <OPTION VALUE="値C" SELECTED>項目3</OPTION>
</SELECT>

<SELECT ....SIZE="数"></SELECT>で数で指定した行サイズでウィンドウ表示．

<SELECT ....MULTIPLE></SELECT>でもウィンドウ表示，さらにシフトキーを押しながらクリックすることで複数項目を同時選択可能になる．

表示例

標準的な例 MULTIPLE指定の例

TEXTAREAタグ

ある程度まとまった文章を入力可能なウィンドウを表示する．

使用例

<TEXTAREA NAME="項目名" ROWS="数" COLS="数">
     最初から表示しておくテキストの例
</TEXTAREA>

表示例

(応用)リンクボタンとしての入力フォーム

入力フォームのタグを，ただのリンクボタンとしても使用可能

使用例

<FORM METHOD="post" ACTION="リンク先のURL">
   <INPUT TYPE="submit" VALUE="リンク先を示す言葉">
</FORM>

表示例

サーバ側での情報の受け取り例

Webブラウザから入力フォームを通して情報を送信すると，その後，Webサーバ側がそれを受け取ることになる．例えばアンケートなどに利用することを考えれば，アンケートページの作成者がその情報を取得できないと意味がない．

Webサーバ側では，次回以降説明する「CGI」を介して情報を受け取ることが一般的である．しかし，一番簡単なのは，次のようにmailtoを利用して、メールとして受け取ることもできる．(mailtoに関してはその下の項目を参照)

この方法ならば，アンケートページ作成者が，指定したメールアドレスでメールを読むだけで，情報を取得することができる．

ただし、メールソフトによってはうまくフォームに入力した内容をうまく取り込めないようだ(例えばAL-Mail)。これに関してはOutlookExpressやthunderbirdではうまくいく。

　　
<FORM METHOD="POST"
  ACTION="mailto:メールアドレス" ENCTYPE="text/plain">
  <TEXTAREA NAME="report" ROWS="10" COLS="40">ここに初期メッセージ
  </TEXTAREA>
</FORM>

特殊なリンク方法(mailtoスキーム)

一番簡単に使える情報送信手段は，電子メールである．ページ中に存在するリンクをクリックすることでメールソフトを自動的に起動させる働きを持つ機能がある．

この機能は，mailtoスキームと呼ばれる．当然ブラウザ，および使用しているメールソフトがこの機能に対応していないと使うことができない．

使い方は次のとおり，特殊なリンクとして記述すればよい．

　<A HREF="mailto:メールアドレス"> リンクを説明する言葉</A>

件名などを指定させることも可能である。

　<a href="mailto:メールアドレス?subject=メールの件名となる言葉">

逆に，他人のページにこの機能が埋め込まれており，メールソフトが起動した際には，送信先をよく確認しなければならない．悪意を持った第三者に転送されてしまう可能性や，内容に必要以上の個人情報が取得されていないかどうかなどに特に注意すること．参考

応用例:Google検索ボックスの表示

以上の機能を組み合わせて，次のようなGoogleの検索ボックスを表示することができる

Google
WWW を検索 nit.ac.jp を検索

このボックスの表示方法はGoogle自身が紹介している