HTMLフォームには、入力値のチェックや必須の有無を確認する手段が用意されていません。それらを行うためには、別途JavaScript等のブラウザ上で動作するスクリプトを作って入力値を検査するか、SUBMIT先のサーバー処理で値のチェックを行うプログラムを作成する必要があります。ColdFusionに用意されているフォーム機能を使用すると、HTMLフォームの機能を拡張し、それらのチェックを行うプログラムを自動で作成する便利な機能が用意されています。

ColdFusionフォームについて

ColdFusionフォームは、HTMLフォーム、Flash フォーム、スキン XML フォームの３つの種類を作成することができますが、今回の説明では、HTMLフォームのみご紹介します。ColdFusionフォームを使用すると、出力結果としてHTMLフォームとJavaScriptが生成されます。生成されるJavaScriptによって、入力値のチェックやAjax連携など、HTMLフォームの機能を拡張してくれます。さらに、通常のHTMLフォームには無い、カレンダーや、グリッド、スライダー、ツリーも使用することができます。

<cfform>タグについて

既存のHTMLフォームの<form>・</form>タグを<cfform>または</cfform>タグに置き換えることで、ColdFusionフォームとなります。ColdFusionフォームでは、method="post"を自動で指定するため、<form>タグのように必ずmethod属性を指定する必要はありません。

<cfform action="postpage.cfm">
...
</cfform>

この状態では動作面ではHTMLフォームと違いはありませんが、この時点でJavaScriptも生成されています。上記の<cfform></cfform>のみを記載したページを実行すると画面上には何も表示されませんが、ColdFusionで処理が行われてHTMLフォーム＋JavaScriptが生成されて戻されてきています。ブラウザ上でマウスを右クリックしてブラウザのソースを表示した結果を下記に表示します。

自動で作成されるJavaScriptの機能を使って、入力値のチェックなどを行うことができます。

入力値のチェックについて

各入力項目の値をチェックするには、該当する入力項目をColdFusionで用意されているタグに置き換えます。ColdFusionには、<input>や<select>、<textarea>に相当する<cfinput>、<cfselect>、<cftextarea>タグが用意されています。例えば、必須で年齢を入力してもらいたい場合、ほとんどの場合は整数のプラスの値を入力して欲しいです。その場合、<cfinput type="text">でテキスト入力欄を設定して、さらに validate属性やrange属性、required属性を指定して入力値のチェックを行います。

<cfform action="postpage.cfm">
  年齢：<cfinput type="text" name="age" required="yes" validate="integer" range="0,130"
         message="年齢は整数で入力下さい" >
  <cfinput type="submit" name="submit" value="送信">
</cfform>

上記のコードを実行すると、下記のように入力欄が一つ表示されます。表示された入力欄に対し、適切な値を入力せずに SUBMITボタンを押した際に、JavaScriptによるエラーメッセージが表示されます

上記の入力値のチェックの他、ColdFusionフォームを使用することで、様々な機能の拡張が行えます。それら機能の詳細については、ColdFusionのオンラインマニュアルや、有償のColdFusionトレーニングの受講をご検討下さい。