|
|
 |
|
|
|
|
| 入力項目を増やす |
| R-FORM では入力項目を自由に増やすことが出来ます。 |
例えば、日記のテンプレートで‘今日の気分’が入力できるように、
項目『FEELING』を追加してみましょう。
まず、入力フォームのHTMLに、FEELING というINPUTタグを増やします。
|
【入力フォームHTML】
<table width="80%" border="1">
<tr><th>題名</th>
<td><input type="text" name="SUBJECT"></td>
</tr>
<tr><th>今日の気分</th>
<td><input type="text" name="FEELING"></td>
</tr>
<tr><th>本文</th>
<td><textarea name="BODY" cols="40"></textarea></td>
</tr>
</table> |
|
| サンプルを表示 |
|
| これで、自動的にサーバに FEELING のデータが保存されるようになります。 ただし、このままではビューには反映されません。テンプレートを編集しましょう。 |
【テンプレートHTML】
<tr>
<td bgcolor="#FFCC66"><b>%%DATE/SP%%</b> <font
color="#FFFFFF"><b>%%SUBJECT%%</b></font> (気分は…%%FEELING%%)</td>
</tr> |
|
| サンプルを表示 |
|
| これで、‘今日の気分’がビューに表示されるようになります。 |
|
|
| 空白入力を防止する |
| JavaScript を用いて、送信前にチェックを行うことが出来ます。 |
【入力フォームHTML】
<SCRIPT language="JavaScript">
function check()
{
if( document.MYFORM.NAME.value == ""){
alert( "お名前が入力されていません");
return false;
}
}
</SCRIPT>
<FORM name="MYFORM" onSubmit="return check()">
お名前（入力必須）
<INPUT type="text" name="NAME">
<INPUT type="submit">
</FORM> |
|
| サンプルを表示 |
|
|
|
| 全角数字の入力を防止する |
| IE5以降であれば、スタイルシートでIME のオフが出来るので、 全角入力の予防が出来ます。 |
【入力フォームHTML】
郵便番号
<INPUT type="text" value="" style="ime-mode:inactive"> |
|
| サンプルを表示 |
|
|
|
| チェックボックスを複数選択させたい |
| アンケート等のチェックボックスで複数選択可能にする場合は、チェックボックスの一つずつに違う名前を付けることも可能ですが、Submit時に、チェックボックスの内容をサーチし、その入力内容をひとまとめにして、一つのクエリーにすると便利です。 |
【入力フォームHTML】
<HTML>
<FORM name="IFORM" onSubmit="onWrite()">
お名前<INPUT type="text" name="A1"><BR>
あなたが良く観戦するスポーツは？(複数選択可能）<BR>
<INPUT type="hidden" name="hnMULTI" value=5>
<INPUT type="hidden" name="A2">
<INPUT type="checkbox" value="1">プロ野球
<INPUT type="checkbox" value="2">サッカー
<INPUT type="checkbox" value="3">相撲
<INPUT type="checkbox" value="4">ゴルフ
<INPUT type="checkbox" value="5">マラソン<BR>
その他<INPUT type="text" name="A3">
<input type="submit">
</FORM>
<SCRIPT language="JavaScript">
function onWrite()
{
var form = document.IFORM;
var objTop, nameObject, numSelect, tip;
var i, j, jstart, jend, addValue, first; for( i=0; i<form.length; i++){
objTop = form.elements[i];
nameObject = objTop.name;
numSelect = parseInt( objTop.value);
if( nameObject == "hnMULTI"){
objAnswer = form.elements[i+1];
addValue = "";
first = 0;
jstart = i+2;
jend = jstart+numSelect;
for( j=jstart; j<jend; j++){
if( form.elements[j].checked){
if( first==0){
first=1;
} else {
addValue+="-";
} addValue += form.elements[j].value;
}
}
i+=(numSelect+1); objAnswer.value = addValue;
}
}
}
</SCRIPT> |
|
| サンプルを表示 |
|
| 同様の手法で、他にも複雑なデータを保存することが出来ます。 |
| 例えば、掲示板のタイムスタンプを ３月、４月ではなく、"弥生、卯月…”という風に表示したい場合、 これはXSLを編集しても不可能ですが、JavaScriptを使えば簡単です。 |
【入力フォームHTML】
<script language="JavaScript">
var am = new Array( 13);
am[0] = "睦月"; am[1] = "如月"; am[2] = "弥生"; am[3]
= "卯月";
am[4] = "皐月"; am[5] = "水無月"; am[6] = "文月"; am[7]
= "葉月";
am[8] = "長月"; am[9] = "神無月"; am[10] = "霜月"; am[11]
= "師走";
function setMonth()
{
var dt = new Date();
document.IFORM.MYDATE.value = am[dt.getMonth()];
}
</script>
<FORM onSubmit="setMonth()">
<input type="hidden" name="MYDATE">
<input type="submit">
</FORM> |
|
| サンプルを表示 |
|
| このようにすれば、テンプレートからは %%MYDATE%% の中に、弥生、卯月・・といった文字列が入っているので、これをタイムスタンプとして使うことが出来ます。 |
|
|
| 入力されたURLでリンクを張る(上級者向け） |
| XSLを編集し、次のようなタグを挿入します。 |
郵便番号
<xsl:element name="A">
<xsl:attribute name="href">
<xsl:value-of select="URL" /> </xsl:attribute>
リンク先名
</xsl:element> |
|
|
例えば、
<URL>http://www.reset.jp/</URL>
の場合、次のように変換されます。
<A href="http://www.reset.jp/">リンク先名</A> |
|
|
| アイコン掲示板のように、ユーザが自由に選択できるアイコンをつける(上級者向け） |
XSLを編集し、次のようなタグを挿入します。チルダ（~）は、%7E として入力します。
IMAGENO には、画像を識別する英数字が入っています。 |
<xsl:element name="IMG">
<xsl:attribute name="src">http://my.reset.jp/%7Eyour_name/image/formimage_<xsl:value-of
select="IMAGENO" />.jpg</xsl:attribute></xsl:element> |
|
|
例えば、
<IMAGENO>100</IMAGENO>
の場合、次のように変換されます。
<IMG src="http://my.reset.jp/%7Eyour_name/image/formimage_100.jpg"> |
|
