はじめに

汎用WebFormとは?

入力フォームのHTMLを作成するだけで、入力結果のCSVが作成可能です。

  • 入力部品毎に、独自のタグを指定する事により、入力規則の指定が可能
  • 必須入力項目・オプション入力項目
  • 最大文字数チェックや、入力内容（英字・数字等）のチェックをJavascriptで自動的にチェック

基本的な使い方

入力画面のHTMLにCSVに出力するカラムや確認画面のため設定を記述します。 準備するものはHTMLファイルのみです。 HTMLのファイル名でCSVファイルが作成されます。

HTML内の記述に必要なものは以下のようになります。

設定
確認画面などの設定を記述してください。
フォーム(<form>)
action属性にwf.cgiのURL、 method属性にpost、 name属性に wfを 指定してください。
カラム用のフィールド(<input><select><textarea>など)
name属性にカラム名を指定してください。フィールドの順番でカラムの順番が決まります。
submit、resetボタン
submit、resetボタンを記述してください。確認画面で必要となります。

簡単な例

例)

HTMLファイル
<html>
<head>
<script language="javascript">
<!--
WF_CONF = new Array();
WF_CONF["submit"] ="確認したので送信";
WF_CONF["reset"] ="もどる";
WF_CONF["result_page"]="result.html";
-->
</script>
</head>

<body>
	<form action="../cgi-bin/wf.cgi" method="post" name="wf">
		カラム1<input type="text" name="カラム1" value="" /><br>
		カラム2<input type="text" name="カラム2" value="" /><br>
		カラム3<input type="text" name="カラム3" value="" /><br>
		カラム4<input type="text" name="カラム4" value="" /><br>
		<input type="submit" value="送 る" />
		<input type="reset" value="リセット" />
	</form>
</body>
</html>
入力画面
カラム1:
カラム2:
カラム3:
カラム4:
確認画面
カラム1:AAAAA
カラム2:BBBBB
カラム3:CCCCC
カラム4:DDDDD
完了画面
result_pageで指定されたページが表示されます。
CSV出力
カラム1 カラム2 カラム3 カラム4
AAAAA BBBBB CCCCC DDDDD