フォームの設定例

入力のタイプごとの入力定義配列の指定例です。

input[type='text']

'text01' => array(
	'type'	=> 'text',
),
'text02' => array(
	'type'			=> 'text',
	'id'			=> 'textbox02',
	'option'		=> 'class="xxx" onblur="alert(\'確認します。\')"',
	'mobile_option'	=> '',

	'required_flag'	=> TRUE,
),
'text03' => array(
	'type'			=> 'text',
	'caption'		=> 'テキストサンプル03',
	'description'	=> 'テキストボックス説明文のサンプル03です。',

	'head_str'		=> '前の文字列',
	'tail_str'		=> '後の文字列',
	'default_value'	=> 'デフォルト',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>text01</th>
	<td width="70%"><input type="text" name="text01" id="text01" value="" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>text02</th>
	<td width="70%"><input type="text" name="text02" id="textbox02" class="xxx" onblur="alert('確認します。')" value="" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>テキストサンプル03</th>
	<td width="70%"><font color="#0000FF">テキストボックス説明文のサンプル03です。</font><br />前の文字列<input type="text" name="text03" id="text03" value="デフォルト" />後の文字列</td>
</tr>

input[type='hidden']

'hidden01' => array(
	'type'			=> 'hidden',
),
'hidden02' => array(
	'type'			=> 'hidden',
	'default_value'	=> 100,
),

これに対応して出力されるHTMLタグは

<input type="hidden" name="hidden01" id="hidden01" value="" />
<input type="hidden" name="hidden02" id="hidden02" value="100" />

input[type='password']

'pass01' => array(
	'type'			=> 'password',
),
'pass02' => array(
	'type'			=> 'password',

	'required_flag'	=> TRUE,

),
'pass03' => array(
	'type'			=> 'password',
	'required_flag'	=> TRUE,
	'confirm'		=> 'pass02',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>pass01</th>
	<td width="70%"><input type="password" name="pass01" id="pass01" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>pass02</th>
	<td width="70%"><input type="password" name="pass02" id="pass02" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>pass03</th>
	<td width="70%"><input type="password" name="pass03" id="pass03" /></td>
</tr>

input[type='radio']

'radio01' => array(
	'type'			=> 'radio',
	'table'			=> array(
		1  => '選択肢1',
		2  => '選択肢2',
	),
),
'radio02' => array(
	'type'			=> 'radio',
	'caption'		=> 'ラジオボタン02',
	'description'	=> 'ラジオボタンのサンプル02です。',
	'head_str'		=> '前の文字列',
	'tail_str'		=> '後の文字列',
	'table'			=> array(
		1  => '選択肢1',
		2  => '選択肢2',
		3  => '選択肢3',
	),
	'default_value'	=> 1,
),
'radio03' => array(
	'type'			=> 'radio',
	'id'			=> 'sex',
	'option'		=> 'class="yyy"',
	'caption'		=> '性別',
	'description'	=> 'あなたの性別を選択してください。',
	'required_flag'	=> TRUE,
	'table'			=> array(
		1  => '男性',
		2  => '女性',
		3  => 'その他',
	),
	'separator'		=> '/',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>radio01</th>
	<td width="70%"><input type="radio" name="radio01" id="radio01:1" value="1" />選択肢1<input type="radio" name="radio01" id="radio01:2" value="2" />選択肢2</td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>ラジオボタン02</th>
	<td width="70%"><font color="#0000FF">ラジオボタンのサンプル02です。</font><br />前の文字列<input type="radio" name="radio02" id="radio02:1" value="1" checked="checked" />選択肢1<input type="radio" name="radio02" id="radio02:2" value="2" />選択肢2<input type="radio" name="radio02" id="radio02:3" value="3" />選択肢3後の文字列</td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>性別</th>
	<td width="70%"><font color="#0000FF">あなたの性別を選択してください。</font><br /><input type="radio" name="radio03" id="sex:1" class="yyy" value="1" />男性/<input type="radio" name="radio03" id="sex:2" class="yyy" value="2" />女性/<input type="radio" name="radio03" id="sex:3" class="yyy" value="3" />その他</td>
</tr>

input[type='checkbox']

'check01' => array(
	'type'			=> 'checkbox',
),
'check02' => array(
	'type'			=> 'checkbox',
	'id'			=> 'check_box',
	'option'		=> 'class="zzz" onclick="alert(\'確認します。\')"',
	'mobile_option'	=> '',
	'label'			=> 'チェックラベル02',
),
'check03' => array(
	'type'			=> 'checkbox',
	'caption'		=> '上記の内容を確認しましたか',
	'description'	=> '確認してからチェックを入れてください。',
	'label'			=> '確認しました',
	'head_str'		=> '前の文字列',
	'tail_str'		=> '後の文字列',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>check01</th>
	<td width="70%"><input type="checkbox" name="check01" id="check01" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>check02</th>
	<td width="70%"><input type="checkbox" name="check02" id="check_box" class="zzz" onclick="alert('確認します。')" />チェックラベル02</td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>上記の内容を確認しましたか</th>
	<td width="70%"><font color="#0000FF">確認してからチェックを入れてください。</font><br />前の文字列<input type="checkbox" name="check03" id="check03" />確認しました後の文字列</td>
</tr>

複数のチェックボックスをグループ化して一まとめに表示することも可能です。設定方法は複数のinputをグループ化して表示するを参照してください。

input[type='file']

'file01' => array(
	'type'			=> 'file',
),
'file02' => array(
	'type'			=> 'file',

	'required_flag'	=> TRUE,
),
'file03' => array(
	'type'			=> 'file',
	'caption'		=> '商品写真',
	'description'	=> 'ファイルアップロードのサンプル03です。',

	'head_str'		=> '前の文字列',
	'tail_str'		=> '後の文字列',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>file01</th>
	<td width="70%"><input type="file" name="file01" id="file01" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>file02</th>
	<td width="70%"><input type="file" name="file02" id="file02" /></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>商品写真</th>
	<td width="70%"><font color="#0000FF">ファイルアップロードのサンプル03です。</font><br />前の文字列<input type="file" name="file03" id="file03" />後の文字列</td>
</tr>

select/option

入力タグとして<select>と<option>がありますが、キーoptionの値で指定する内容は<select>タグに付くことになります。

'select01'	=> array(
	'type'			=> 'select',
	'table'			=> array(
		1  => '選択肢1',
		2  => '選択肢2',
	),
),
'select02' => array(
	'type'			=> 'select',
	'id'			=> 'select',
	'option'		=> 'class="yyy"',

	'default_value'	=> 1,
	'table'			=> array(
		1  => '選択肢1',
		2  => '選択肢2',
	),
	'head_value' 	=> array('' => '(選択してください)'),
),
'select03' => array(
	'type'			=> 'select',
	'caption'		=> 'セレクトボックスのサンプル03',
	'description'	=> 'セレクトボックスのサンプル03です。',

	'head_str'		=> '前の文字列',
	'tail_str'		=> '後の文字列',
	'default_value'	=> 1,
	'required_flag'	=> TRUE,
	'head_value'	=> array('' => '(選択してください)'),
	'table'			=> array(
		1  => '選択肢1',
		2  => '選択肢2',
	),
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>select01</th>
	<td width="70%"><select name="select01" id="select01"><option value="1">選択肢1</option><option value="2">選択肢2</option></select></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>select02</th>
	<td width="70%"><select name="select02" id="select" class="yyy"><option value="">(選択してください)</option><option value="1">選択肢1</option><option value="2">選択肢2</option></select></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>セレクトボックスのサンプル03</th>
	<td width="70%"><font color="#0000FF">セレクトボックスのサンプル03です。</font><br />前の文字列<select name="select03" id="select03"><option value="">(選択してください)</option><option value="1">選択肢1</option><option value="2">選択肢2</option></select>後の文字列</td>
</tr>

textarea

'textarea01' => array(
	'type'			=> 'textarea',
),
'textarea02' => array(
	'type'			=> 'textarea',
	'option'		=> 'cols="30" rows="5"',
	'mobile_option'	=> 'cols="15" rows="5"',

	'required_flag'	=> TRUE,
),
'textarea03' => array(
	'type'			=> 'textarea',
	'option'		=> 'cols="20" rows="4"',
	'mobile_option'	=> 'cols="15" rows="4"',
	'caption'		=> 'コメント',
	'description'	=> 'テキストエリアのサンプル03です。',

	'head_str'	=> '私は',
	'tail_str'	=> 'だと思います。',
),

これに対応して出力されるHTMLタグは

<tr>
	<th width="30%"><font color="#FF7700">*</font>textarea01</th>
	<td width="70%"><textarea name="textarea01" id="textarea01"></textarea></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>textarea02</th>
	<td width="70%"><textarea name="textarea02" id="textarea02" cols="30" rows="5"></textarea></td>
</tr>
<tr>
	<th width="30%"><font color="#FF7700">*</font>コメント</th>
	<td width="70%"><font color="#0000FF">テキストエリアのサンプル03です。</font><br />私は<textarea name="textarea03" id="textarea03" cols="20" rows="4"></textarea>だと思います。</td>
</tr>

以上のサンプルはこちらになります。

前後のページ

ページトップへ