Powered by SmartDoc

フォーム

CKForm

フォームを生成します。フォームに関するエレメントはCKForm内にないと動作しないので注意して下さい。必須属性はありません。

ファイルのアップロードを行うには、enctype属性に"multipart/form-data"を設定するか、fileupload属性をtrueに設定します。マルチパートフォームを設定しても、フォームデータは通常の文字列(Stringクラス)として扱われますが、CKFileUploadで扱うデータ(Content-Typeが設定されているデータ)のみCKByteDataオブジェクトとして扱われます。

CKFormの属性
属性 データ型 説明
method String フォームデータの送信方法。POSTまたはGETを選択する。何も設定しないとPOSTになる。
enctype String フォームデータのエンコード方法。CKFileUploadを使う場合に"multipart/form-data"を設定する。
href String フォームデータを送信するプログラムを直接指定する。action属性より優先される。
target String フレームを指定する。
query Hash URLに付加するクエリ文字列。
fileupload true/false trueを設定すると、enctype属性に"multipart/form-data"が設定される。ファイルのアップロードをするとき、enctype属性の代わりに使うことができる。

CKTextField

テキストフィールドを表示します。入力されたデータはvalue属性に設定したインスタンス変数に代入されます。

必須属性: value

CKTextFieldの属性
属性 データ型 説明
type String フィールドの種類を指定する。指定できるのは「テキストフィールド(text)、パスワード(password)、隠蔽フィールド(hidden)」の3つ。
value String データの表示・代入を行う。
size Integer テキストフィールドの幅。
maxlength Integer データの最大入力文字数。
validate String 入力値のルールを指定する。ルールに適合しなければpass属性にfalseが代入される。
pass true/false 入力値の検証結果。ルールに適合すればtrueが、そうでなければfalseが代入される。
enabled true/false 入力の可否。falseであれば入力できないようにする。

CKText

テキストエリアを表示します。

必須属性: value

CKTextの属性
属性 データ型 説明
value String データの表示・代入を行う。
columns Integer テキストエリアの横幅。
rows Integer テキストエリアの縦幅。
validate String 入力値のルールを指定する。ルールに適合しなければpass属性にfalseが代入される。
pass true/false 入力値の検証結果。ルールに適合すればtrueが、そうでなければfalseが代入される。
enabled true/false 入力の可否。falseであれば入力できないようにする。

CKCheckbox

チェックボックスを表示します。

必須属性: selectionvalue, またはchecked

CKCheckboxの属性
属性 データ型 説明
checked true/false チェックボックスのオン/オフ。変数をバインディングしておくと、チェックされたときにtrueが代入される。
value String チェックしたときにselection属性に代入するデータ。value属性とselection属性のデータが同じならチェックボックスはオンになる。
selection Array チェックしたとき、value属性のデータがこの属性に代入される。
enabled true/false 入力の可否。falseであればチェックできないようにする。

CKCheckboxとCKRadioButtonは、フィールドより少し複雑になります。これらのエレメントは「checked属性」か「value属性とselection属性」のどちらかの組み合わせを使います。

checked属性

checked属性を使う場合は、単純にオン/オフのみでチェックボックスを操作します。つまり、1つのチェックボックスにつき1つの変数を割り当てることになります。

<cgikit name=Form>
<cgikit name=Checkbox1>One</cgikit>
<cgikit name=Checkbox2>Two</cgikit>
<cgikit name=Checkbox3>Three</cgikit>
<cgikit name=Submit/>
</cgikit>
Form : CKForm {
}

Checkbox1 : CKCheckbox {
  checked = checkedOne;
}

Checkbox2 : CKCheckbox {
  checked = checkedTwo;
}

Checkbox3 : CKCheckbox {
  checked = checkedThree;
}

Submit : CKSubmitButton {
}
class Checkbox < CKComponent
  attr_accessor :checkedOne, :checkedTwo, :checkedThree
end

このようにchecked属性にそれぞれ別の変数を割り当てて、どのチェックボックスがチェックされているか判断します。チェックされると、変数にはtrueが代入されます。

value属性とselection属性

value属性にチェックボックスのデータを設定すると、そのデータがチェックしたときselection属性に代入されます。また、value属性とselection属性のデータが同じであればチェックボックスはオンになります。

基本的な動作はchecked属性を使う場合と変わりませんが、チェック時に代入されるデータが異なります。checked属性ではtrueが代入されますが、この場合value属性で設定したデータが代入されることになります。

<cgikit name=Form>
<cgikit name=Checkbox1>One</cgikit>
<cgikit name=Checkbox2>Two</cgikit>
<cgikit name=Checkbox3>Three</cgikit>
<cgikit name=Submit></cgikit>
</cgikit>
Form : CKForm {
}

Checkbox1 : CKCheckbox {
  value = "One";
  selection = checkedOne;
}

Checkbox2 : CKCheckbox {
  value = "Two";
  selection = checkedTwo;
}

Checkbox3 : CKCheckbox {
  value = "Three";
  selection = checkedThree;
}

Submit : CKSubmitButton {
}
class Checkbox < CKComponent
  attr_accessor :checkedOne, :checkedTwo, :checkedThree
end

CKRadioButton

ラジオボタンを表示します。基本的にはCKCheckboxと同じですが、CKRadioButtonではグループの各ボタンを排他的にするためname属性を設定します。

必須属性: selectionvalue、またはchecked

CKRadioButtonの属性
属性 データ型 説明
name String ラジオボタンのグループ名。同じ名前のラジオボタンを1つしかチェックできないようにする。
checked true/false ラジオボタンのオン/オフ。変数をバインディングしておくと、チェックされたときにtrueが代入される。
value String チェックしたときに代入するデータ。
selection String チェックしたとき、value属性のデータがこの属性に代入される。
enabled true/false 入力の可否。falseであればチェックできないようにする。

以下はchecked属性を使った例です。

<cgikit name=Form>
<cgikit name=Radio1>One</cgikit>
<cgikit name=Radio2>Two</cgikit>
<cgikit name=Radio3>Three</cgikit>
<cgikit name=Submit></cgikit>
</cgikit>
Form : CKForm {
}

Radio1 : CKCheckbox {
  name = "radio";
  checked = checkedOneTwoThree;
}

Radio2 : CKCheckbox {
  name = "radio";
  checked = checkedOneTwoThree;
}

Radio3 : CKCheckbox {
  name = "radio";
  checked = checkedOneTwoThree;
}

Submit : CKSubmitButton {
}
class Checkbox < CKComponent
  attr_accessor :checkedOneTwoThree
end

CKPopUpButton

ポップアップメニューを表示します。

必須属性: list

CKPopUpButtonの属性
属性 データ型 説明
escape true/false HTML制御文字のエスケープ。
list Enumerable 選択項目として繰り返すデータ。
default String 何も選択されていないとき、先頭に表示するメニュー。
selected String 選択したデータはこの属性に代入される。
values Array <option>要素のvalue属性に設定されるデータ。選択項目にはlist属性の内容が表示されるが、selected属性にはこの属性の内容が代入される。
enabled true/false 入力の可否。falseであれば選択を無効にする。

CKBrowser

複数選択可能なセレクトボックスを表示します。

必須属性: list

CKBrowserの属性
属性 データ型 説明
escape true/false HTML制御文字のエスケープ。
list Enumerable 繰り返すデータ。この配列から要素を順に取り出し、item属性に入れる。
selected Array 選択したデータはこの属性に代入される。他のフィールドと違い、データは配列になるので注意。
values Array <option>要素のvalue属性に設定されるデータ。選択項目にはlist属性の内容が表示されるが、selected属性にはこの属性の内容が代入される。
multiple true/false 複数選択の可否。trueであれば複数選択を可能にする。
size Integer 一度に表示する選択肢の数。
enabled true/false 入力の可否。falseであればタグを無効にする。

CKSubmitButton

送信ボタンを表示します。必須属性はありません。

CKSubmitButtonの属性
属性 データ型 説明
action CKComponent 指定したメソッドはクリック時に実行される。
value String ボタンのラベル。
enabled true/false 入力の可否。falseであればタグを無効にする。

CKResetButton

リセットボタンを表示します。必須属性はありません。

CKResetButtonの属性
属性 データ型 説明
value String ボタンのラベル。

CKFileUpload

ファイルをアップロードするためのフォームを生成します。このエレメントを使うときはCKFormのenctype属性に"multipart/form-data"を設定してください。

必須属性: datafile

CKFileUploadの属性
属性 データ型 説明
data CKByteData アップロードしたファイルがCKByteDataオブジェクトとして代入される。
file String アップロードしたファイルのパス。
enabled true/false 入力の可否。falseであればフォームを無効にする。