JavaScriptとフォームの使用

Javascriptは多くの帽子をかぶっています。JavaScriptを使用して特殊効果を作成できます。JavaScriptを使用すると、その意思決定機能を活用してHTMLページを「よりスマート」にすることができます。また、JavaScriptを使用してHTMLフォームを拡張できます。この最後のアプリケーションは特に重要です。JavaScriptが身につけることができるすべての帽子の中で、そのフォーム処理機能は最も求められ、使用されています。

Webパブリッシャーの心には、CGIという3つの文字ほど恐れを感じるものはありません。CGI(Common Gateway Interfaceの略)は、クライアント(ブラウザー)からサーバーにデータを安全に転送するためのメカニズムです。これは通常、HTMLフォームからサーバーにデータを転送するために使用されます。

JavaScriptを使用すると、サーバーを呼び出さずに単純なフォームを処理できます。また、フォームをCGIプログラムに送信する必要がある場合は、入力を検証してユーザーがすべてのiにドットを付けていることを確認するなど、JavaScriptにすべての予備要件を処理させることができます。このコラムでは、JavaScriptのフォームオブジェクトの使用方法、フォームコンテンツの読み取りと設定の方法、フォームコントロールを操作してJavaScriptイベントをトリガーする方法など、JavaScriptとフォームの接続について詳しく説明します。また、JavaScriptを使用してフォーム入力を検証し、フォームをCGIプログラムにサミングする方法についても説明します。

JavaScriptを学ぶ

この記事は、JavaWorldテクニカルコンテンツアーカイブの一部です。JavaScriptシリーズの記事を読むことで、JavaScriptプログラミングについて多くを学ぶことができますが、一部の情報は古くなっている可能性があることに注意してください。JavaScriptを使用したプログラミングの詳細については、「JavaScriptの組み込みオブジェクトの使用」および「JavaScriptプログラムのデバッグ」を参照してください。

フォームの作成

ストレートHTMLフォームとJavaScript拡張フォームの違いはほとんどありません。主なものは、JavaScriptフォームがonClickやonSubmitなどの1つ以上のイベントハンドラーに依存していることです。これらは、ユーザーがボタンをクリックするなど、フォームで何かを行うとJavaScriptアクションを呼び出します。HTMLフォームタグの残りの属性とともに配置されるイベントハンドラーは、JavaScriptをサポートしていないブラウザーには表示されません。この特性のため、JavaScriptブラウザと非JavaScriptブラウザの両方に1つのフォームを使用できることがよくあります。

一般的なフォームコントロールオブジェクト(「ウィジェット」とも呼ばれます)には、次のものがあります。

  • テキスト行を入力するためのテキストボックス
  • アクションを選択するためのプッシュボタン
  • オプションのグループから1つを選択するためのラジオボタン
  • 単一の独立したオプションを選択または選択解除するためのチェックボックス

これらのコントロール(ウィジェット)のすべての属性と、それらをHTMLで使用する方法をわざわざ列挙することはしません。HTMLに関するほとんどのリファレンスは、詳細を提供します。JavaScriptで使用する場合は、フォーム自体と使用する各コントロールの名前を常に指定することを忘れないでください。名前を使用すると、JavaScriptで強化されたページでオブジェクトを参照できます。

典型的な形はこのようになります。フォーム自体を含むすべてのフォームコントロールにNAME =属性を指定したことに注意してください。

 Enter something in the box:

  • FORM NAME = "myform"は、フォームを定義して名前を付けます。JavaScriptの他の場所では、myformという名前でこのフォームを参照できます。フォームに付ける名前はあなた次第ですが、JavaScriptの標準の変数/関数の命名規則(スペース、アンダースコア以外の奇妙な文字など)に準拠している必要があります。
  • ACTION = ""は、サーバー上で実行されているCGIプログラムにフォームが送信されたときに、ブラウザーがフォームをどのように処理するかを定義します。この例は何も送信するように設計されていないため、CGIプログラムのURLは省略されています。
  • METHOD = "GET"は、フォームが送信されたときにサーバーに渡されるメソッドデータを定義します。この場合、サンプルフォームは何も送信しないため、属性は膨らみます。
  • INPUT TYPE = "text"は、テキストボックスオブジェクトを定義します。これは標準のHTMLマークアップです。
  • INPUT TYPE = "button"は、ボタンオブジェクトを定義します。これは、onClickハンドラーを除いて標準のHTMLマークアップです。
  • onClick = "testResults(this.form)"はイベントハンドラーです。イベントを処理します。この場合はボタンをクリックします。ボタンがクリックされると、JavaScriptは引用符内の式を実行します。この式は、ページの他の場所でtestResults関数を呼び出し、現在のフォームオブジェクトを渡すことを示しています。

フォームオブジェクトから値を取得する

フォームオブジェクトから値を取得してみましょう。ページを読み込んでから、テキストボックスに何かを入力します。ボタンをクリックすると、入力した内容がアラートボックスに表示されます。

リスト1.testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

スクリプトの仕組みは次のとおりです。フォームのボタンをクリックすると、JavaScriptはtestResults関数を呼び出します。 testResults関数は、構文this.formを使用してフォームオブジェクトに渡されます(thisキーワードはボタンコントロールを参照します。formはボタンコントロールのプロパティであり、フォームオブジェクトを表します)。私は、フォームオブジェクトに名前を与えてくれたフォームtestResult関数内に、しかし、あなたはどのようにあなたに名前を付けることができます。

testResults関数は単純です。テキストボックスの内容をTestVarという名前の変数にコピーするだけです。テキストボックスの内容がどのように参照されているかに注目してください。使用したいフォームオブジェクト(formと呼ばれる)、必要なフォーム内のオブジェクト(inputboxと呼ばれる)、および必要なオブジェクトのプロパティ(valueプロパティ)を定義しました。

JavaWorldのその他のアイテム

もっとプログラミングのチュートリアルやニュースが欲しいですか?JavaWorld EnterpriseJavaニュースレターを受信トレイに配信します。

フォームオブジェクトに値を設定する

上記の例に示されているinputboxのvalueプロパティは、読み取りと書き込みの両方が可能です。つまり、ボックスに入力されたものは何でも読み取ることができ、データをボックスに書き戻すことができます。フォームオブジェクトに値を設定するプロセスは、値を読み取るのとは逆です。これは、フォームのテキストボックスに値を設定する方法を示す短い例です。プロセスは前の例と似ていますが、今回は2つのボタンがあります。[読み取り]ボタンをクリックすると、スクリプトはテキストボックスに入力した内容を読み取ります。「書き込み」ボタンをクリックすると、スクリプトは特におかしなフレーズをテキストボックスに書き込みます。

リスト2.set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • [読み取り]ボタンをクリックすると、JavaScriptはreadText関数を呼び出します。この関数は、テキストボックスに入力した値を読み取って表示します。
  • When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box.

Reading other form object values

The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with:

  • Hidden text box (TYPE="hidden").
  • Radio button (TYPE="radio")
  • Check box (TYPE="checkbox")
  • Text area ()
  • Lists ()

Using Hidden Text Boxes

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

テキスト領域は、複数行のテキスト入力に使用されます。テキストボックスのデフォルトのサイズは、1行20文字です。COLS属性とROWS属性を使用してサイズを変更できます。幅40文字、行7行のテキストボックスがあるテキスト領域の典型的な例を次に示します。

JavaScriptを使用して、テキスト領域ボックスの内容を読み取ることができます。これは、valueプロパティを使用して行われます。次に例を示します。