梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- フォームとの対話 -

フォームは、HTML 文書上に訪問者が書き込みできる入力欄や、選択できるリスト、 チェックするボタン、クリックするボタンなどを提供します。CGI 等の送信用に使われるほか、 JavaScript 等のプログラムを実行するための素材としても利用されます。

フォーム領域の開始

お名前

<FORM name="フォーム名" method="POST または GET" action="呼び出し先プログラムのアドレス" enctype="エンコード方式の指定">

methodactionenctype は送信プログラムの場合に使われる属性で、 スクリプト専用のフォームの場合は特に必要ありません。

隠しフィールド

<INPUT type="hidden" name="hidden1" value="sample">

隠しフィールドは CGI 等で送信されたデータの判別用に使われるもので、 フォームには表示されず、閲覧者が入力したり選択したりすることは出来ません。

一行入力欄

お名前
<INPUT type="text" name="text1" value="お名前を入れて下さい" size=30 maxlength=30>

一行入力欄の場合は INPUT タグの type 属性に "text" を指定します。

パスワード入力欄

パスワード
<INPUT type="password" name="password1" value="guest" size=20 maxlength=20>

一行入力欄と似ていますが、入力された文字が伏せ字で表示される点に違いがあります。

ラジオボタン

男性 女性

<INPUT type="radio" name="radio1" value="male" checked>男性
<INPUT type="radio" name="radio1" value="female">

複数ある中から1つだけ選択するボタンをラジオボタンと言います。 1つのグループに属する各ボタンは共通の name を持ち、value 属性によって個々を識別します。 事前に1つだけ選択させておく場合は checked 属性を入れます。

チェックボックス

WEB EXCEL WORD ボタン FLASH アイコン イラスト テープ素起こし CGI

<INPUT type="checkbox" name="checkbox1" value="WEB" checked>WEB
<INPUT type="checkbox" name="checkbox1" value="EXCEL">EXCEL
<INPUT type="checkbox" name="checkbox1" value="WORD">WORD
<INPUT type="checkbox" name="checkbox1" value="BUTTONS" checked>ボタン
<INPUT type="checkbox" name="checkbox1" value="FLASH">FLASH
<INPUT type="checkbox" name="checkbox1" value="ICONS">アイコン
<INPUT type="checkbox" name="checkbox1" value="ILLUSTRATION">イラスト
<INPUT type="checkbox" name="checkbox1" value="TAPE_REWRITING">テープ素起こし
<INPUT type="checkbox" name="checkbox1" value="CGI">CGI

複数選択可能なボタンをチェックボックスと言います。 1つのグループに属する各ボタンは共通の name を持ち、value 属性によって個々を識別します。 事前に選択させておく場合は checked 属性を入れます(複数可)。

コンボボックス

<SELECT name="select1">
<OPTION value="Windows">Windows
<OPTION value="Macintosh">Macintosh
<OPTION value="Linux">Linux
<OPTION value="Others">その他
</SELECT>

右の▼ボタンをクリックして項目を選択させるコントロールをコンボボックスと言います。 必ず <SELECT>〜</SELECT> タグで囲み、各項目を <OPTION> タグとその value 属性で規定します。 どれかの OPTIONselected 属性を入れると、それが初期表示されます。 selected 属性を設定しない場合は、一番上の項目が自動的に selected となります。

リストボックス

<SELECT name="select2" multiple>
<OPTION value="programming">プログラミング
<OPTION value="web_designing">ウェブ・デザイニング
<OPTION value="typing">文字入力
<OPTION value="others">その他
</SELECT>

選択できる項目が一覧表示されるコントロールをリストボックスと言います。 必ず <SELECT>〜</SELECT> タグで囲み、各項目を <OPTION> タグとその value 属性で規定します。 <SELECT>〜</SELECT> タグに multiple 属性を付ける点が、コンボボックスとの違いです。

実はコンボボックスとリストボックスの違いは外見よりも、項目を複数選択できるかどうかにあり、 複数選択できるものがリストボックスです。複数選択できないリストボックスにするには、multiple 属性を付けず、 代わりに size 属性で表示される項目数を指定して下さい。 またリストボックスでは、OPTIONselected 属性を指定しておくか、 閲覧者が項目を選択しない限り selected は取得されません。

複数行入力欄

<TEXTAREA name="textarea1" cols=40 rows=5 wrap="physical">ご感想をどうぞ</TEXTAREA>

複数行入力欄は <TEXTAREA>〜</TEXTAREA>タグで設定します。 初期入力テキストがある場合は開始タグと終了タグの間に入れます。 cols で1行文字数を、rows で行数を規定します。wrap 属性は、"off" のときワードラップをオフにし、 "physical" のときワードラップをオンにします。"virtual" にすると、ワードラップした状態で表示されますが、 送信されたテキストは入力されたままを返します。

コマンドボタン

<INPUT type="submit" value="送信"> <INPUT type="reset" value="クリア">

"submit" は FORMaction 属性で指定したプログラムにデータを送信するボタンを規定します。 "reset" は 入力または選択されたデータをすべて初期設定に戻すボタンを規定します。

そのほかの一般的なコマンドボタンは type 属性に "button" を指定し、 onClick 属性でその機能を指定します。

<INPUT type="button" value="データチェック" onClick="dataCheck()">

「データチェック」ボタンをクリックすると JavaScript によりフォームの全データ内容を取得して下に表示します。

以下にスクリプトのソースを示します。 これにより、個々のデータにどのようにアクセスするかを学び取って下さい。

<SCRIPT type="text/javascript">
<!--
  var N = "\n";;
  // 変数 N を改行コードに設定

  function dataCheck( ) {
    var res="";
    // データ内容を格納する変数 res

    with (document.sampleForm) {
      res += name + " のデータ" + N + N;
      // フォーム名を取得

      res += "method=" + method + N;
      // フォームの method を取得

      res += "action=" + action + N;
      // フォームの action を取得

      res += "enctype=" + encoding + N + N;
      // フォームの enctype を取得

      res += hidden1.name + "=" + hidden1.value + N + N;
      // 隠しフィールド名とそのデータ

      res += text1.name + "=" + text1.value + N + N;
      // 一行入力欄名とそのデータ

      res += password1.name + "=" + password1.value + N + N;
      // パスワード入力欄名とそのデータ

      for ( i = 0; i < radio1.length; i++) {
        res += radio1[ i ].name + "[" + i + "]=" + radio1[ i ].value;
        if ( radio1[ i ].checked ) res += " (checked)";
        res += N;
      }
      // ラジオボタンの各データとチェックされているかどうかを取得
      res += N;

      for ( i = 0; i <checkbox1.length; i++) {
        res += checkbox1[ i ].name + "[" + i + "]=" + checkbox1[ i ].value;
        if ( checkbox1[ i ].checked ) res += " (checked)";
        res += N;
      }
      // チェックボックスの各データとチェックされているかどうかを取得
      res += N;

      for ( i = 0; i <select1.options.length; i++) {
        res += select1.name + "[" + i + "]=" + select1.options[ i ].text;
        if ( select1.options[ i ].selected ) res += " (selected)";
        res += N;
      }
       // コンボボックスの各データと選択されているかどうかを取得
      res += N;

     for ( i = 0; i < select2.options.length; i++) {
        res += select2.name + "[" + i + "]=" + select2.options[ i ].text;
        if ( select2.options[ i ].selected ) res += " (selected)";
        res += N;
      }
      // リストボックスの各データと選択されているかどうかを取得
      res += N;

      res += textarea1.name + "=" + textarea1.value;
      // 複数行入力欄名とそのデータ
    }
    document.output.data_results.value = res;
  }
//-->
</SCRIPT>

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved