画面の構成と FORM と入力

画面を構成する一般的な例

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>ブラウザのタイトルバーに出力される文字列</TITLE>
<HEAD>
<BODY BGCOLOR=#D5D5D5>

<H1 align=center title="H1は一番大きな見出しです">画面を構成する一般的な例</H1>
<HR size=1 color=black title="HRは横線を引きます">

<FORM name=frmMain onSubmit='return frmCheck()'>

<TABLE  cellpadding=5>
	<TH>行のヘッダです</TH>
	<TR>
		<TD>
			おなまえ
		</TD>
		<TD>
			<INPUT type=text name=Onamae>
		</TD>
	</TR>
	<TR>
		<TD>
			Ｅメール
		</TD>
		<TD>
			<INPUT type=text name=Email>
		</TD>
	</TR>
	<TR>
		<TD>
			題　　名
		</TD>
		<TD>
			<INPUT type=text name=Daimei>
			<INPUT type=submit value="投稿する">
			<INPUT type=reset  value="リセット">
		</TD>
	</TR>
	<TR>
		<TD>
			コメント
		</TD>
		<TD>
			<TEXTAREA name=Comment cols=40 rows=10></TEXTAREA>
		</TD>
	</TR>
</TABLE>

</FORM>

</BODY>
</HTML>

JavaScript　のソースをインクルードする

ソースの先頭に以下の記述を行う

<SCRIPT language=JavaScript src=inpchk1.js></SCRIPT>

JavaScript のソース

inpchk1.js

// *******************************************************************
// フォームの入力チェック
// 
// 機能1 : おなまえ(name=Onamae) 欄が未入力またはスペースが入力
// 　　　　された場合、エラーメッセージを表示して送信アクション
// 　　　　をキャンセルする
// *******************************************************************
function frmCheck()
{

	// おなまえ
	strWork = document.frmMain.Onamae.value;
	strWork = AllReplace( strWork, " ", "" );	// 半角空白
	strWork = AllReplace( strWork, "　", "" );	// 全角空白

	if ( strWork == '' ) {
		alert( "おなまえを入力して下さい" );
		return false;
	}

	return true;
}

// *******************************************************************
// 文字列置き換え関数
//
// 機能 : sBase に含まれる sTarget を全て sValue に置き換える
// *******************************************************************
function AllReplace( sBase, sTarget, sValue ) {

	var sRet;

	sRet = sBase;

	while( sRet.indexOf( sTarget ) != -1 ) {
		sRet = sRet.replace( sTarget, sValue );
	}

//  Regular Expression オブジェクト を使用すると以下のようになります
//	rgExp = new RegExp(sTarget,"g") ;
//	sRet = sRet.replace( rgExp, sValue );

	return sRet;
}

文字列置き換え関数の説明

indexOfメソッド

文字列内を、指定された文字列で先頭から検索します

indexOf メソッドの戻り値は、String オブジェクト内で見つかったサブストリングの先頭位置を示す整数値です。
サブストリングが見つからなかった場合は、-1 が返されます。

replace メソッド

文字列を置換した結果のコピーを返します。

入力チェックの説明

<FORM name=frmMain onSubmit='return frmCheck()'>

上記タグは、CGI に渡す為の送信ボタンが押された時に、「frmCheck()」関数を
呼び出す為の記述方法です。

	if ( strWork == '' ) {
		alert( "おなまえを入力して下さい" );
		return false;
	}

上記条件式によって、未入力時にメッセージボックスを表示して関数の戻り値を「false」
としています。

動作チェック用の為、画面の最後に表示スクリプトを追加

<SCRIPT language=JavaScript>

	document.write( location );

</SCRIPT>

location は現在のURLに関する情報です
( ※ つまり、アドレスバーに表示される情報です )

FORM タグと CGI

FORM タグは何も指定しないと、method=GET となり、method=POST とする事によって
CGIアプリケーションへ直接データの受け渡しが可能となります(ACTION=url で受け渡し先を指定)。

method=GET は、アンカーでリンクするのと同じ結果となり、ACTION=url でリンク先を指定
して、フォーム内の入力データがリンク先の引数( ?以降 )として付加されます

CGI と関係するフォーム内の入力コントロール

1) 入力フィールド

<INPUT type=text>

2) 送信ボタン

<INPUT type=submit>

3) チェックボックス

<INPUT type=checkbox>

4) ラジオボタン

<INPUT type=radio>
name パラメータで同一名称を指定して同期させる

5) パスワードフィールド

<INPUT type=password>
入力文字が * に変更される

6) 隠しフィールド

<INPUT type=hidden>
画面には表示されない

7) コンボボックス

<SELECT>
<OPTION>001
<OPTION>002
</SELECT>

8) リストボックス

<SELECT size=2>
<OPTION>001
<OPTION>002
</SELECT>

メールアドレスの簡単なチェック

@が含まれているかどうかをチェックするには?
@の前後に文字列があるかどうかをチェックするには?

	strWork = document.frmMain.Email.value;
	if ( strWork.indexOf( "@" ) == -1 ) {
		alert( "メールアドレスのフォーマットが正しくありません(1)" );
		return false;
	}
	strWorkArray = strWork.split( "@" )
	if ( strWorkArray[0] == "" ) {
		alert( "メールアドレスのフォーマットが正しくありません(2)" );
		return false;
	}
	if ( strWorkArray[1] == "" ) {
		alert( "メールアドレスのフォーマットが正しくありません(3)" );
		return false;
	}

例えば、電話番号フィールドの入力チェックとは?

1) 文字列の長さ

	strWork = document.frmMain.Tel.value;
	alert( "電話番号に入力された文字数は " + strWork.length + " です" );

2) 部分文字列

	strCheck = "0123456789-";
	for ( i = 0; i < strWork.length; i++ ) {
		if ( strCheck.indexOf( strWork.substr( i, 1 ) ) == -1 ) {
			alert( "電話番号ではありません" );
			return false;
		}
	}