HOME > CGI > おされさん > メイン画面(入力フォーム部)の作り方

メイン画面(入力フォーム部)の作り方

■$main_htmlの「入力フォーム部」作り方

入力フォーム部は、その名の通り記事を投稿する為の入力フォームを記述をする場所です。

▼基本記述例

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000"><table border="0" cellpadding="3" cellspacing="1" bordercolor="#000000">
<tr bgcolor="#669900">
<td nowrap bgcolor="#CC0000"><font color="#FFFFFF">名前 </font></td>
<td bgcolor="#FFFFFF"> <input name="f_name_YYNNNN000050" type="text" size="30" title="お名前" class=text>
</td>
<tr bgcolor="#FFFFFF">
<td nowrap bgcolor="#CC0000"><font color="#FFFFFF">コメント</font></td>
<td><textarea name="f_comment_YNNNYN001000" cols="30" rows="5" title="コメント" class=text></textarea></td>
</tr>
<tr bgcolor="#996600">
<td colspan="2" nowrap>
<div align="center">
<input name="submit" type=submit value=登録します class=button>
<input name="reset" type=reset value=クリア class=button>
</div></td>
</tr>
</table></td>
</tr>
</table>

『おされさん』にとって、とても重要なのが【コントロール名】の付け方です。

《コントロール名とは?》

<input type="text" name="f_name"> ←赤文字の部分がコントロール名です

《コントロール名の基本》

コントロール名は必ず最初に「f_」(小文字の"f"+アンダーバー)を付けて下さい。

例: f_name、f_url、f_comment等

《オプション設定》

コントロール名を、「通常のコントロール名+"_オプション"」の名前にする事により、
必須入力・クッキー保存・文字数制限のチェック等が出来るようになります。

オプション ※書式: f_名前_オプション
オプション部の桁 その桁の意味 設定値
1桁目 必須入力にするか? N:いいえ
Y:はい
2桁目 クッキーに保存するか? N:いいえ
Y:はい
3桁目 そのコントロールはメールアドレスを入力する項目か? N:いいえ
1:はい(メールアドレスを公開+mailtoでリンク)
2:はい(メールアドレスを非公開+メールフォーム
でリンク)
2の場合は、sendmailが指定されている事が前提です
4桁目 そのコントロールはURLを入力する項目か? N:いいえ
Y:はい
5桁目 そのコントロールはテキストエリア(複数行入力出来るテキストボックス)か? N:いいえ
Y:はい
6桁目 そのコントロールはチェックボックス又はセレクトボックスで複数選択が可能か? N:いいえ
1:はい(表示時、"縦"に表示)
2:はい(表示時、"横"に表示)
7〜8桁目 最小桁数 00:チェックしない
nn:指定桁以下の入力はエラー
必ず数字2桁で指定する事
9〜12桁目 最大桁数 0000:チェックしない又は空白
nnnn:指定桁以下の入力はエラー
必ず数字4桁で指定する事
13桁目 システム日付を初期選択
※セレクトボックスで年月日の場合に、システム日付を初期選択させる
1:年(西暦4桁しか対応していません)
2:月
3:日
14桁目 そのコントロールは「password」? N:いいえ
Y:はい
15桁目
05/02/16
そのコントロールは重複登録をさせない? N:いいえ
Y:はい
既にログに同じデータが登録されていたらエラー表示します

コントロール名の付け方例
通常のテキストボックス(オプション無し) f_name、f_sukinamono
通常のテキストボックス(オプション有り)
・必須入力
・クッキー保存
・50文字以上はエラー
f_name_YYNNNN000050
通常のテキストボックス(オプション有り)
・100文字以上はエラー
f_subject_NNNNNN000100
URLを入力するテキストボックス
・クッキー保存
f_url_NYNY
メールアドレスを入力するテキストボックス
・クッキー保存
f_mail_NYY
テキストエリア
・必須入力
・テキストエリアである
・1000文字以上はエラー
f_comment_YNNNYN001000
セレクトボックスで日付を初期選択させる
・初期値としてシステム日付とする
f_nen_NNNNNN0000001
f_tsuki_NNNNNN0000002
f_hi_NNNNNN0000003
ファイルアップロード用フィールド f_fileupload
名前は必ず"f_fileupload"として下さい。
オプション設定は出来ません。
修正・削除用のパスワード入力フィールド f_pass
名前は必ず"f_pass"として下さい。
オプション設定は出来ます。
マイアイコン(アイコンを選択するのではなく、アイコンのアドレスを入力してアイコンを指定する)フィールド f_myicon
名前は必ず"f_myicon"として下さい。
#icon<!--i-->と指定した部分がマイアイコンで
指定した画像で表示されます。

マイアイコンフィールドのフォーム上の場所は
必ず「アイコン」より上に置いて下さい。

オプション設定は出来ます。
文字色を指定するフィールド f_color
名前は必ず"f_color"として下さい。
オプション設定は出来ます。


<FORM>及び</FORM>タグについて
<FORM>及び</FORM>タグは記述してはいけません。
HP作成ソフトで<FORM>タグを埋め込む事もあるのでご注意下さい。
但し、Submitボタンやクリアボタンは必ず記述して下さい。

<input type="submit" value="登録します">
<input type="reset" value=クリア>

オプションを付けた時、又はメール送信機能を使う場合
必須入力チェックをオプションで設定した時は、「○○を入力して下さい」とエラーメッセージを
表示する為、それが何の項目かどうかを示す「○○」が必要となります。
そこで各コントロール名の記述で【title="その項目を表す名前"】 を記述して下さい。

<input type="text" name="f_name_YY" title="お名前">
<input type="checkbox" name="f_giants_Y" title="巨人は好き?">

クッキー機能を使う場合
入力フォームに【 COOKIEを保存 】のように、チェックボックスを表示し、チェックされた場合
のみクッキーに保存させたい場合は、下記のコードをお好きな位置へ記述して下さい。
<input type="checkbox" name="f_cookie" value=1>COOKIEを使用
入力フォームに【 COOKIEを保存 】のようなチェックボックスは表示せずに、
コントロールで「クッキー保存を"Y"」で設定した値を常にクッキーへ保存するには
下記のコードを<input type=submit value="登録します">の前後に記述して下さい。
<input type="hidden" name="f_cookie" value=1>

例:
<input type="hidden" name="f_cookie" value=1>
<input type=submit value=登録します class=button>

セレクトボックスの注意事項1 → 
選択肢<option>のvalueには「英数字」・「.」・「/」のみ指定可です。
▼正しい指定方法
<select name="f_address">
<option value="">------</option> ←</option>は省略可
<option value="01">あああ
<option value="02/05/01">いいい

</select>

▼間違った指定方法
<option value="あああ">あああ
とか、
<option value="いいい">いいい

セレクトボックスの注意事項2 → 
選択肢<option>は必ず1項目1行で記述して下さい
<select name="f_address">
<option value="">------</option> ←</option>は省略可
<option value="1">あああ
<option value="2">いいい

</select>

▼ログ表示の際に正しく表示されない例
<option
value="1">あああ

とか、
<option value="1">
あああ
とか、
<option value="2">いいい</select>

ラジオボタンの注意事項 →  男性  女性
ラジオボタンコントロールの1項目は必ず1行で記述して下さい
<input type="radio" name="f_sex" value="1" title="性別">男性
<input type="radio" name="f_sex" value="2" title="性別">女性


▼ログ表示の際に正しく表示されない例
<input type="radio" name="f_sex"
value="1" title="性別">男性
とか
<input type="radio" name="f_sex" value="2" title="性別">
女性

チェックボックスの注意事項 →  巨人  阪神
チェックボックスコントロールの1項目は必ず1行で記述して下さい
<input type="checkbox" name="f_base" value="1" title="好きなチーム">巨人
<input type="checkbox" name="f_base" value="2" title="好きなチーム">阪神


▼ログ表示の際に正しく表示されない例
<input type="checkbox" name="f_base"
value="1" title="好きなチーム">巨人
とか
<input type="checkbox" name="f_base" value="2" title="好きなチーム">
阪神

アイコン一覧のリンクを付ける
入力フォーム部のお好きな場所に「リンク用文字<!--list(アイコンのコントロール名)-->」を記述します


<select name="f_icon_NY">
<option selected value="../img/01.gif">おんなのこ1
<option value="../img/02.gif">おんなのこ2
<option value="../img/master.gif">管理人専用
</select>
アイコン一覧<!--list(icon)-->

アイコン一覧 となります

注意) リンク用文字と<!--list(xxx)-->の間に空白が入っては正しくリンクされません。

注意) リンク用文字の前に何らかの他の文字があると正しくリンクされません。
</select>アイコン一覧<!--list(icon)-->
↑これはうまくリンクされません。アイコン一覧リンクをする場合はリンク文字を行頭に置くのがベストです。


age/sage機能を使う場合
レス投稿時、入力フォームに【 sage 】のように、チェックボックスを表示し、チェックされた場合
、スレッドの位置を上げない(先頭に移動しない)場合、下記のコードをお好きな位置へ記述して下さい。
sage<input type="checkbox" name="f_sage" value=1>

※フィールド名は「f_sage」固定です。
※同機能はosaresanini.cgi内で指定する「$resflag = 'yes' ; #最新レスを先頭に表示する?(yes,no)」が"yes"にしている
場合のみ意味があります。この場合、sageにチェックをしないでレス投稿すると常に先頭に移動されます。

osaresanで生成されるセレクトボックスやラジオボタンにCSSを設定したい!
編集・削除用の→ とか 過去ログ・ページ移動用のセレクトボックス→
おされさんにて自動生成しますが、それにCSSを設定したい場合

ラジオボタンは「class=radio」、セレクトボックスは「class=select」で設定して下さい。

例:
.radio {
  border: 1px #000000 solid;
width:8pt; height:8pt;
}
.select {
  border: 1px #000000 solid;
background: #ffffff;
color: #000000;
}

 

■その他

管理人しか新規投稿出来ないようにする
 例:新着掲示板のように、画面表示時には入力フォームはしたくない場合
記述 <!--noform-->
動作 ヘッダー部($main_htmlに記述した「1個目の<!--cut-->〜2個目の<!--cut-->」の間に
<!--noform-->を記述する事により以下の動作をします。
説明

▼CGIにアクセスした時

▲入力フォームが非表示となります。
▲「新規投稿」ボタンとパスワード入力部分が追加表示されます。
 ※パスワード(上記画面の右側のテキストボックス)は、CGIソースで
  指定した「管理人パスワード($password)」と異なる場合は
  「管理人以外は利用出来ません。」でエラーとなります。


レス投稿フォームで入力させたくない項目がある場合
記述 <!--resdelstart-->〜<!--resdelend-->
動作 レス投稿フォームにおいて、
<!--resdelstart-->〜<!--resdelend-->で囲まれた部分を画面に表示しません

<!--resdelstart-->
<tr bgcolor="#FFFFFF">
<td nowrap bgcolor="#CC0000"><font color="#FFFFFF">件名</font></td>
<td><input name="f_subject_NNNNNN000100" type="text" size="30" title="件名" class=text></td>
</tr>
<!--resdelend-->
説明 ▼通常の入力フォーム


▼レス投稿フォーム

※「どれ好き?」と「誕生日」が消えています

レス投稿フォームのみ入力させたい項目がある場合
記述 <!--resonlystart-->〜<!--resonlyend-->
動作 新規投稿フォームにおいて、
<!--resonlystart-->〜<!--resonlyend-->で囲まれた部分を画面に表示しません

<!--resonlystart-->
<tr bgcolor="#FFFFFF">
<td nowrap bgcolor="#CC0000"><font color="#FFFFFF">sage</font></td>
<td><input type="checkbox" name="f_sage" value=1></td>
</tr>
<!--resonlyend-->

前へ 次へ


このページのTOPへ