CFINPUT | |||||||||||||||||||||||||||
説明
cfform タグ内で使用します。入力検証をサポートする入力コントロールをフォームに配置します。 |
|||||||||||||||||||||||||||
カテゴリ
フォームタグ | |||||||||||||||||||||||||||
シンタックス<cfinput name = "name" type = "input type" label = "text" style = "style specification" required = "yes"、"no" mask = "masking pattern" validate = "data type" validateAt= "onBlur"、"onServer"、"onSubmit" のうち 1 つ以上 message = "text" range = "min_value, max_value" maxlength = "number" pattern = "regexp" onValidate = "script name" onError = "script name" size = "integer" value = "initial value" bind = "bind expression" checked disabled = "true"、"false"、または属性値なし src = "image URL" onKeyUp = "JavaScript or ActionScript" onKeyDown = "JavaScript or ActionScript" onMouseUp = "JavaScript or ActionScript" onMouseDown = "JavaScript or ActionScript" onChange = "JavaScript or ActionScript" onClick = "JavaScript or ActionScript" firstDayOfWeek = "day name" dayNames = "days-of-the-week labels" monthNames = "month labels" enabled = "Yes"、"No" visible = "Yes"、"No" toolTip = "Tip text" height = "number of pixels" width = "number of pixels" > |
|||||||||||||||||||||||||||
関連項目
cfapplet、cfcalendar、cfform、cfformgroup、cfformitem、cfgrid、cfselect、cfslider、cftextarea、cftree |
|||||||||||||||||||||||||||
ヒストリ
ColdFusion MX 7:
ColdFusion MX: cfform タグの preserveData 属性の動作が変更されました。この属性が true に設定されている場合、ColdFusion は、ラジオボタンとチェックボックスの値が以前にそのコントロールに送信した値と一致する場合にのみチェックを付けます。以前のリリースでは、前に送信した値が cfinput のチェックボックスまたはラジオボタンのどれにも一致しない場合は、checked 属性の値が使用されていました。 次の表は、ColdFusion が直接使用する属性のリストです。このリストに記載されていない HTML form タグ属性もすべてサポートされ、ブラウザに直接渡されます。
|
|||||||||||||||||||||||||||
使用方法
このタグを正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。 cfform の preserveData 属性が true に設定されている場合で、フォームが同じページに戻されるときは、cfinput の value 属性や checked 属性ではなく、cfinput コントロールが以前に送信した値が使用されます。 キーボードを使用して、Flash の datefield 入力にアクセスし、この入力から日付を選択することができます。Tab キーを押してこのフィールドに移動し、スペースバーを押してメニューを表示します。上向き、下向き、左向き、および右向きの矢印キーを使用すると、選択した日付を変更することができます。Home キーと End キーを使用すると、月の開始日と終了日にそれぞれ進むことができます。Page Up キーと Page Down キーを使用すると、前月と翌月にそれぞれ進むことができます。
詳細については、cfform を参照してください。このタグで JavaScript の正規表現を使用する方法については、『ColdFusion MX 開発ガイド』の第27章の「cfform タグによるダイナミックフォームの作成」 を参照してください。 |
|||||||||||||||||||||||||||
検証
次のセクションでは、cfinput タグでの検証の実行方法について説明します。 検証メソッド ColdFusion では、cfinput の text および password フィールドの検証メソッドが 4 つ用意されています。 validateAt 属性で次のメソッドのいずれか 1 つまたは複数のメソッドを組み合わせて指定できます。
validate 属性を省略して、別の非表示フォームフィールドでフィールドの検証のタイプを指定することもできます。この検証のフォームは onServer 検証の場合と同じですが、フィールドで実行する検証ごとに異なるメッセージを指定することができます。以前の ColdFusion リリースとの間に後方互換性があります。非表示のフォームフィールド検証の使用方法の詳細については、cfform および 『ColdFusion MX 開発ガイド』の第28章の「非表示フィールドによるフォームデータの検証」 の「非表示フィールドによるフォームデータの検証」を参照してください。 検証のタイプ validate 属性で次の値を使用して、すべての検証メソッドの入力検証を指定することができます。ほとんどの属性は、パスワードフィールドまたはテキストフィールドにのみ適用されます。カンマ区切りリストで複数の検証タイプを指定できますが、意味があるのは一部の組み合わせだけです。
検証の違い : 前の表では、一般的な検証の動作について説明しています。基本となっている検証コードは、検証メソッドとフォームタイプによって異なっていなければなりません。したがって、次に示すように一部のケースでは、使用するアルゴリズムが異なります。
HTML 形式での onSubmit/OnBlur の動作を表で説明しています。OnServer 検証アルゴリズムの詳細については、『ColdFusion MX 開発ガイド』の第28章の「データ検証のタイプ」 の「データ検証のタイプ」を参照してください。 各検証タイプの利点と欠点など、検証の詳細については、『ColdFusion MX 開発ガイド』の第28章の「データの検証」 を参照してください。 |
|||||||||||||||||||||||||||
入力データのマスキング
mask 属性は、フィールドに入力できるデータの形式を制御します。フィールドにマスキングと検証を組み合わせて使用することができます。
ColdFusion はテキストフィールドに対し、リテラルマスク文字 (たとえば、電話番号における「-」) を自動的に挿入します。ユーザーは、フィールドの変数部分のみを入力する必要があります。 次のパターンにより、書式 EB-1234-c1-098765 のパーツ番号の入力が強制適用されます。ユーザーは、最初の数字 (3 など) を入力することにより入力を開始します。ColdFusion では、その前に EA 接頭辞が挿入されるだけでなく、すべての「-」文字も挿入されます。ユーザーは、4 桁の数字を入力する必要があります。その後に、2 個のアルファベット文字と 6 桁の数字を入力する必要があります。 <cfinput type="text" name="newPart" mask="EB-9999-XX-999999" />
type="datefield" を使用するタグ (および cfcalendar タグ) の場合、次のようにパターン文字の数によって出力の形式が決まります。
次のパターンは、Flash フォームが、datefield 入力コントロールを使って選択された日付を、04/29/2004 という書式のテキストとして ColdFusion に送信するよう指定します。 <cfinput name="startDate" type="datefield" label="date:"mask="mm/dd/yyyy"/> |
|||||||||||||||||||||||||||
Flash フォームデータのバインディング
bind 属性では、他のフォームフィールドのコンテンツをフォームフィールドに挿入することができます。cftextarea bind 属性で他のフィールドのテキストを指定するには、次の形式を使用します。 {sourceTagName.text} たとえば、次の業では firstName および lastName フィールドの値を使用して電子メールアドレスを作成します。ユーザーは、この値を変更したり、エントリを入力して置換したりすることができます。 <cfinput type="text" name="email" label="email" bind="{firstName.text}.{lastName.text}@mm.com"> |
|||||||||||||||||||||||||||
例<!--- この例では、cfform 内で cfinput を使用してテキスト項目の検証を簡単に 行う方法を示します。 ---> <cfform action = "cfinput.cfm"> <!--- 電話番号の検証 ---> 電話番号の検証 (正しい形式の電話番号を入力してください):<br> <cfinput type = "Text" name = "MyPhone" message = "電話番号を xxx-xxx-xxxx の形式で入力してください (例 : 617-761-2000)" validate = "telephone" required = "yes"> <font size = -1 color = red>必須</font> <!--- 郵便番号の検証 ---> <p>郵便番号の検証 (正しい形式の郵便番号を入力してください。): <br> <cfinput type = "Text" name = "MyZip" message = "郵便番号を xxxxx または xxxxx-xxxx の形式で入力してください。" validate = "zipcode" required = "yes"> <font size = -1 color = red>必須</font> <!--- 範囲の検証 ---> <p>範囲の検証 (1 ~ 5 の整数を入力してください):<br> <cfinput type = "Text" name = "MyRange" range = "1,5" message = "1 ~ 5 の整数を入力してください。" validate = "integer" required = "no"> <!--- 日付の検証 ---> <p>日付の検証 (正しい形式の日付を入力してください): <br> <cfinput type = "Text" name = "MyDate" message = "正しい形式の日付 (dd/mm/yy) を入力してください。" validate = "date" required = "no"> <input type = "Submit" name = "" value = "情報を送信"> </cfform> |
NAME | |
必須、 | |
すべて | |
フォーム入力要素の名前です。 |
TYPE | |
オプション、 | |
すべて | |
Default value: "text"
次のものを作成する入力コントロールタイプです。
|
LABEL | |
オプション、 | |
Flash および XML | |
Flash フォーム内でコントロールの横に配置するラベルです。button、hidden、image、reset、または submit の各タイプには使用しません。 |
STYLE | |
オプション、 | |
すべて | |
HTML 形式または XML 形式では、ColdFusion は style 属性をブラウザまたは XML に渡します。 Flash 形式では、CSS 形式のスタイル仕様でなければなりません。Flash スタイルの指定に関する詳細については、『ColdFusion MX 開発ガイド』の第29章の「Macromedia Flash 形式のフォームの作成」 を参照してください。 XML 形式では、ColdFusion は style 属性を XML に渡します。 |
REQUIRED | |
オプション、 | |
すべて | |
Default value: "no"
|
MASK | |
オプション、 | |
Flash および XML | |
ユーザーが入力できる文字パターンまたはフォームが ColdFusion に送信する文字パターンを制御するマスクパターンです。 HTML および Flash の場合 : type="text" のタグに使用します。マスク文字および対応する有効な入力文字は次のとおりです。
Flash の場合のみ : type="datefield" のタグに使用します。ColdFusion は、選択された日付をマスクパターンを使用して形式設定します。マスク文字は次のとおりです。
詳細については、「使用方法」の「入力データのマスキング」を参照してください。 |
VALIDATE | |
オプション、 | |
すべて | |
実行する検証のタイプです。形式に基づく、使用可能な検証のタイプとアルゴリズムです。詳細については、「使用方法」を参照してください。 |
VALIDATEAT | |
オプション、 | |
すべて | |
Default value: "onSubmit"
検証の実行方法です。次の中から 1 つ以上を指定します。
onBlur と onSubmit は、Flash フォームでは同じです。複数の値を指定する場合は、カンマ区切りのリストを使用します。 詳細については、「使用方法」を参照してください。 |
MESSAGE | |
オプション、 | |
すべて | |
検証に失敗した場合に表示されるメッセージテキストです。 |
RANGE | |
オプション、 | |
すべて | |
許容数値の最小値と最大値です。ColdFusion では、validate 属性で range を指定する場合に限り、この属性を使用します。 単一の値を指定するか、単一の値の後にカンマを付けて指定した場合、その値は最小値として処理されます。最大値はありません。カンマの後に単一の値を指定した場合、その値は最大値として設定されます。最小値はありません。 |
MAXLENGTH | |
オプション、 | |
すべて | |
type = "Text" または "password" の場合に、入力テキストの最大長を設定します。総合的な長さ検証の場合、validate 属性で maxlength 検証を指定します。それ以外の場合は、この属性を使用すると、ユーザーが指定の長さを超えて入力しないようにできますが、指定の長さを超えた値にペーストしないようにすることはできません。 |
PATTERN | |
validate = "regex"; の場合は必須 | |
(HTML および XML 形式の場合のみ) | |
入力を照合するための、JavaScript 正規表現のパターンです。ColdFusion では、validate 属性で regex を指定する場合に限り、この属性を使用します。 先頭および末尾のスラッシュ記号は削除されます。例とシンタックスについては、『ColdFusion MX 開発ガイド』の第27章の「cfform タグによるダイナミックフォームの作成」 を参照してください。 |
ONVALIDATE | |
オプション、 | |
HTML および XML のみ | |
ユーザー入力を検証するためのカスタム JavaScript です。このルーチンには、フォームオブジェクト、入力オブジェクト、および入力オブジェクトの値が渡されます。このルーチンは、検証に成功した場合は true、失敗した場合は false を返さなければなりません。この属性を使用する場合、validate 属性は無視されます。 |
ONERROR | |
オプション、 | |
HTML および XML のみ | |
検証に失敗した場合に実行するカスタム JavaScript 関数です。 |
SIZE | |
オプション、 | |
すべて | |
入力コントロールのサイズです。type = "radio" または "checkbox" の場合は無視されます。Flash フォームで指定した場合、ColdFusion はコントロール幅のピクセル値を指定サイズの 10 倍に設定し、width 属性を無視します。 |
VALUE | |
type の設定により異なる、 | |
すべて | |
HTML: HTML の value 属性に対応します。コントロールタイプに応じて使用します。 Flash: (オプション) ボタンタイプ入力のテキストを button、submit、および image の中から指定します。 |
BIND | |
オプション、Flash のみ | |
フィールドに他のフィールドからの情報を挿入する、Flash のバインド式です。詳細については、「使用方法」を参照してください。 |
CHECKED | |
オプション、 | |
すべて | |
Default value: "false"
radio コントロールまたは checkbox コントロールを選択します。
|
DISABLED | |
オプション、 | |
すべて | |
Default value: "not disabled"
ユーザー入力を無効にし、コントロールを読み取り専用にします。入力を無効にするには、属性を省略して disabled を指定するか、disabled="Yes" (または ColdFusion で使用する true などの正のブール値) を指定します。入力を有効にするには、属性を省略するか、disabled="No" (または ColdFusion で使用する false などの負のブール値) を指定します。 |
SRC | |
オプション、 | |
Flash および HTML | |
Flash の button、reset、submit、image の各タイプ、および HTML の image タイプに適用します。ボタンに使用するイメージの URL です。Flash では GIF イメージはサポートされません。 |
ONKEYUP | |
オプション、 | |
すべて | |
ユーザーがコントロールでキーボードのキーを離したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。 |
ONKEYDOWN | |
オプション、 | |
すべて | |
ユーザーがコントロールでキーボードのキーを押したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。 |
ONMOUSEUP | |
オプション、 | |
すべて | |
ユーザーがコントロールでマウスボタンを押したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。 |
ONMOUSEDOWN | |
オプション、 | |
すべて | |
ユーザーがコントロールでマウスボタンを離したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。 |
ONCHANGE | |
オプション、 | |
すべて | |
ユーザーのアクションに応じてコントロールが変わるときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。Flash の場合、datefield、password、および text の各タイプにのみ適用されます。 |
ONCLICK | |
オプション、 | |
すべて | |
ユーザーがコントロールをクリックしたときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。Flash の場合、button、checkbox、image、radio、reset、および submit の各タイプにのみ適用されます。 |
DAYNAMES | |
オプション、 | |
すべて | |
Default value: "S、M、T、W、Th、F、S"
datefield タイプにのみ適用されます。カレンダーに表示される曜日名を設定するカンマ区切りのリストです。日曜日 (Sunday) が先頭で、残りの曜日が通常どおりにその後に続きます。 |
FIRSTDAYOFWEEK | |
オプション、 | |
すべて | |
Default value: "0"
datefield タイプにのみ適用されます。カレンダーでその週の最初の曜日を指定する 0 ~ 6 の範囲の整数です。0 は日曜日、6 は土曜日を示します。 |
MONTHNAMES | |
オプション、 | |
すべて | |
Default value: "January、February、March、April、May、June、July、August、September、October、November、December"
datefield タイプにのみ適用されます。カレンダーの最上部に表示される月名のカンマ区切りのリストです。 |
ENABLED | |
オプション、Flash | |
Default value: "Yes"
コントロールを有効にするかどうかを指定するブール値です。無効なコントロールはライトグレーで表示されます。disabled 属性の反対です。 |
VISIBLE | |
オプション、Flash | |
Default value: "Yes"
コントロールを表示するかどうかを指定するブール値です。表示されないコントロールが使用するスペースは空白です。 |
TOOLTIP | |
オプション、Flash | |
マウスポインタをコントロールの上に置いたときに表示されるテキストです。 |
HEIGHT | |
オプション、「説明」を参照 | |
ほとんどの Flash のタイプに適用されます。一部のブラウザでは、HTML の image タイプに適用されます。コントロールの高さをピクセル単位で指定します。表示される高さは、指定したサイズよりも小さい場合があります。 |
WIDTH | |
オプション、「説明」を参照 | |
ほとんどの Flash のタイプに適用されます。一部のブラウザでは、HTML の image タイプに適用されます。コントロールの幅をピクセル単位で指定します。Flash フォームの場合、ユーザーが size 属性値も指定したときは、ColdFusion はこの属性を無視します。 |
DATE | |
validateAt="onServer" の場合、IsDate 関数で true を返す任意のデータ形式を使用できます。それ以外の場合は USdate と同じです。 | |
USDATE | |
mm/dd/yy、mm-dd-yy、または mm.dd.yy の書式を使用する米国の日付 (1 ~ 2 桁の月と日、1 ~ 4 桁の年を使用) です。 | |
EURODATE | |
dd/mm/yy の書式を使用する日付 (1 ~ 2 桁の月と日、1 ~ 4 桁の年を使用) です。区切り文字として /、-、または . を使用できます。 | |
TIME | |
時刻形式 (hh:mm:ss) です。 | |
FLOAT または NUMERIC | |
数値です。整数を許可します。 | |
INTEGER | |
整数です。 | |
RANGE | |
数値の範囲です。 | |
BOOLEAN | |
ブール値 (yes、no、true、false、または数値) に変換可能な値です。 | |
TELEPHONE | |
標準の米国電話番号の書式です。最初の 1 桁の長距離識別子、および最大 5 桁の内線番号を設定できます。x で始めることもできます。 | |
ZIPCODE | |
米国の 5 桁または 9 桁の郵便番号の書式 #####-#### です。セパレータにはハイフン (-) かスペースを設定できます。 | |
CREDITCARD | |
空白とダッシュは削除されます。mod10 アルゴリズムを使用して番号を検証します。番号は 13 ~ 16 桁指定する必要があります。 | |
SSN または SOCIAL_SECURITY_NUMBER | |
米国の社会保障番号の書式 ###-##-#### です。セパレータにはハイフン (-) かスペースを設定できます。 | |
name@server.domain の形式をとる有効な電子メールアドレスです。ColdFusion は、書式を検証するのみであり、エントリがアクティブで有効な電子メールアドレスかどうかはチェックしません。 | |
URL | |
有効な URL パターンです。http、https、ftp ファイル、mailto、および news URL をサポートします。 | |
GUID | |
Microsoft/DCE 形式に準拠する一意の識別子 (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) です。x には、16 進数の数値が入ります。 | |
UUID | |
ColdFusion の書式 xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx に準拠する UUID (Universally Unique Identifier) です。x には 16 進数の数値が入ります。 | |
MAXLENGTH | |
入力する文字を最大数以内に制限します。 | |
NOBLANKS | |
空白のみで構成されるフィールドを許可しません。 | |
REGEX または REGULAR_EXPRESSION | |
入力内容を pattern 属性と照合します。HTML および XML 形式でのみ有効です。Flash 形式では無視されます。 | |
SUBMITONCE | |
submit タイプおよび image タイプにのみ使用できます。次のページがロードされるまでの間、ユーザーが同じフォームを複数回送信しないようにします。たとえば、注文を送信するときに、その注文が確認されるまでは同じ注文を再度送信しないようにできます。HTML および XML 形式でのみ有効です。Flash 形式では無視されます。 | |