cfform

説明

CFML カスタムコントロールタグを使用してフォームを作成します。CFML カスタムコントロールタグは、一般的な HTML フォーム入力要素より優れた機能を備えています。結果フォームを HTML または Flash コンテンツとしてクライアントページに含めることができます。フォームは XML および XSLT を使用して生成できます。

カテゴリ

フォームタグ

シンタックス

<cfform
   name = "name"
   action = "form_action"
   method = "POST"、"GET"
   format = "HTML"、"Flash"、"XML"
   skin = "Flash or XSL skin"
   style = "style specification"
   preserveData = "yes"、"no"
   onSubmit = "javascript"
   scriptSrc = "path"
   codeBase = "URL"
   archive = "URL"
次の属性は、Flash および XML でのみサポートされます。
width = "pixels"、"percent"
height = "pixels"、"percent"
次の属性は、Flash でのみサポートされます。
onError = "ActionScript code"
wMode = "window"、"transparent"、"opaque"
accessible = "yes"、"no"
preloader = "yes"、"no"
timeout = "seconds"
次の属性は、HTML および XML でのみサポートされます。
class = "form class"
enctype = "Internet media type"
id = "HTML id"
onload = "load event script"
onreset = "reset event script"
target = "target window or frame">
...
</cfform>

関連項目

cfapplet、cfcalendar、cfformgroup、cfformitem、cfgrid、cfinput、cfselect、cfslider、cftextarea、cftree、『ColdFusion MX 開発ガイド』の情報のリクエストと表示

ヒストリ

ColdFusion MX 7:

• ColdFusion MX Administrator で scriptSrc 属性のデフォルト値を設定できるようになりました。
• passthrough 属性は使用禁止になりました。このタグがすべての HTML form タグ属性を直接サポートするようになりました。
• method 属性が追加され、GET メソッドを使用できるようになりました。
• format、height、width、preloader、timeout、wMode、accessible、skin の各属性を含む Flash および XML 出力のサポートが追加されました。
• cfformgroup、cfformitem、および cftextarea の子タグが追加されました。

ColdFusion MX:

• enableCAB 属性は使用禁止になりました。今後のリリースではこのタグは機能せずエラーを引き起こす可能性があります。
• name 属性と action 属性はオプションになりました。
• 整数値を要求するための整数の検証が変更されました。以前のリリースでは、浮動小数点値が整数に変換されました。

属性

次の表は、ColdFusion が直接使用する属性のリストです。HTML 形式のフォームでは、このリストに記載されていない標準の HTML form タグ属性もこのタグでサポートされ、ブラウザに直接渡されます。ColdFusion には、XML でサポートされる HTML 属性もすべて含まれています。

メモ: XML でサポートされることが明記されていない属性は、ColdFusion MX で提供されるスキンでは処理されません。ただし、これらの属性は、生成された XML には form タグの html ネーム空間属性として含まれます。

使用方法

このタグには終了タグが必要です。

cfform タグ内で次の ColdFusion フォームコントロールタグを使用することができます。

• cfapplet: HTML 形式および XML 形式の場合にのみ使用します。登録された Java アプレットを埋め込みます。
• cfformgroup: Flash 形式および XML 形式の場合にのみ使用します。子コントロールをグループ化して整列します。
• cfformitem: Flash 形式および XML 形式の場合にのみ使用します。水平方向の基準、垂直方向の基準、およびテキストをフォームに追加します。
• cfgrid: 表形式のデータを表示するためのグリッドコントロールを作成します。
• cfinput: 入力要素を作成します。
• cfselect: ドロップダウンリストボックスを作成します。
• cfslider: HTML 形式および XML 形式の場合にのみ使用します。スライダコントロールを作成します。
• cftextarea: 複数行のテキスト入力ボックスを作成します。
• cftree: ツリーコントロールを作成します。

HTML 形式の場合はすべてのタグが、Flash 形式の場合は cftree タグと cfgrid タグが、ブラウザ上で JavaScript をサポートする必要があります。cfapplet タグおよびアプレット形式の cfgrid タグ、cfslider タグ、cftree タグでは、クライアントが Java アプレットをダウンロードする必要があります。

cfform タグで Flash 形式を指定した場合、ColdFusion はフォーム本文の HTML をすべて無視します。すべてのフォームコントロールに対して、cfinput などの ColdFusion タグを使用する必要があります。HTML 形式の cfform タグに、Flash 形式の個別の cfgrid コントロールおよび cftree コントロールを含めることができます。

Flash 形式の場合、フォームで機密データ (クレジットカード情報など) をリクエストしないときは、timeout 属性の設定を検討してください。この属性を設定すると、ユーザーがブラウザの [戻る] ボタンを使って元のフォームに戻るときに "フォームデータが期限切れになりました。このページをブラウザに再ロードしてください。" などのエラーメッセージが表示されないようにすることができます。詳細については、『ColdFusion MX 開発ガイド』のFlash フォームでのデータのキャッシュのFlash フォームでのデータのキャッシュを参照してください。

メモ: Flash 形式の場合、height 属性および width 属性を指定しないときは、ブラウザウィンドウの領域に等しいブラウザスペースが使用されます。フォームの後に他の出力が続く場合、ユーザーはスクロールしてその出力を表示しなければなりません。したがって、Flash フォームの後に他の出力を続けるときは、height および width の値を指定してください。

属性値のテキストに引用符が含まれる場合は、引用符を 2 つ続けて使用し、エスケープ処理する必要があります。

Flash フォームでの onError 属性の使用

onSubmit 検証または onBlur 検証を使用する場合、onError 属性を使用すると、検証エラーのある Flash フォームをユーザーが送信しようとするときに実行する ActionScript コードを指定することができます。次のとおりです。

• 1 つ以上の有効な Flash 式を指定した場合、Flash はその式を実行します。
• この属性を省略した場合、Flash は適用可能なすべてのエラーメッセージを含むダイアログボックスを表示します。
• onError="" (空の文字列) を指定した場合、Flash は何もメッセージを表示しませんが、フォームは送信されません。

ActionScript ではエラー変数を使用してフィールドおよびエラーを判別することができます。エラーオブジェクトには次のフィールドがあります。

次の例は、onError 属性を使用する cfform タグを示しています。このタグでは、無効なエントリが入力された lastName フィールドがある accordion または tabnavigator 内のタブを選択します。

<cfform name="form1" format="flash" width="800" height="500" 
      onError="if (errors['lastName'] != undefined
         ){tabA.selectedIndex=0; _root.lastName.setFocus();}">

HTML フォームタグと属性の併用

HTML 形式の場合、cfform タグを使用すると、次の標準の HTML 要素を組み込むことができます。これらの要素は、Flash 形式では無視されます。

• HTML form タグの標準の属性とその値。これらの属性と値は、cfform がページに出力する form タグに挿入されます。たとえば、cfform で target や onMouseOver のような form タグ属性を使用することができます。
• HTML form タグ内に通常指定できる HTML タグ。たとえば、HTML の input タグを使用して、cfinput の他の機能を使用せずに、cfform 内に [送信] ボタンを作成することができます。

  <cfform>
  	<input type = "Submit" value = " 送信... ">
  </cfform>
  

例

<h3>cfform の例</h3>
<!--- Form.oncethrough が存在する場合、フォームは送信されています。 --->
<cfif IsDefined("Form.oncethrough")>
   <cfif IsDefined("Form.testVal1")>
      <h3>ラジオボタンテストの結果</h3>
      <cfif Form.testVal1>ラジオボタンの応答は yes でした。
      <cfelse>ラジオボタンの応答は no でした。
      </cfif>
   </cfif>
   <h3>チェックボックステストの結果</h3>
   <cfif IsDefined("Form.chkTest2")>
      チェックボックスの応答は yes でした。
   <cfelse>
      チェックボックスの応答は no でした。
   </cfif>
   <cfif IsDefined("Form.textSample") AND Form.textSample is not "">
      <h3>クレジットカード入力の結果</h3>
      クレジットカード番号 <cfoutput>#Form.textSample#</cfoutput> は、
      MOD 10 アルゴリズムで有効でした。
   </cfif>
   <cfif IsDefined("Form.sampleSlider")>
      <cfoutput>
         <h3>このページに #Form.sampleSlider# の比率を指定しました。</h3>
      </cfoutput>
   </cfif>
   <hr noshade="True">
</cfif>

<!--- 最初に、cfform タグを呼び出します。 --->
<cfform name="cfformexample">
   <h4>この例は、cfinput のラジオボタン入力タイプです。</h4>
   Yes <cfinput type = "Radio" name = "TestVal1" value = "Yes" checked>
   No <cfinput type = "Radio" name = "TestVal1" value = "No">
   <h4>この例は、cfinput のチェックボックス入力タイプです。</h4>
   <cfinput type = "Checkbox" name = "ChkTest2" value = "Yes">
   <h4>これは cfinput テキストボックスのクライアントサイド検証の例です。</h4>
   (<I>この項目はオプションです。</i>)<br>
   クレジットカード番号を入力してください。
   <cfinput type = "Text" name = "TextSample"
      message = "クレジットカード番号を入力してください。"
      validate = "creditcard" required = "No">
   <h4>これは cfslider タグの使用例です。</h4>
   コントロールをスライドさせることによって、この例の承認を 1 ～ 10 で格付けします。<br>
   1 <cfslider name = "sampleSlider" width="100"
         label = "Page Value:" range = "1,10"
         message = "1 ～ 10 の値を入力してください。"> 10
   <p><cfinput type = "submit" name = "submit" value = "結果を表示">
   <cfinput type = "hidden" name = "oncethrough" value = "Yes"></p>
</cfform>

簡単な XML フォーム

次の例は、簡単な XML 形式のフォームを示しています。ColdFusion に同梱されている default.xsl 変換を使用して、表示する HTML 出力を生成します。

<cfform name="testXForm" format="XML" skin="basic">
  <!--- cfformgroup を使用して、名と姓を 1 つの行に挿入します。 --->
  <cfformgroup type="horizontal">
     <cfinput type="text" name="firstname" label="First Name:"value="Robert">
     <cfinput type="text" name="lastname" label="Last Name:"value="Smith">
  </cfformgroup>
  <cfinput type="password" name="password" label="Password:"value="">
  <cfinput type="hidden" name="hidden" label="hidden:"value="">
  <cfselect name="state" style="width:200" label="State">
    <option>California</option>
    <option selected>Utah</option>
    <option>Iowa</option>
    <option selected>New York</option>
   </cfselect>
   <cftextarea name="description" label="Description:"rows="5" cols="40">これはサンプルテキストです。</cftextarea>
</cfform>

ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX* | ColdFusion 5* | フォーラム* | デベロッパーセンター | サポート情報 | バグ報告

バージョン7